获取集合中的元素对象

节点集合是节点（索引从0开始）组成的集合

使用for或for...of循环迭代集合中的元素对象，以操控其属性和方法。

//在if条件表达式中写出：orderCheckbox元素对象集合中的元素节点的个数大于0
if(orderCheckboxs.length>
0) {
    
  // 使用普通的for循环迭代orderCheckboxs元素对象集合中的每个元素对象
  for(let i=0;
    iorderCheckboxs.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

代码例子：

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

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>