javaScript歸納總結之Dom取得集合元素對象
- WBOY轉載
- 2022-08-05 16:09:201569瀏覽
本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了DOM獲取集合元素物件的相關問題，可以使用for或for...of循環迭代集合中的元素對象，以操控其屬性和方法，下面一起來看一下，希望對大家有幫助。
【相關推薦：javascript影片教學、web前端】
取得集合中的元素對象
節點集合是節點（索引從0開始）組成的集合
使用for或for...of循環迭代集合中的元素對象，以操控其屬性和方法。
| 屬性與方法 | 簡單說明 |
| #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');
}
}
};
一般推薦用for..of迴圈
*****了解下面兩個取得元素物件集合的方法。
document(或element).getElementsByClassName('class值')
傳回文檔火元素後代中class屬性為參數的所有元素物件集合。參數只能為HTML元素class屬性值(即類別名稱)。
document(或element).getElementsByTagName('標籤名稱')
返回文檔或元素後代中標籤名為參數的所有元素物件集合。參數只能為HTML元素的標籤名稱.
const orders= document.getElementsByClassName('order');
const input= document.getElementsByTagName('input');
遍歷節點
#會將空白符文字節點當作子節點，parentNode除外，找不到傳回null
| #屬性 | 說明 |
| parentNode | 傳回目前節點的父節點 |
| firstChild | 傳回目前節點的第一個子節點 |
| #lastChild | 傳回目前節點的最後一個子節點 |
| nextSibling | 傳回目前節點的下一個同胞節點 |
| previousSibling | 傳回目前節點的上一個同胞節點 |
程式碼範例：
<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>
遍歷元素節點
元素物件的唯讀性，只遍歷元素節點（忽略文字等節點），找不到為null
| 只讀屬性 | 說明 |
| 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>
【相關推薦：javascript影片教學、web前端】
以上是javaScript歸納總結之Dom取得集合元素對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除
上一篇：完全掌握DOM屬性成員與文件流程下一篇：完全掌握DOM屬性成員與文件流程