DOM获取节点的API

文档对象模型 DOM

🙋‍♂️：老师，今天要讲的这个DOM是啥呀？
👨‍🏫：DOM的意思是文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让JS操作HTML元素而制定的一个规范。
🙋‍♂️：懂了，既然是规范，肯定提供了一些API(方法)让我们操作DOM元素吧
👨‍🏫：是的，接下来我们着重讲讲如何获取DOM节点。

DOM节点的获取

通过id名获取

方式一：

<div id="box"></div>
<script>
  var box = document.getElementById('box');
  console.log(box);
</script>

👨‍🏫：(敲黑板) getElementById直接传入id名称即可，由于id是唯一的，所以只会返回一个元素。

方式二：

<div id="box"></div>
<script>
  var box = document.querySelector('#box');
  console.log(box);
</script>

通过class名获取

方式一：

<div id="box" class="box"></div>
<script>
  var box = document.getElementsByClassName('box');
  console.log(box);
</script>

方式二：

<div id="box"></div>
<script>
  var box = document.querySelector('.box');
  console.log(box);
</script>

👨‍🏫：(敲黑板) 注意getElementsByClassName中的Element后面加了s,这是因为class类名可以有多个，所以返回的是一个元素集合。

通过标签名获取

<div id="box"></div>
<script>
  var box = document.getElementsByTagName('div');
  console.log(box);
</script>

👨‍🏫：(敲黑板) 这里的getElementsByTagName返回的也是元素集合。👆

<div id="box"></div>
<script>
  var box = document.querySelector('div');
  console.log(box);
</script>

🙋‍♂️：老师，停停停。这个querySelector怎么啥都能获取啊
👨‍🏫：你没发现querySelector选择方式与CSS选择器方式一致吗？CSS选择器咋用，他它就咋用，当然全能咯。
🙋‍♂️：那干嘛还要讲其他那几个DOM获取方式啊，那么一大串英文，我记着麻烦，你直接讲querySelector不就好了吗
👨‍🏫：😓 好了好了，听我接着讲完你就不会这么想了。

querySelector与getElement的区别

1. querySelector只能选取到符合条件的第一个元素。当我们需要获取所有某个class名字的元素时使用getElementsByClassName，获取所有某个标签名的元素时使用getElementsByTagName

👨‍🏫： 补充：获取所有选中的元素集合也可以用querySelectorAll，使用方法与querySelector一致。

---

2. getXXXByXX 获取动态集合：通过函数获取元素之后，元素之后的改变还是会动态添加到已经获取的这个元素中。换句话说，通过这个方法获取到元素存储到变量的时候，以后每一次在Javascript函数中使用这个变量的时候都会再去访问一下这个变量对应的html元素。

   querySelector获取静态集合：通过函数获取元素之后，元素之后的改变并不会影响之前获取后存储到的变量。也就是获取到元素之后就和html中的这个元素没有关系了。

<div id="box" class="box"></div>
<script>
  //先获取
  var box_get = document.getElementsByClassName('box');
  var box_query = document.querySelector('.box');

  //然后删除节点
  box_query.remove()
  
  console.log(box_get);
  console.log(box_query);
</script>

👨‍🏫：同学们发现了吗，本来都能获取到同一个元素的，但是获取之后我们删除了它，querySelector选择器竟然还保留着它的信息！getElementsByClassName获取的元素集合是动态的，随着元素被删除后，集合里的它也就不存在了。
🙋‍♂️：那一个静态的，一个动态的，我感觉没啥作用啊，开发中会有什么影响吗？能举个例子吗？
👨‍🏫：别小看这个动态的集合，影响可大了。

现在提一个需求，先删除第3个li标签，然后给ul中所有li添加对相应的序号

<div class="app">
  <ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

实现效果如下图右侧所示

若我们使用querySelectorAll时：

var item = document.querySelectorAll('.item');
item[2].remove();
for (var i = 0; i < item.length; i++) {
  item[i].innerHTML = i + 1;
}

由于querySelectorAll获取的集合是静态的，里面的成员不会动态添加或删除。所以这时querySelectorAll就不适合 需要删除节点然后追加一些内容 的场景了。

使用getElementsByClassName：

var item = document.getElementsByClassName('item');
item[2].remove();
for (var i = 0; i < item.length; i++) {
  item[i].innerHTML = i + 1;
}

👨‍🏫：所以，getElement系列的API除了单词长一点，基本没别的缺点了🤭