javaScript歸納總結之Dom獲取集合元素物件

本篇文章給大家帶來了關於的相關知識，其中主要介紹了DOM獲取集合元素物件的相關問題，可以使用for或for...of迴圈迭代集合中的元素物件，以操控其屬性和方法，下面一起來看一下，希望對大家有幫助。

【相關推薦：、】

獲取集合中的元素物件

節點集合是節點（索引從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歸納總結之Dom獲取集合元素物件的詳細內容，更多請關注TW511.COM其它相關文章！