JavaScript基础学习（五）

一、在末尾添加节点
       -1.获取ul标签
       -2.创建li标签
           document.createElement("标签名称")方法;
       -3.创建文本
           document.creatTextNode("文本内容");
       -4.把文本添加到li下面
           使用appendChild方法
       -5.把li添加到ul末尾

使用appendChild方法

   <body>
           <ul id="ulid">
           <li>11111</li>
           <li>22222</li>
           <li>33333</li>
           <li>44444</li>
   </ul>

   <input type= "button" value="add"/ onclick="addli()">
</body>
<script type="text/javascript">
       //在末尾添加节点
       function addli(){
               //获取ul标签
               var ul1 = document.getElementById("ulid");
               //创建标签
               var li1 = document.createElement("li");
               //创建文本
               var text1 = document.createTextNode("55555");
               //把文本加入到li下面
               li1.appendChild(text1);
               //把li加入到ul下面
               ul1.appendChild(li1);
       }
   </script>

二、元素对象（element对象）
       **要操作element对象，首先必须获取到element,
           -使用document里面相应的方法获取

       **方法
           ***获取属性里面的值
                   getAttribute("属性名称");
                   <input type="text" name="name1" id="inputid" value="ccc"/>
               //先获取input标签
               var input1 = document.getElementById("inputid");
               //document.write(input1.value);
               document.write(input1.getAttribute("value"));

           **设置属性值
           input1.setAttribute("value","ssss");

           **删除属性(不能删除value)
           document.write(input1.getAttribute("name"));//name1
           document.write(input1.removeAttribute("name"));
           document.write(input1.getAttribute("name"));//

           ***想要获取标签下面的子标签
               **使用属性childNodes，但是这个属性兼容性很差
               **获得标签下面子标签的唯一有效办法，使用getElementsByTagName()方法
           <ul id="ulid1">
                   <li>aaaa<li>
                   <li>aaaa<li>
                   <li>cccc</li>
           </ul>
           <script type="text/javascript">
           //获取到ul下面的所有子标签（子元素）
           //获取ul标签

           var ul1 = document.getElementById("ulid1");
           //获取ul下面的字标签
           //var lis = ul1.childNodes;
           // alert(lis.length);//不同浏览器结果不一样
           var lis = ul1.getElementsByTagName("li");
           alert(lis.length);//3
           </script>

三、Node对象属性一
       *nodeName
       *nodeType //返回以数字值返回指定节点的节点类型
       *nodeValue

       *使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象

       <body>

       <span id="spanid">哈哈哈哈哈</span>
</body>
<script type="text/javascript">
        //获取标签对象
       var span1 = document.getElementById("spanid");
       //alert(span1.nodeType);//1
       //alert(span1.nodeName);//SPAN
       //alert(span1.nodeValue);//null

       //获取属性
       var id1 = span1.getAttributeNode("id");
       //alert(id1.nodeType); //2
       //alert(id1.nodeName); //id
       //alert(id1.nodeValue); //spanid

       //获取文本
       var text1 = span1.firstChild;
       alert(text1.nodeType);//3
       alert(text1.nodeName);//#text
       alert(text1.nodeValue);//哈哈哈哈哈

   </script>

四、Node对象的属性二
       *父节点
           -parentNode
           //得到li1
           var li1 = document.getElementById("li1");
           //得到ul
           var ul1 = li1.parentNode;
           document.write(ul1.id);
       *子节点
           -childNodes:得到所有子节点，但是兼容性很差
           -firstChild:获得第一个子节点
           -lastChild:获取最后一个子节点
           //得到ul
           var ul1 = document.getElementById("ulid");
           //得到第一个子节点
           var li1 = ul1.firstChild;
           document.write(li1.id);//li1
           //得到最后一个子节点
           var li3 = ul1.lastChild;
           document.write(li3.id);//li3

       *同辈节点
           //得到li3的上一个兄弟节点
           var li2 = li3.previousSibling;
           document.write(li2.id);
           //得到li2的下一个兄弟节点

           document.write(li2.nextSibling.id);

五、操作dom树
       **appendChild方法
           -添加子节点到末尾
           -特点：类似于剪切粘贴的效果

       ** insertBefore(newNode,oldNode)方法
           -在某个节点之前插入一个新的节点
           -两个参数
           -插入一个节点，节点不存在，创建
                   1.创建标签
                   2.创建文本
                   3.把文本添加到标签下面
                   4.获取某节点
                   5.获取父节点
                   6.执行插入操作，插入某节点之前
       **removeChild方法：通过父节点删除
       **replaceChild(newNode,oldNode)方法：替换节点
           -通过父节点进行替换
           -两个参数
           -替换一个节点，节点不存在，创建
                   1.创建标签
                   2.创建文本
                   3.把文本添加到标签下面
                   4.获取原节点
                   5.获取父节点
                   6.执行替换操作

        <html>
 <head>
  <style type="text/css">
    
    #div1{
            width:200px;
            height:150px;
            border:2px solid red;
    }

    #div2{
            width:200px;
            height:150px;
            border:4px  dashed green;
    }

  </style>
 </head>

 <body>
    
        <div id="div1">
                <ul  id="ulid11">
                    <li id="li11">tom</li>
                    <li id="li12">mary</li>
                    <li id="li13">jack</li>
                </ul>        
        </div>

            <div id="div2">
        
        </div>
        <input type="button" value="add1" onclick="add11()"/>
        <input type="button" value="insert" onclick="insert1()"/>
        <input type="button" value="remove" onclick="remove1()"/>
 </body>
 <script type="text/javascript">
            function add11(){
                    //得到div2
                    var div2 = document.getElementById("div2");
                    //获取ul
                    var ul11 = document.getElementById("ulid11");
                    //将ul添加到div2中
                    div2.appendChild(ul11);//此时div1中的ul被剪切粘贴到了div2
            }

            //在jack之前添加<li>ccc</li>
            function insert1(){
                        /*
                        1.获取到li13标签
                        2.创建li
                        3.创建文本
                        4.把文本添加到li下面
                        5.获取到ul
                        6.把li添加到ul下面，在jack之前
                        */
                    var li13 = document.getElementById("li13");
                    var li15 = document.createElement("li");
                    var text15 = document.createTextNode("ccc");
                    li15.appendChild(text15);
                    var ul11 = document.getElementById("ulid11");
                    ul11.insertBefore(li15,li13);
            }
            
            //删除<li id="li12">mary</li>
            function remove1(){
                    /*
                        1.获取到li12标签
                        2.获取父节点ul标签
                        3.执行删除
                    */
                    var li12 = document.getElementById("li12");
                    var ulid11 = document.getElementById("ulid11");
                    ulid11.removeChild(li12);
            }
    </script>  
</html>

           ***cloneNode复制节点
           //把ul列表复制到另一个div里面
           /*
               1.获取到ul
               2.执行复制方法，cloneNode（true）方法复制 true
               var ulcopy = ul11.cloneNode(true)
               3.把复制之后的内容放到div里面去
                       **获取到div
                       var div12 = document.getElementById("div12");
                       **appendChild方法
                       div12.appenfChild(ulcopy);

           */

           ***操作dom总结
                   -获取节点使用方法（3种）
                   -插入节点的方法（2种）
                   -删除节点方法
                   -替换节点方法

六、innerHTML属性
           *这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

           第一个作用：获取文本内容
           <span id="sid">哈哈哈哈哈哈</span>
           //获取span标签
           var span1 = document.getElementById("sid");
           document.write("<hr/>");
           document.write(span1.innerHTML);//哈哈哈哈哈哈
           第二个作用：向标签里面设置内容(可以是html代码)
           //向div里面设置内容<h1>AAAAA</h1>
           //获取到div
           var div11 = document.getElementById("div11");
           //设置内容
           div11.innerHTML = "<h1>AAAAA</h1>";

           ***练习：向div里面添加一个表格
           var tab="<table border='1'><tr><td>aaaaa</td><td>nnn</td></tr><tr><td>bbbb</td><td>ccc</td></tr></table>";
           //var tab = "<table>";
           //tab += "</table>";
           //相当于var tab ="<table></table>";
           div11.innerHTML=tab;

JavaScript基础学习（五）

猜你喜欢