MohirDox

Ko'rinishi

DOM elementlarini tanlash ​

HTML elementlarini topish ​

Ko'pincha JavaScript yordamida HTML elementlarini boshqarishni xohlaysiz. Buning uchun avval elementlarni topishingiz kerak. Buning bir necha yo'li mavjud:

  • HTML elementlarini id bo'yicha topish
  • HTML elementlarini teg nomi bo'yicha topish
  • HTML elementlarini klass nomi bo'yicha topish
  • HTML elementlarini CSS selektorlari bo'yicha topish
  • HTML elementlarini HTML obyekt to'plamlari orqali topish

HTML elementini id bo'yicha topish ​

DOM-da HTML elementini topishning eng oson yo'li bu element id sidan foydalanishdir. Ushbu misol id="intro" bo'lgan elementni topadi:

js
const element = document.getElementById('intro')

Agar element topilsa, metod elementni obyekt sifatida qaytaradi (element o'zgaruvchisida). Agar element topilmasa, element o'zgaruvchisi null ni o'z ichiga oladi.

HTML elementlarini teg nomi bo'yicha topish ​

Ushbu misol barcha <p> elementlarini topadi:

js
const element = document.getElementsByTagName('p')

Ushbu misol id="main" bo'lgan elementni topadi va keyin id="main" ichidagi barcha <p> elementlarini topadi:

js
const x = document.getElementById('main')
const y = x.getElementsByTagName('p')

HTML elementlarini klass nomi bo'yicha topish ​

Agar bir xil klass ismiga ega barcha HTML elementlarini topmoqchi bo'lsangiz, getElementsByClassName() dan foydalaning.

Ushbu misol class="intro" bo'lgan barcha elementlar ro'yxatini qaytaradi.

js
const x = document.getElementsByClassName('intro')

HTML elementlarini CSS selektorlari yordamida topish ​

Belgilangan CSS selektoriga (id, klass nomlari, turlar, atributlar, atributlar qiymatlari va h.k.) mos keladigan barcha HTML elementlarini topishni xohlasangiz, querySelectorAll() metodidan foydalaning.

querySelector() metodi ​

Ushbu misol .demo klassiga ega birinchi elementni qaytaradi:

html
<html>
  <body>
    <p class="demo"></p>

    <script>
      // Paragraf elementiga kirish
      const myPara = document.querySelector('.demo')

      // Element mazmunini o'zgartirish
      myPara.innerHTML = 'Salom Dunyo!'
    </script>
  </body>
</html>

querySelectorAll() metodi ​

Ushbu misol class="intro" bo'lgan barcha <p> elementlari ro'yxatini qaytaradi:

js
const x = document.querySelectorAll('p.intro')

Keng tarqalgan xatolar

  • getElementById() ichida # ishlatish. Noto'g'ri: "#demo"
  • querySelector() faqat birinchi mos keluvchini qaytarishini unutish

HTML obyekt to'plamlari orqali topish ​

Ushbu misol forms to'plamidan id="frm1" bo'lgan forma elementini topadi va barcha element qiymatlarini ko'rsatadi:

js
const x = document.forms['frm1']
let text = ''
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + '<br>'
}
document.getElementById('demo').innerHTML = text

Quyidagi HTML obyektlariga (va obyekt to'plamlariga) ham kirish mumkin:

  • document.anchors
  • document.body
  • document.documentElement
  • document.embeds
  • document.forms
  • document.head
  • document.images
  • document.links
  • document.scripts
  • document.title