DOM 常用操作【一】

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值
setAttribute()	把指定属性设置或修改为指定的值。
insertBefore

创建Element 和 TextNode

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);

删除节点

parent.removeChild(child);
//父元素删除子节点
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

替换元素

parent.replaceChild(para,child);
child.parentNode.removeChild(child);
//父元素替换子元素和子元素

访问根元素

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

访问子节点

childNodes 和 nodeValue