javaScript歸納總結之Dom取得集合元素對象

本篇文章為大家帶來了關於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><pre class="brush:php;toolbar:false">//用一下箭头函数哈
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	傳回目前節點的上一個同胞節點

程式碼範例：

<h1 id="a-a"><a>123</a></h1>
<h2 id="快捷支付">快捷支付</h2>
<div>
  <ul>
    <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	傳回元素的上一個同胞元素節點

<h1 id="a-a"><a>123</a></h1>
<h2 id="快捷支付">快捷支付</h2>
<div>
  <ul>
    <li>开通</li>
    <li>下单</li>
  </ul>
</div>

<script>
(() => {
  const step= document.querySelector(&#39;.step&#39;);
  // 在赋值符右侧写出：通过遍历元素节点的方法获取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中文網其他相關文章！