DOM節點操做

時間  2019-11-12
標籤 dom 節點 欄目 HTML 简体版
原文   原文鏈接

DOM節點操做

1.建立增長節點javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //createElement() 元素節點的建立，
            var div1=document.createElement("div");//createTextNode() 建立一個文本節點
            var text1=document.createTextNode("我是新建的div");//建立一個內容是：我是新建的div 的文本節點
            
            //父節點.appendChild() 增長節點(把節點放到容器裏，添加到該容器末尾處)
            div1.appendChild(text1);//把建立的文本節點放到div裏
            document.body.appendChild(div1);//新建的div元素放到body裏面，參數是要放的內容
        </script>
    </body>
</html>

 

2.插入刪除節點html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ddd</li>
        </ul>
        <script type="text/javascript">
            //建立一個li標籤
            var li1=document.createElement("li");//建立一個新的節點
            var text1=document.createTextNode("ccc");//建立一個文本節點，內容爲ccc
            li1.appendChild(text1);//把文本節點放到li裏面
            
            //父節點.ul.insertBefore(新節點，座標)  插入節點 插到座標前面
            var ul=document.getElementsByTagName('ul')[0];//獲取ul
            ul.insertBefore(li1,ul.lastElementChild);//把新建立的li插入到<li>ddd</li>以前
        
            //父節點.removeChild(變量名)  刪除節點
//            document.body.removeChild(ul)//括號裏放入以獲取的變量名
            
            var list=document.getElementsByTagName("li");
            for (i=1;i<list.length;i++) {
                ul.removeChild(list[i]);
                i--;
            }
            </script>
    </body>
</html>

 

3.替換節點java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="div1">
            <img src="12923.jpg"/>
        </div>
        <script type="text/javascript">
            var img1=document.getElementsByTagName("img")[0];
//            img.src="13064.jpg";
          
            //父節點.replaceChild(新節點，須要替換的節點) 替換節點
            var div1=document.getElementsByTagName("div")[0];
            var newimg=document.createElement('img');
            newimg.src='13064.jpg';
            div1.replaceChild(newimg,img1)
        </script>
    </body>
</html>

 

4.克隆節點app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table>
            <tr>
                <th><input type="checkbox" name="" id="" value="" /></th>
                <th>姓名</th>
                <th>性別</th>
                <th>刪除</th>
            </tr>
        </table>
        <input type="button" name="but" id="but" value="複製表格" />
        <script type="text/javascript">
            //原節點.cloneNode(true/false) 克隆節點  true深度克隆  false淺度克隆
            var inputbut=document.getElementById('but');
            inputbut.onclick=function  () {
                var table=document.getElementsByTagName('table')[0];
                var newtable=table.cloneNode(true);
                document.body.insertBefore(newtable,document.getElementById("but"));
            }
            
        </script>
        
    </body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程