HTML DOM 节点操作详解：获取、修改与增删

HTML DOM 节点基础概念

HTML DOM 定义了获取、修改、添加或删除 HTML 元素的标准规范。在 HTML DOM 模型中，一切皆被视为节点，整个 HTML 文档被解析为一棵节点树。

依据 W3C 的 HTML DOM 标准，HTML 文档内的所有内容均构成节点：

整个文档被视为一个文档节点。

每个 HTML 元素对应一个元素节点。

HTML 元素内部包含的文本构成文本节点。

每个 HTML 属性对应一个属性节点。

注释内容被视为注释节点。

HTML DOM 将 HTML 文档抽象为树状结构，这种结构被称为节点树。

HTML DOM 树形结构示例。

http://www.w3school.com.cn/i/ct_htmltree.gif

借助 HTML DOM，开发者可以通过 JavaScript 访问树中的任何节点。所有 HTML 元素（即节点）均可被修改，同时也支持创建或删除节点。

所有 HTML 元素均被定义为对象，其编程接口由对象方法和属性组成。

获取元素节点方法

一：获取元素节点的方法：

1. var node = document.getElementById("nodeId");

2. var nodelist = document.getElementsByClassName("nodeclassname");

3. var nodelist = document.getElementsByTagName("nodetagname");

节点后续操作详解

二：获取到元素节点以后我们可以对他进行的操作：1.对自身的操作。2.对子节点的操作。3.对兄弟节点的操作。4.对父节点的操作

2.1 删除自身：node.parentNode.removeChild(node);

2.2 判断是否有子节点：var boolean = node.hasChildNodes();

获取子节点列表：var childList = node.childNodes;

获取节点元素类型：var nodetype = node.nodeType; var nodename = node.nodeName;

删除子节点：node.removeChild(childNode);

在子节点尾部插入一个子节点：node.appendChild(childNode);

在子节点首部插入一个子节点：node.insertBefore(childNode);

用A节点替换B节点：node.replaceChild(A,B);

2.3 获取相邻的下一个兄弟节点：node.nextSibling

获取相邻的上一个兄弟节点：node.previousSibling

2.4 获取父节点：node.parentNode