Rumah > Artikel > hujung hadapan web > Ringkasan javaScript: Dom memperoleh objek elemen koleksi
Ringkasan javaScript: Dom memperoleh objek elemen koleksi
- WBOYke hadapan
- 2022-08-05 16:09:201561semak imbas
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.
[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= 'item-selected';
}//用一下箭头函数哈
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');
}
}
};
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');
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>
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>
[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!