DOM节点

最新推荐文章于 2022-08-09 19:17:46 发布

端脑

最新推荐文章于 2022-08-09 19:17:46 发布

阅读量194

点赞数

分类专栏：前端文章标签： DOM节点

本文链接：https://blog.csdn.net/qq_43776742/article/details/103518752

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

DOM节点

DOM对象属性

innerHTML     节点（元素）的文本值
parentNode    节点（元素）的父节点
childNodes    节点（元素）的子节点（包含所有子节点的集合，包括元素节点、文本节点）（firstChild：第一个子节点，lastChild：最后一个子节点）
attributes    节点（元素）的属性节点
nodeName      节点（元素）的名称，只读。（元素节点的 nodeName 与标签名相同，属性节点的 nodeName         与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document）
nodeValue     节点（元素）的值（元素节点的 nodeValue 是 undefined 或 null，文本节点的 nodeValue    是文本本身，属性节点的 nodeValue 是属性值）
nodeType      节点（元素）的类型，只读。（元素：1，  属性：2，  文本：3，  注释：8，  文档：9）

DOM 对象方法

getElementById() 	 	 返回带有指定ID的元素。
getElementsByTagName()   返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 	         把新的子节点添加到指定节点。
removeChild() 	         删除子节点。
replaceChild() 	         替换子节点。
insertBefore() 	         在指定的子节点前面插入新的子节点。
createAttribute() 	 	 创建属性节点。
createElement() 	 	 创建元素节点。
createTextNode() 	 	 创建文本节点。
getAttribute() 	         返回指定的属性值。
setAttribute()         	 把指定属性设置或修改为指定的值。

参考文档

元素创建与删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <p>我是一个自然段</p>
    <script>
        // 1 创建元素
        var oDiv = document.createElement('div');
        // 2 添加元素
        //document.body.appendChild(oDiv); // 在元素末尾添加
        // 在任意位置插入元素 第一个参数 需要添加的元素  第二个参数表示参照物
        document.body.insertBefore(oDiv,document.body.children[0]);
        // 3 设置div
        oDiv.innerHTML = '我是动态生成的';

        // 找到p元素
        var oP = document.querySelector('p');
        //oP.remove(); 自杀
        document.body.removeChild(oP); // 父亲中删除儿子
    </script>
</body>
</html>

微博发布


```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            margin: 50px auto;
        }
        ul {
            list-style: none;
            margin: 50px auto;
        }

        li {
            width: 200px;
            border-bottom: 1px dashed #ccc;
            padding: 6px;
        }

        li a {
            float: right;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" name="" id="txt">
        <button>发布</button>
        <ul>
    
        </ul>
    </div>
   
    <script>
        // 获取相关元素(按钮、文本框、列表)
        var txt = document.querySelector('#txt');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        // 给按钮绑定事件
        btn.onclick = function() {
            // 1 获取用户输入的值
            var v = txt.value;
            // 2 创建li
            var oLi = document.createElement('li');
            oLi.innerHTML = v + "<a href='javascript:;'>删除</a>";
            // 3 添加到ul的最前面
            ul.insertBefore(oLi,ul.children[0]);
            // 获取删除元素
            var alink = oLi.querySelector('a');
            alink.onclick = function() {
                this.parentNode.remove();
            }
        }
    </script>
</body>
</html>

### 节点复制

```html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		<p>我是一段落</p>
	</div>
</body>
</html>
<script type="text/javascript">
	    var oDiv = document.querySelector("div");
	    //var divClone = oDiv.cloneNode();// 浅复制  只复制父亲 子元素不复制
	    var divClone = oDiv.cloneNode(true);
	    document.body.appendChild(divClone);// 
</script>

节点克隆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <table border="1" id="tb">
        <tr>
            <td><input type="checkbox"></td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>张三</td>
            <td>男</td>
            <td>34</td>
        </tr>
    </table>
    姓名:<input type="text" id="userName" />
    性别: <input type="radio" name="sex" id="d" />男
    <input type="radio" name="sex" />女
    年龄: <input type="text" name="" id="age" />
    <input type="button" id="saveBtn" value="保存" />
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }

        $("saveBtn").onclick = function () {
            // 复制第一行
            var tr = $("tb").children[0].children[0].cloneNode(true);       
            //（table下有一个tbody标签）第一个children[0]是tbody，第二个是tr			
            //参数不写或者是false，默认是浅层克隆


            // 添加到表格
            $("tb").children[0].appendChild(tr);
            // 修改当前复制行的内容
            tr.children[1].innerHTML = $("userName").value;
            var sex = $("d").checked ? "男" : "女";
            tr.children[2].innerHTML = sex;
            tr.children[3].innerHTML = $("age").value;
        }
    </script>
</body>

</html>

创建元素总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>123</p>
    <div>456</div>
    <button>添加</button>
    <div class="link-box"></div>
    <script>
        // document.write() 假如页面文档流加载完毕后执行会导致页面重绘
        // document.write('<h1>一级标题</h1>');

        document.querySelector('button').onclick = function() {
            document.write('<h1>一级标题</h1>');
        }


        // // innerHTML创建元素
        var linkBox = document.querySelector('.link-box');
        var d1 = new Date();
        var str ="";

        //方法一
        // for(var i =0;i<1000;i++){
        //     str += '<span>' + (i+1) + '</span>';
        // }
        // linkBox.innerHTML = str;

        //第二种方法 (【不推荐】速度很慢)
        // for(var i=0; i<1000; i++) {
        //     linkBox.innerHTML += '<span>'+(i+1)+'</span>';
        // }


        // 方法三 creatElement
        for(var i= 0;i<1000;i++){
            var oSpan = document.createElement('span');
            oSpan.innerText = i+1;
            linkBox.appendChild(oSpan);
        }

        var d2 = new Date();
        console.log(d2-d1);
    </script>
</body>
</html>

节点碎片

我们要明白当js操作dom时发生了什么？

每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少"重排"
什么是文档碎片？

document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素
文档碎片有什么用？

将需要添加的大量元素先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大减少dom操作，提高性能（IE和火狐比较明显）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="part"></div>
    <script>
        //文档碎片:类似一个临时的文档，要所有要加的dom元素先放在这里，达到不要每次操作dom元素提高页面效率
        var part = document.getElementById("part");


        //创建一万个段落,常规的方式
        // var d1 = new Date();
        // for (var i = 0; i < 10000; i++) {
        //     var p = document.createElement("p");
        //     oTxt = document.createTextNode("段落" + i);
        //     p.appendChild(oTxt);    
        //     part.appendChild(p);
        // }
        // var d2 = new Date();
        // console.log("第一次创建需要的时间:" + (d2.getTime() - d1.getTime())); 
        
 
        
        //使用了createDocumentFragment()的程序 
        var d3 = new Date();
        var pFragment = document.createDocumentFragment();
        for (var i = 0; i < 10000; i++) {
            var p = document.createElement("p");
            var oTxt = document.createTextNode("段落" + i);
            p.appendChild(oTxt);
            pFragment.appendChild(p);
        }
        part.appendChild(pFragment);
        var d4 = new Date();
        console.log("第2次创建需要的时间:" + (d4.getTime() - d3.getTime()));
    </script>
</body>

</html>