JavaScrip学习笔记（四）---DOM基础

来源：互联网发布：win10玩csgo优化设置编辑：程序博客网时间：2024/04/29 01:11

一、子节点

1、元素节点、文本节点

实例01

html

<body>

文本节点1<li></li>

文本节点2<li></li>

文本节点3<li></li>

文本节点4<li></li>

文本节点5<li></li>

文本节点6</ul>

</body>

script

<script>
    window.onload=function(){
      var oUl=document.getElementById('ul1');
        alert(oUl.childNodes.length);
    };

</script>

2、nodeType属性

常见节点nodeType值元素节点1属性节点2文本节点3

实例02

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');

for(var i=0;i<oUl.childNodes.length;i++){

             if(oUl.childNodes[i].nodeType==1){
             oUl.childNodes[i].style.background='red';
             }

}

};

</script>

3、children获取元素节点

实例03

html代码

<ul id="ul1">
    <li>
        <!--子节点只算第一层的，在这里span是li的子节点，而不是ul的子节点-->
        <span>子节点</span>
    </li>
    <li></li>

</ul>

javascript代码

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        //children获取元素节点
       //alert(oUl.children.length);
        for(var i=0;i<oUl.children.length;i++){
            oUl.children[i].style.background='red';
        }
    };

</script>

二、父节点

实例04

html代码

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        alert(oUl.parentNode);
    };
</script>

javascript代码

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        alert(oUl.parentNode);
    };
</script>

实例05 父节点的应用

html代码

<ul id="ul1">
    <li>父节点1 <a href="javascript:;">隐藏</a></li>
    <li>父节点2 <a href="javascript:;">隐藏</a></li>
    <li>父节点3 <a href="javascript:;">隐藏</a></li>
    <li>父节点4 <a href="javascript:;">隐藏</a></li>
    <li>父节点5 <a href="javascript:;">隐藏</a></li>
    <li>父节点6 <a href="javascript:;">隐藏</a></li>
    <li>父节点7 <a href="javascript:;">隐藏</a></li>

</ul>

javascript代码

<script>
   /* window.onload=function(){
        var oUl=document.getElementById('ul1');
        alert(oUl.parentNode);
    };*/
   window.onload=function(){
       var oA=document.getElementsByTagName('a');
       for(var i=0;i<oA.length;i++){
           oA[i].onclick=function(){
               this.parentNode.style.display='none';
           };
       }
   };

</script>

三、firstChild

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>

       window.onload=function(){
           var oUl=document.getElementById('ou1');

           //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>
</head>
<body>
    <ul id="ou1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

</html>

四、通过class类获取元素、以及函数封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function getByClass(oParent,sClass){
            var aResult=[];
            var aEle=oParent.getElementsByTagName('*');
            for(var i=0;i<aEle.length;i++){
                if(aEle[i].className==sClass){
                    aResult.push(aEle[i]);
                }
            }
            return aResult;
        }

        window.onload=function(){
            var oUL=document.getElementById('ul1');
            var aBox=getByClass(oUL,'box');
            for(var i=0;i<aBox.length;i++){
                aBox[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>
</html>

1 0