Ringkasan javaScript: Dom memperoleh objek elemen koleksi-tutorial js-php.cn

Ringkasan javaScript: Dom memperoleh objek elemen koleksi

WBOY

Lepaskan： 2022-08-05 16:21:42

ke hadapan

1551 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript terutamanya isu berkaitan DOM mendapatkan objek elemen koleksi yang anda boleh gunakan untuk atau untuk...gelung untuk mengulang elemen dalam koleksi. Objek elemen untuk mengawal sifat dan kaedahnya. Mari kita lihat. Saya harap ia akan membantu semua orang.

Ringkasan javaScript: Dom memperoleh objek elemen koleksi

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Dapatkan objek elemen dalam koleksi

Koleksi nod ialah koleksi nod (indeks bermula dari 0)

Gunakan untuk atau untuk...gelung untuk mengulang objek elemen dalam koleksi untuk memanipulasi mereka Sifat dan kaedah.

属性和方法	简单说明
length	节点集合中元素对象个数
[n]或item(n)	返回索引n对应的单个元素对象

//在if条件表达式中写出：orderCheckbox元素对象集合中的元素节点的个数大于0
if(orderCheckboxs.length>0) {
  // 使用普通的for循环迭代orderCheckboxs元素对象集合中的每个元素对象
  for(let i=0;i<orderCheckboxs.length;i++){
    // 在.前面用item(n)方式获取元素对象集合的元素对象。
    orderCheckboxs.item(i).checked= true;
    // 在.前面用[]方式获取元素对象集合的元素对象。
    orderCheckboxs[i].parentElement.className= &#39;item-selected&#39;;
  }

Salin selepas log masuk

//用一下箭头函数哈
selectAll.onchange= (e) => {
  // 下面的语句是循环体，使用for…of循环迭代orderCheckboxs元素对象集合，循环变量是ele
  for(let ele of orderCheckboxs){
      ele.checked= e.target.checked;
      if(e.target.checked) {
        ele.parentElement.classList.add('item-selected');
      } else {
        ele.parentElement.classList.remove('item-selected');
      }
  }
};

Salin selepas log masuk

Secara amnya disyorkan untuk menggunakan gelung for..of

***** Fahami dua Kaedah berikut untuk mendapatkan koleksi objek elemen.
document(or element).getElementsByClassName('class value')

Mengembalikan kelas dalam keturunan elemen api dokumen Himpunan semua objek elemen yang sifatnya adalah parameter. Parameter hanya boleh menjadi nilai atribut kelas elemen HTML (iaitu, nama kelas).

dokumen(atau elemen).getElementsByTagName('nama tag')

Kembalikan Koleksi semua objek elemen dalam dokumen atau turunan elemen dengan teg bernama parameter. Parameter hanya boleh menjadi nama tag bagi elemen HTML

const orders= document.getElementsByClassName('order');
const input= document.getElementsByTagName('input');

Salin selepas log masuk

Merentasi nod

akan menganggap nod teks ruang kosong sebagai nod anak, kecuali parentNode, null akan dikembalikan

属性	说明
parentNode	返回当前节点的父节点
firstChild	返回当前节点的第一个子节点
lastChild	返回当前节点的最后一个子节点
nextSibling	返回当前节点的下一个同胞节点
previousSibling	返回当前节点的上一个同胞节点

Contoh kod:

<body>
<h1><a href="#">123</a></h1>
<h2>快捷支付</h2>
<div class="panel">
  <ul class="step">
    <li>开通</li>
    <li>下单</li>
  </ul>
</div>
<script>
const t= setInterval(() => {
    // 在赋值符右侧写出：通过遍历元素节点的方法获取curStep的上一个元素节点
    let lastStep=curStep.previousElementSibling ;
    // 在赋值符右侧写出：通过遍历元素节点的方法获取curStep的下一个元素节点
    let nextStep=curStep.nextElementSibling ;
</script>

Salin selepas log masuk

Nod elemen lintasan

Baca sahaja objek elemen, Hanya nod elemen lintasan (abaikan teks dan nod lain ) , tidak dijumpai adalah batal

只读属性	说明
parentElement	返回元素的父元素节点
firstElementChild	返回元素的第一个子元素节点
lastElementChild	返回元素最后一个子元素节点
nextElementSibling	返回元素的下一个同胞元素节点
previousElementSibling	返回元素的上一个同胞元素节点

<body>
<h1><a href="#">123</a></h1>
<h2>快捷支付</h2>
<div class="panel">
  <ul class="step">
    <li>开通</li>
    <li>下单</li>
  </ul>
</div>

<script>
(() => {
  const step= document.querySelector('.step');
  // 在赋值符右侧写出：通过遍历元素节点的方法获取class为step的第1个子元素节点。
  let curStep=step.firstElementChild;

  const t= setInterval(() => {
    // 在赋值符右侧写出：通过遍历元素节点的方法获取curStep的上一个元素节点
    let lastStep=curStep.previousElementSibling ;
    // 在赋值符右侧写出：通过遍历元素节点的方法获取curStep的下一个元素节点
    let nextStep=curStep.nextElementSibling ;
</script>

Salin selepas log masuk

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Ringkasan javaScript: Dom memperoleh objek elemen koleksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!