DOM是W3C的标准,分为3个不同的部分:
核心DOM:针对任何结构化文档的标准模型,XML DOM:针对XML文档的标准模型,HTML DOM:针对HTML文档的标准模型。
HTML DOM中所有事物都是节点:
整个文档是文档节点,HTML元素是元素节点,HTML属性是属性节点,HTML内容是文本节点,注释是注释节点。
DOM的一些方法:
方法 | 描述 |
getElementById() | 返回带有指定ID的元素 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点数组,length获取数组长度 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点数组,length获取数组长度 |
appendChild() | 加入新节点 parentNode.appendeChild(newNode) |
removeChild() | 删除指定节点 parentNode.removeChild(theNode) |
replaceChild() | 替换指定节点 parentNode.replaceChild(newNode,theNode) |
insertBefore() | 在指定节点前插入新节点 parentNode.insertBefore(newNode,theNode) |
createAttribute() | 创建属性节点 |
createElement() | 创建元素节点,var para=document.createElement("p"); |
createTextNode() | 创建文本节点 |
getAttribute() | 返回指定的属性值 但是一般这样获取:document.getElementById("p2").style.color |
setAttribute() | 把指定属性设置或修改为指定的值 node.setAttribute("attribute","value") |
DOM的一些属性:
属性 | 描述 |
parentNode | 返回父节点 xx.parentNode |
childNodes[i] | 返回第i+1个子节点 |
attributes[i] | 返回第i+1个属性节点 |
firstChild | 返回第一个子节点 |
lastChild | 返回最后一个子节点 |
nextSibling | 返回下一个兄弟节点 |
previousSibling | 返回上一个兄弟节点 |
innerHTML | 获取元素内容 |
nodeName | 只读,规定节点的名称 |
元素节点的nodeName与标签名相同 | |
属性节点的nodeName与属性名相同 | |
文本节点的nodeName始终是#text | |
文档节点的nodeName始终是#document | |
nodeValue | 规定节点的值 |
元素节点的 nodeValue 是 undefined 或 null | |
文本节点的 nodeValue 是文本本身 | |
属性节点的 nodeValue 是属性值 | |
nodeType(返回节点类型,只读) | 1:元素,2:属性,3:文本,8:注释,9:文档 |
onclick | document.getElementById("myBtn").onclick=function(){xx()}; |
document.documentElement | 访问全部文档,alert(document.documentElement); |
document.body | 访问body内容 |
document.head | 访问头部内容 |