JavaScript DOM 操作

1. 理解 DOM

文档对象模型( DOM, Document Object Model )主要用于对 HTML 文档的内容进行操作。DOM 把 HTML 文档表达成一个节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。

2. DOM 节点

DOM 节点就是 HTML 上所有的内容 ,包括 :
+ 文档节点
+ 元素节点(标签)
+ 元素属性节点
+ 文本节点
+ 注释节点以下总结一些常用的 DOM 操作 :

3. 创建节点

document.createElement(‘元素名’);	创建新的元素节点
document.createAttribute(‘属性名’);	创建新的属性节点
document.createTextNode(‘文本内容’);	创建新的文本节点
document.createComment(‘注释节点’);	创建新的注释节点
document.createDocumentFragment( );	创建文档片段节点

如下,创建了两个元素节点(div 和 p)和一个文本节点(文本内容为”文本节点”) :
如何把文本放在 p 标签里面 ,并且把 p 标签放在 div 标签里面呢 ?以下提供了一个在元素里面追加节点的方法

4.添加节点

appendChild() 向父节点的最后一个子节点后追加新节点
通过以上方法 , 来实现节点的添加:

p.appendChild(pTxt);
div.appendChild(p);

节点添加之后，div结构如下：

<div>
    <p>文本节点</p>
</div>

在html中有如下div,把以上创建的结构添加到已有的元素节点中
<div id="wrapper"></div>
以下提供查找已有节点的方法

5. 查找节点

getElementById(‘id 属性值’);	返回拥有指定 id 的第一个对象的引用
getElementsByName(‘name 属性值’);	返回拥有指定名称的对象结合
getElementsByTagName(‘标签名’);	返回拥有指定标签名的对象集合
getElementsByClassName(‘class 属性值’);	返回拥有指定 class 的对象集合
querySelector(‘CSS 选择器’);	仅返回第一个匹配的元素
querySelectorAll(‘CSS 选择器’);	返回所有匹配的元素

已有 div 节点包含 id 属性 ,所以可以使用 getElementById()获取到已有节点 , 返回一个 dom 对象 ,然后再把新创建的节点结构添加进去:
document.getElementById("wrapper").appendChild(div);
可以在浏览器查看到新添加的 dom 结构:
也可以使用 querySelector()获取到已有的节点 ,如下也可以达到上面的效果:
document.querySelector("#wrapper").appendChild(div);

6. 删除节点

removeChild() 删除子节点，返回值为删除节点

如下删除 div 下面的 p 标签:
div.removeChild(p)
在浏览器中可以看到 p 节点已经被移除: