围绕DOM元素节点的增删改查

HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点 document
• 每个 HTML 元素是元素节点 element
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

围绕DOM节点的操作可以概括为四种：增、删、改、查

一、增：

增加新元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

document.createElement(“标签名”);  创建元素节点  并返回该元素  但此时  并没有添加到文档中

 parent.appendChild(newChild) 方法，将新元素作为父元素的最后一个子元素进行添加 若将要插入的节点 在文档中已经存在  则相当于剪切功能

或

parentNode.insertBefore（a,b）在指定的子节点前面插入新的子节点。  在b之前插入a，a b 都是parentNode的子元素

除此之外也可以：

document.createTextNode(“文本内容”);  创建文本节点

document.createComment();  创建注释节点

document.createDocumentFragment();  创建文档片段

二、删：

parentNode.removeChild(子节点);  删除被选节点的子节点    返回的为被删除的节点  相当于剪切

Node.remove()删除被选节点的所有内容，返回null，相当于移除

三、改：

（1）改变元素

替换 HTML DOM 中的子节点 replaceChild()

parent.replaceChild(newNode,originNode); 用newNode替换到parent中的originNode

改变元素内容
element.innerHTML="新内容";

（2）改变属性

setAttribute("prop","value")把指定属性设置或修改为指定的值。

（3）改变样式

element.style.prop="newValue";

（4）改变事件

element.onxxx=function(){

//函数体

}

xxx为事件类型 如：click、dbclick、mouseup等

四、 查：

element.innerHTML 会返回元素的内容

element.style.prop 会返回元素的样式 ，注意只能获得设置在行间的样式

window.getComputedStyle(element,null).prop 会返回元素的样式 ，注意只能获得设置在行间的样式,且该方法为只读的，IE9以下不兼容

elementNode.getAttribute("属性名");

查询DOM节点的方法，点这里

注意一点：DOM 根节点

有两个特殊的属性，可以访问全部文档：

• document.documentElement - 全部文档
• document.body - 文档的主体

HTML DOM 对象参考手册