我要评论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节点的方法，
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
您可能感兴趣的文章:
网友评论