2.24-节点操作

桃扇骨 2023-07-10 15:59 3阅读 0赞

### 节点操作 ###

#### 1 创建元素 ####

var oDiv = document.createElement('div');

#### 2 添加元素到body末尾 ####

var oDiv = document.createElement('div');
    //元素插入到末尾
    document.body.appendChild(oDiv);

#### 3 任意位置插入元素 ####

var oDiv = document.createElement('div');
    //insertBefore() 在任意位置插入元素 第一个参数是需要插入的元素 第二个参数 是参照元素
    document.body.insertBefore(oDiv,document.body.children[0]);

#### 4 删除元素 ####

//创建一个元素
    var oDiv = document.createElement('div');
    document.body.appendChild(oDiv);
    //获取元素
    var btn = document.getElementById('btn');
    //点击元素删除
    btn.onclick = function() { 
        // 删除元素 父亲中删除指定儿子
        //document.body.removeChild(oDiv);
        //删除自己
        oDiv.remove();
    }

#### 5 元素克隆 ####

<div id="box">
            <img src="./star.gif" alt="">
        </div>
    
        <script> var box = document.querySelector('#box'); //var boxClone = box.cloneNode(); // 浅层复制，子元素未复制 var boxClone = box.cloneNode(true); // 深层复制 //将元素剪切到 body末尾 document.body.appendChild(boxClone); </script>

#### 6 文本节点 ####

文本节点多用innerHTML 插入元素

#### 7 文档碎片 ####

文档碎片 一块缓存 用于大量创建DOM元素

//创建文档碎片 
        var cache = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) { 
            var btn = document.createElement('input');
            btn.type = 'button';
            btn.value = '按钮';
            cache.appendChild(btn);
        }
    	//全部缓存完成，一次性打印
        document.body.appendChild(cache);