学习前端第四十二天（修改文档）

1、创建一个元素

docunment.createElement( tag )；创建一个元素节点

let div = document.createElement（“div”）；创建一个div标签

document.createTextNode（ Text ）；创建一个文本节点

let textNode = document.createTextNode('Here I am');

2、插入方法

对于文本和元素来说使用：

• node.append(...nodes or strings) —— 在 node 末尾 插入节点或字符串，
• node.prepend(...nodes or strings) —— 在 node 开头 插入节点或字符串，
• node.before(...nodes or strings) —— 在 node 前面 插入节点或字符串，
• node.after(...nodes or strings) —— 在 node 后面 插入节点或字符串，

对于HTML代码来说：

• "beforebegin" —— 将 html 插入到 elem 之前，
• "afterbegin" —— 将 html 插入到 elem 开头，
• "beforeend" —— 将 html 插入到 elem 末尾，
• "afterend" —— 将 html 插入到 elem 之后。

3、节点移除

node.remove（）

    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        const lis = document.querySelectorAll("#list li");
        // 移除节点
        setTimeout(() => {
            lis[1].remove()    // 将lis的第二个元素移除
        }, 2000);
    </script>

4、克隆节点

    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        const list = document.getElementById("list");
        // 克隆节点
        console.log(list.cloneNode())      // 浅复制，复制表面
        console.log(list.cloneNode(true))  // 深复制
    </script>

 

5、DocumentFragment

创建一个容器，用来装节点，当我们将其插入某个位置时，则会插入装进去的节点

调用：const df = new DocumentFragment();

然后可以往 df 中放节点 ：df.append(......)

再把df放到其他标签元素内：？？？.append（df）

这样，DocumentFragment 先把节点放到容器中，再添加到页面上，页面只要渲染一次，提升性能

    <ul id="list">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <script>
        const list = document.getElementById("list");
        //  DocumentFragment 先把节点放到容器中，再添加到页面上，页面只要渲染一次，提升性能
        //  使用数组也可以达到同样的效果
        const fragment = new DocumentFragment();

        for (let i = 0; i <= 10; i++) {
            const li = document.createElement("li");
            li.innerText = i;
            fragment.append(li)
        }
        list.append(fragment); // 一次渲染页面

        // 数组
        const fragment1 = [];
        for (let i = 0; i <= 10; i++) {
            const li = document.createElement("li");
            li.innerText = i;
            fragment1.push(li)
        }
        list.append(...fragment1); // 一次渲染页面

    </script>