DOM的属性和方法
特点:凡是好用的都是不兼容的

1.DOM的定义

“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。”
HTML Dom是关于如何增,删,改,查 HTML 元素的标准。

2.DOM节点

2.1节点childNodes,parentNode,offsetParent

childNodes  //所有类型的子节点  获取的都是亲儿子
children //只获取元素节点  亲儿子
parentNode  //获取元素的父节点,亲生父亲

//HTML
<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

//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隐藏*/
<ul>
    <li>苹果<a href="#">隐藏</a></li>
    <li>梨子<a href="#">隐藏</a></li>
    <li>香蕉<a href="#">隐藏</a></li>
    <li>菠萝<a href="#">隐藏</a></li>
</ul>

//JS
var aTags = document.getElementsByTagName("a");
for(var i =0;i<aTags.length;i++){
      aTags[i].onclick=function () {
          this.parentNode.style.display="none";
          return false;
      }
}

offsetParent  //获取给了定位元素的父级
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以下不支持

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var test = document.getElementById("test");
    if(document.all){
        test.firstChild.style.background="pink"
    }else{
        test.firstElementChild.style.background="pink"
    }
</script>

3.操作元素的属性

oDiv.style.display = "none";
oDiv.style["display"]="none";
oDiv.setAttribute("style","display:none");

<input type="text" id="input"/>
<button id="btn">改变</button>
<script>
    var input = document.getElementById("input");
    var btn = document.getElementById("btn");
    btn.onclick=function () {
        //input.value="hello world"
        input.setAttribute("value","hello world")
    }
</script>

3.1获取,设置,删除

getAttribute();
setAttribute();
removeAttribute();

4.用className选取元素

function getByClass(oParent,aclassName) {
        var result=[];
        var Eles = oParent.getElementsByTagName("*");
        for(var i =0;i<Eles.length;i++){
            if(Eles[i].className==aclassName){
                result.push(Eles[i]);
            }
        }
        return result;
}