@[TOC]
1. 获取 DOM 节点
常用的DOM节点
- element.getElementById 返回对拥有指定 id 的第一个对象的引用。
- element.getElementByName返回带有指定名称的对象集合。
- element.getElementsByTagName返回带有指定标签名的对象集合。
- element.getElementsByClassName返回一个包含了所有指定类名的子元素的类数组对象。
- element.querySelector 文档对象模型 Document 引用的 querySelector () 方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素 Element 。 如果找不到匹配项，则返回 null 。- element.querySelectorAll 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
2.操作DOM 节点
以更换文本为例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>结果：
结果已经将文字更改掉了。
3.小结
操作 DOM 是前端程序员的基本功，也是编写网页的重要知识之一。
获取 DOM 节点的方法有很多，部分方法返回的是 NodeList 或 HTMLCollection 类型，而不是数组，不能像操作数组一样操作这些集合，转换成数组可以更方便的利用数组的原生方法对其进行操作。
操作节点的时候，特别是动态渲染的节点，需要做空判断，防止程序报错中断执行。
