JavaScript的DOM获取遍历元素

类数组

类数组是一个对象，只不过很像一个数组，类数组也有 lenght 属性，但是类数组并不具备数组的原型方法，所以类数组不能使用数组的方法

• 常见的类数组：argments（函数的参数集合），Nodelist（节点列表），HTMLCollection（DOM 列表）等等

• 类数组转为数组的方法：Array.form() , 展开运算符…rest :[...类数组]

DOM

文档对象模型，把 HTML 文档转换成节点树，每个 HTML 标签都是一个对象，可以使用 javascript 访问，修改这些对象

几个获取 DOM 对象的 API

• querySelectorAll('CSS选择器') ：选择一组对象
• querySelector('CSS选择器') ： 选择一组中的一个
• getElementById('id') ：使用 id 获取单个元素
• getElementsByTagName('标签名') ：使用标签名获取，不要忘了 Element 后面的s，它返回的是一个元素的集合
• getElementsByClassName('标签名') ：使用标签名获取，不要忘了 Element 后面的s，它返回的是一个元素的集合
• 最常用的就是前两个

DOM 操作的几个快捷方式

document 是节点的入口，最顶层的节点可以作为 document 的属性

• document.doucmentElement ：获取 HTML 文档节点
• document.body ：获取整个 body 标签节点

• document.head ：获取整个 head 标签的节点

• body.children ： 获取某个节点的所有子节点（不包含文本节点）

• body.firstElementChild ： 获取某个节点的第一个节点（不包含文本节点）
• body.lastElementChild ： 获取某个节点的最后一个子节点（不包含文本节点）
• body.previousElementsSiBling ：获取某个节点的同级前一个节点（不包含文本节点）
• div.nextElementsSiBling：获取某个节点的同级下一个节点（不包含文本节点）
• body.parentElement：获取某个节点的父节点

获取表单里的元素和值(更快更优雅的方式)

• document.forms获取所有表单类数组，document.forms.name/id获取某个表单
• form.elements 获取表单所有元素类数组

实例

<script>
      // 获取表单的类数组
      // let form = document.querySelector('form');  不够优雅
      let form = document.forms.login;
      console.log(form);
      // 获取表单后，可以继续获取表单里的任何元素的类数组
      console.log("获取表单后，可以继续获取表单里的任何元素的数组");
      let elem = form.username.value;
      console.log(elem);
      // 所有的元素，不管嵌套了多深，都可以通过form.elements找到
</script>

DOM遍历

• 普通for循环，for in循环都不理想，而且for in会把不想看到的也遍历出来
• 使用arr.forEach((value,index,data) => {})方法
  • value是遍历数组的值
  • index是遍历数组的索引（可省略）
  • data是数组本身（可省略）
  • forEach()方法内不支持break

let last = document.querySelectorAll("ul li");
console.log("遍历数组");
// forEach()方法对数组的每个元素执行一次提供的函数
// 大多数类数组没有forEach方法，Nodelist类型的有，所以没有转为真数组
forEach(value,index,array)
      last.forEach((value, index, data) => {
        console.log(value);
        console.log(index);
        if (index % 2 === 0) {
          value.style.backgroundColor = "red";
        } else {
          value.style.backgroundColor = "lightgreen";
        }
});