MohirDox

Ko'rinishi

HTML DOM - HTMLni o'zgartirish ​

HTML mazmunini o'zgartirish ​

HTML DOM JavaScript-ga HTML elementlarining matnini ham, mazmunini ham o'zgartirishga imkon beradi. Mazmunni o'zgartirishning eng oson yo'li innerHTML xususiyatidan foydalanishdir:

js
document.getElementById(id).innerHTML = yangi_HTML

innerHTML xususiyati ​

Element mazmunini olishning eng oson yo'li innerHTML xususiyatidan foydalanishdir. innerHTML xususiyati HTML elementlarining mazmunini olish yoki almashtirish uchun foydalidir.

Eslatma

innerHTML xususiyati har qanday HTML elementini, jumladan <html> va <body> ni olish yoki o'zgartirish uchun ishlatilishi mumkin.

Keng tarqalgan xatolar

  • DOM elementiga u mavjud bo'lishidan oldin kirishga urinish
  • "demo" kabi id dagi qo'shtirnoqlarni unutish

Misollar ​

Paragraf mazmunini o'zgartirish ​

html
<html>
  <body>
    <p id="p1">Salom Dunyo!</p>

    <script>
      document.getElementById('p1').innerHTML = 'Yangi matn!'
    </script>
  </body>
</html>

Tushuntirish:

  • Yuqoridagi HTML hujjati id="p1" bo'lgan <p> elementini o'z ichiga oladi.
  • Biz id="p1" bo'lgan elementni olish uchun HTML DOM dan foydalanamiz.
  • JavaScript ushbu elementning mazmunini (innerHTML) "Yangi matn!" ga o'zgartiradi.

Sarlavha mazmunini o'zgartirish ​

html
<!DOCTYPE html>
<html>
  <body>
    <h1 id="id01">Eski sarlavha</h1>

    <script>
      const element = document.getElementById('id01')
      element.innerHTML = 'Yangi sarlavha'
    </script>
  </body>
</html>

Atributni o'zgartirish ​

HTML atributining qiymatini o'zgartirish uchun ushbu sintaksisdan foydalaning:

js
document.getElementById(id).atribut = yangi_qiymat

Misol: src atributini o'zgartirish ​

Ushbu misol <img> elementining src atributini qiymatini o'zgartiradi:

html
<!DOCTYPE html>
<html>
  <body>
    <img id="myImage" src="smiley.gif" />

    <script>
      document.getElementById('myImage').src = 'landscape.jpg'
    </script>
  </body>
</html>

Dinamik HTML mazmuni ​

JavaScript dinamik HTML mazmunini yaratishi mumkin:

html
<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>

    <script>
      document.getElementById('demo').innerHTML = 'Sana: ' + Date()
    </script>
  </body>
</html>

document.write() ​

JavaScript-da document.write() to'g'ridan-to'g'ri HTML chiqish oqimiga yozish uchun ishlatilishi mumkin:

html
<!DOCTYPE html>
<html>
  <body>
    <p>Bla bla bla</p>

    <script>
      document.write(Date())
    </script>

    <p>Bla bla bla</p>
  </body>
</html>

Ogohlantirish

Hujjat yuklangandan keyin hech qachon document.write() dan foydalanmang. U butun hujjatni qayta yozib yuboradi (o'chirib tashlaydi).