JavaScript获取和操作 DOM 节点

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 类型，而不是数组，不能像操作数组一样操作这些集合，转换成数组可以更方便的利用数组的原生方法对其进行操作。

操作节点的时候，特别是动态渲染的节点，需要做空判断，防止程序报错中断执行。