DOM:Document Object Model
用对象的模式来描述表示对应的HTML、CSS

一系列API规范,通过这些API就可以操作DOM树、操作页面、操作节点


浏览器中是用JS进行逻辑处理编程,DOM规范在浏览器中的实现是通过JS实现的,可以认为浏览器中的JS包含DOM,通过JS调API来操作浏览器、操作页面里的结构、操作样式等等。
- DOM Core
- DOM HTML
- DOM Style
- DOM Event
HTML->DOM

节点遍历

节点类型

元素遍历


如何实现浏览器兼容版的element.children
element.children能够获取元素的元素子节点,但是低版本的ie不支持,如何在低版本的ie上兼容类似的功能。
function getElementChild(element){
if(!element.children){ //如果没有element.child,则启用兼容函数
var elementArr = []; //声明一个数组用以存放之后获取的子节点
var nodeList = element.childNodes; //初始化接受参数的子节点集合
for(var i=0;i<nodeList.length;i++){ //遍历集合
if(nodeList[i].nodeType == 1){ //若节点的元素类型属于1,即元素节点,存入数组
elementArr.push(nodeList[i]);
}
}
return elementArr; //返回存放子元素的数组
}else{ //若支持,直接返回
return element.children;
}
}
网友评论