一些常用的 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