DOM节点关系及基本操作
- DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。
- 它的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。
- 浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。
- DOM的最小组成单位叫做节点(node)
节点关系
childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象
NodeList 对象的独特之处在于,它实际上是基于 DOM 结构动态执行查询的结果,因此 DOM 结构的变化能够自动反映在 NodeList 对象中。我们常说，NodeList 是有生命、有呼吸的对象,而不是在我们第一次访问它们的某个瞬间拍摄下来的一张快照。
增加节点
var p = document.createElement("p");
var n = document.createTextNode("new para");
p.appendChild(n);appendChild(),用于向 childNodes 列表的末尾添加一个节点。添加节点后, childNodes 的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后, appendChild()返回新增的节点。来看下面的例子:
如果传入到 appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置转移到新位置。
即使可以将 DOM 树看成是由一系列指针连接起来的,但任何 DOM 节点也不能同时出现在文档中的多个位置上。因此,如果在调用 appendChild()时传入了父节点的第一个子节点,那么该节点就会成为父节点的最后一个子节点。
删除节点
要先获得父元素的节点
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);节点类型
元素节点
元素节点element对应网页的HTML标签元素。
以body元素为例
// 1 'BODY' null
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true
特性节点
元素特性节点attribute对应网页中HTML标签的属性，它只存在于元素的attributes属性中，并不是DOM文档树的一部分。特性节点的节点类型nodeType值是2，节点名称nodeName值是属性名，nodeValue值是属性值
<div id="test" style="color:red">div>// var attr = document.getElementById("test").attributes.style;
// 可以直接使用标签的id 效果等同于上一句
var attr = test.attributes.style;
//2 "style" "color:red"
console.log(attr.nodeType, attr.nodeName, attr.nodeValue)文本节点
文本节点text代表网页中的HTML标签内容。文本节点的节点类型nodeType值是3，节点名称nodeName值是’#text’，nodeValue值是标签内容值
html：
<div id="test">测试div>var txt = test.firstChild;
//3 '#text' '测试'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true 注释节点
注释节点comment表示网页中的HTML注释。注释节点的节点类型nodeType的值为8，节点名称nodeName的值为’#comment’，nodeValue的值为注释的内容
<div id="myDiv">div>var com = myDiv.firstChild;
//8 '#comment' '我是注释内容'
console.log(com.nodeType,com.nodeName,com.nodeValue)
console.log(Node.COMMENT_NODE === 8);//true 文档节点
文档节点document表示HTML文档，也称为根节点，指向document对象。文档节点的节点类型nodeType的值为9，节点名称nodeName的值为’#document’，nodeValue的值为null
//9 "#document" null
console.log(document.nodeType,document.nodeName,document.nodeValue)
console.log(Node.DOCUMENT_NODE === 9);//true