查找元素

使用父节点、子节点和兄弟节点之间的连接遍历节点确实非常实用。但是如果我们只想查找文档中的特定节点，那么从document.body开始盲目沿着硬编码的链接路径查找节点并非良策。如果程序通过树结构定位节点，就需要依赖于文档的具体结构，而文档结构随后可能发生变化。另一个复杂的因素是 DOM 会为不同节点之间的空白字符创建对应的文本节点。例如示例文档中的body标签不止包含 3 个子节点（<h1>和两个<p>元素），其实包含 7 个子节点：这三个节点、三个节点前后的空格、以及元素之间的空格。

因此，如果你想获取文档中某个链接的href属性，最好不要去获取文档body元素中第六个子节点的第二个子节点，而最好直接获取文档中的第一个链接，而且这样的操作确实可以实现。

  1. let link = document.body.getElementsByTagName("a")[0];
  2. console.log(link.href);

所有元素节点都包含getElementsByTagName方法，用于从所有后代节点中（直接或间接子节点）搜索包含给定标签名的节点，并返回一个类数组的对象。

你也可以使用document.getElementById来寻找包含特定id属性的某个节点。

  1. <p>My ostrich Gertrude:</p>
  2. <p><img id="gertrude" src="img/ostrich.png"></p>
  4. <script>
  5.   let ostrich = document.getElementById("gertrude");
  6.   console.log(ostrich.src);
  7. </script>

第三个类似的方法是getElementsByClassName，它与getElementsByTagName类似，会搜索元素节点的内容并获取所有包含特定class属性的元素。