DOM的属性和方法
特点:凡是好用的都是不兼容的
1.DOM的定义
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。”
HTML Dom是关于如何增,删,改,查 HTML 元素的标准。
2.DOM节点
2.1节点childNodes,parentNode,offsetParent
childNodes //所有类型的子节点 获取的都是亲儿子
children //只获取元素节点 亲儿子
parentNode //获取元素的父节点,亲生父亲
//HTML
- 1
- 2
- 3
//JS
var test = document.getElementById("test");
alert(test.childNodes.length); //chrome下结果为7,IE9以下结果为3
//在chrome下将空的文本节点,也算在内容
nodeType //节点的类型
1.为元素节点
2.为文本节点
3.为属性节点
var test = document.getElementById("test");
var childs =test.childNodes;
for(key in childs){
if(childs[key].nodeType==1){
childs[key].style.background="red";
}
}
//parentNode
//HTML
/*点击a,对应的li隐藏*/
//JS
var aTags = document.getElementsByTagName("a");
for(var i =0;ioffsetParent //获取给了定位元素的父级
offsetLeft //返回元素的水平偏移位置。
offsetTop //返回元素的垂直偏移位置。
offsetWidth //返回元素的宽度
offsetHeight //返回元素的高度
2.2节点childNodes,parentNode,offsetParent
//可用document.all解决浏览器兼容性问题
if(document.all){
//IE下
}else{
//其他浏览器下
}
- 首尾子节点
- 有兼容问题
firstChild //包含所有类型的节点
firstElementChild //IE9以下不兼容
lastChild //所有类型的节点
lastElementChild //IE9以下不支持
fistElementChild.png
- 兄弟节点
- 有兼容问题
nextSibling
nextElementSibling //IE9以下不支持
previousSibling
previousElementSibling //IE9以下不支持
- 1
- 2
- 3
3.操作元素的属性
oDiv.style.display = "none";
oDiv.style["display"]="none";
oDiv.setAttribute("style","display:none");
3.1获取,设置,删除
getAttribute();
setAttribute();
removeAttribute();
4.用className选取元素
function getByClass(oParent,aclassName) {
var result=[];
var Eles = oParent.getElementsByTagName("*");
for(var i =0;i