DOM基础1

DOM document

childNodes:

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('ul1');
            //在IE6-8没问题。
            alert(oDiv.childNodes.length)//5个节点除了两个li之外还有三个空。所以是有小问题的，把空的文本节点也算在里边了。
        }
    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
</ul>

nodeType:

<script>
        window.onload=function(){
            var oDiv=document.getElementById('ul1');
           for(var i=0;i<oDiv.childNodes.length;i++){
               //childNodes==3-->文本节点
               //childNodes==1-->元素节点
              // alert(oDiv.childNodes[i].nodeType);
               if(oDiv.childNodes[i].nodeType==1){
                   oDiv.childNodes[i].style.background='red';
               }
           }
        }
    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
</ul>

</body>

children:只包括元素不包括文本（空格字符等）。找直接子节点。

parentNode:找直接父节点。

<script>
        window.onload=function(){
            var aA=document.getElementsByTagName('a');
            var oUl=document.getElementById('ul1');
            var aLi=oUl.getElementsByTagName('li');
            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                   this.parentNode.style.display='none';
                }
            }
        }
    </script>
</head>
<body>
<ul id="ul1">
    <li>fjfnjskdfsdn <a href="javascript:;">隐藏</a></li>
    <li>12345667<a href="javascript:;">隐藏</a></li>
    <li>fecdvb<a href="javascript:;">隐藏</a></li>
    <li>htjiohodhqihdqo<a href="javascript:;">隐藏</a></li>
    <li>cacsdqsxsxdq<a href="javascript:;">隐藏</a></li>
</ul>

</body>

offsetParent是随父级元素变而变。元素的父级是谁，就根据谁的位置变。

DOM节点：

首尾子节点（有兼容性问题） firstChild、firstElementChild,lastChild、lastElementChild
兄弟节点（有兼容性问题）nextSibling、nextElementsSibling,previousSibling、previousElementSibling

firstChild也和childNodes一样，也把空的子节点算在内。但是在低版本IE6-8的浏览器中没有问题。

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        /*//IE6-8
        oUl.firstChild.style.background='red';
        //高级浏览器
        oUl.firstElementChild.style.background='red';*/
        if(oUl.firstElementChild){
            oUl.firstElementChild.style.background='red';
        }else{
            oUl.firstChild.style.background='red';
        }
    }
</script>
<body>

</body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

DOM操作元素属性：

元素属性操作：

oDiv.style.display='block'
oDiv.style["display"]="block";
DOM方式

DOM方式:

获取：getAttribute(名称)
设置：setAttribute(名称，值)
删除：removeAttribute(名称)

<script>
    window.onload=function(){
        var otxt1=document.getElementById('otxt');
        var obtn1=document.getElementById('obtn');
        obtn1.onclick=function(){
            //otxt1.value='ddsadsa';
            //otxt1['value']='dqfqfefewq';
            otxt1.setAttribute('value','ddxwqrxasfgrehtrhrt');
        }
    }
</script>
<body>
<input type="text" id="otxt"/>
<input type="button" id="obtn" value="设置文字"/>
</body>

<script>
       
        window.onload=function(){
            var aLi=document.getElementsByTagName('li');
            for(var i=0;i<aLi.length;i++){
                if(aLi[i].className=='box'){
                    aLi[i].style.background='red';
                }
            }
        }
    </script>
</head>
<body>
<ul id="ul1">
    <li class="box"></li>
    <li class="box"></li>
    <li></li>
    <li></li>
    <li class="box"></li>
    <li></li>
</ul>

</body>

DOM操作元素属性：

猜你喜欢