DOM把HTML文档看作对象(节点)树,通过操作对象(节点),实现操作HTML文档。
(1)查找节点
Docunment.getElementById()
node getElementsByClassName()
getElementsByTagName()
getElementsByName()
querySelector()
querySelectorAll()
(2)操作节点的属性
node.getAttrbute(名);
node.getAttrbute(名,值);//有兼容性问题
(3)操作节点内容 innerHTML
node.innerHTML
node.innerText/node.textContent//有兼容性问题
(4)操作节点的值
input.value
(5)操作节点样式
node.style.样式名=样式值
document.getComputedStyle()
node.className
(6)遍历节点
node.parwntNode
.childNodes
.nextSidling
.lastChild
.firstChild
.previousSibling
(7)删除节点
parent.removeChild();
(8)替换节点
parent.replaceChild(newChild,oldChild)
(9)添加节点
var newChild = document.createElemrn()
newChild.appendChild();
(10)克隆节点
node.cloneNode()
原生ODM操作方法的不足:
(1)方法名比较麻烦,操作思路比较麻烦
(2)浏览器兼容性问题