Dom

Dom

在 HTML 中 DOM（文档对象模型）是 Web 前端里最基础、最常用的—模型。例如，一个网页其实就是一个 HTML 文件，经过浏览器的解析，最终呈现在用户面前。
什么是DOM
DOM 是 Document Object Model（文档对象模型）的缩写。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML

DOM的操作

常用的查找节点的方法有：
1.document.getElementById(‘id属性值’);返回拥有指定id的对象的引用

2.document.getElementsByClassName(‘class属性值’);返回拥有指定class的对象集合

3.document.getElementsByTagName(‘标签名’);返回拥有指定标签名的对象集合
常用的新建节点的方法有：
1.document.createElement(‘元素名’);创建新的元素节点

2.document.createAttribute(‘属性名’);创建新的属性节点

3.document.createTextNode(‘文本内容’);创建新的文本节点

.3常用的添加新节点的方法有：
1.element.setAttribute(attributeName, attributeValue );给元素增加指定属性，并设定属性值

2.element.setAttributeNode(attributeName );给元素增加属性节点

3.如需向HTML DOM添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

1)document.createTextNode(‘新增文本内容’);创建新的文本节点

2)parent.appendChild(创建的新节点);向父节点的最后一个子节点后追加新节点，或使用parent.insertBefore(newChild, existingChild );向父节点的某个特定子节点之前插入新节点
4常用的删除节点的方法有：
parentNode.removeChild(existingChild );删除已有的子节点，返回值为删除节点

DOM需要清楚你需要删除的元素，以及它的父元素。常用的解决方案：找到你希望删除的子元素，然后使用其parentNode属性来找到父元素：

var child=document.getElementById(“p1”);child.parentNode.removeChild(child);

5常用的修改节点的方法有：
parentNode.replaceChild(newChild, existingChild );用新节点替换父节点中已有的子节点

element.setAttribute(attributeName, attributeValue );给元素增加指定属性，并设定属性值(若原元素已有该节点，此操作能达到修改该属性值的目的)

element.setAttributeNode(attributeName );给元素增加属性节点(若原元素已有该节点，此操作能达到修改该属性值的目的)