一、DOM操作

1.1、新增

        // 1. 创建：
        const ul = document.createElement('ul')
        // 2. 添加
        document.body.append(ul)
        // 为ul添加一些元素
        for ( let i = 1; i <= 5; i++ ) {
            const li = document.createElement('li')
            li.append('item-' + i)
            ul.append(li)
        }
        // 3. 文档片段
        // 使用文档片段来优化创建过程，提升渲染效率
        const frag = document.createDocumentFragment()
        for ( let i = 1; i <= 5; i++ ) {
            const li = document.createElement('li')
            li.append('demo-' + i)
            frag.append(li)
        }
        // 最后再统一添加到页面中的ul里去
        ul.append(frag)

使用片段文档来创建过程，可以提升渲染效率

1.2、after / before 插入

        // 4. 后面插入：after
        // (1).先找到插入点：
        const three = ul.querySelector(':nth-child(3)')
        // (2).创建元素
        let li = document.createElement('li')
        li.append('后面插入<li>')
        // (3).插入到指定位置
        three.after(li)
        // 5.前面插入：before
        // (1).创建新元素
        li = document.createElement('li')
        li.append('前面插入Li')
        // (2).插入到指定位置
        three.before(li)

1.3、克隆：cneNode(true)

 // true：深度克隆，克隆到内部所有后代元素
       let newLi = li.cloneNode(true)
       console.log(newLi)
       ul.append(newLi)

疑问：深度克隆能理解，但是怎么识别克隆哪个元素呢？

1.4、替换/更新：replaceChild

   const last = ul.lastElementChild
       let h2 = document.createElement('h2')
       h2.append('被替换的元素')
       ul.replaceChild(h2, last)

ul.replaceChildren(h2, last)

如果换成replaceChildren，会替换整个ul

1.5、删除

       // 删除当前元素
       // ul.removeChild(ul.querySelector(':last-child'))
       ul.querySelector(':last-child').remove()
       //两种方式都可以

二、DOM指定位置插入

    <h2>Hello world</h2>
    <div class="box">
        <style>
            h2 {
                color: red;
            }
        </style>
        <h2>通知</h2>
        <span style="display: none">试用期员工不参加</span>
        <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
    </div>

2.1、textContent：获取全部内容

        console.log(document.querySelector('h2').textContent)
        console.log(document.querySelector('.box').textContent)

2.2、innerText：返回已渲染（可见）内容

        console.log(document.querySelector('h2').innerText)

2.3、innerHTML:替换/读取元素“内容”

        console.log(document.querySelector('.box').innerHTML)
        console.log(document.querySelector('.box').innerHTML = '<h1>hello php</h1>')

2.4、outerHTML：替换/删除元素自身内容

        //console.log(document.querySelector('.box').outerHTML = null)
        document.querySelector('.box').remove()

三、仿留言板小案例

    <input type="text" onkeydown="addCommet(this)" placeholder="请留言" autofocus />
    <!--
        oninput：按一次触发记录一次
        onkeydown：键盘按下才记录
    -->
    <ul class="list"></ul>

        function addCommet(ele) {
            if (event.key === 'Enter') {
                // 1. 非空判断
                if (ele.value.length === 0) {
                    alert('没输出？')
                    // 重置焦点
                    ele.focus()
                    return false
                } else {
                // 2. 添加留言
                    const ul = document.querySelector('.list')
                    const li = document.createElement('li')
                // 3. 动态添加删除功能
                    ele.value += '<button onclick="del(this.parentNode)">删除</botton>'
                    ul.insertAdjacentHTML('afterbegin', `<li>${ele.value}</li>`)
                // 4. 清空留言
                    ele.value = null
                }
            }
        }
        // 删除函数
        function del(ele) {
            // 三元判断
            return confirm('Are you sure you want to delete?') ? ele.remove() : false
        }

        /**
         * 流程：
         * 1、判断 event.key === ele.value，是回车键就提交
         * 2、判断提交值是否为空，用长度来判断，空就提醒，不为空就执行
         * 3、添加留言至新li
         * 4、动态添加删除功能
         * 5、留言添加至列表第一个，ul标签后，afterbegin
         * 6、添加成功后，清空留言框内容
         */

四、dataset对象

    <h3 style="color:red">hello php.cn</h3>
    <div data-username="金莲" data-my-email="jl@php.cn">用户信息</div>

        // 预定义属性
        console.log(document.querySelector('h3').style.color)
        // 自定义属性
        console.log(document.querySelector('div')['data-username']) //undefined
        console.log(document.querySelector('div').dataset['username'])
        console.log(document.querySelector('div').dataset.username)
        console.log(document.querySelector('div').dataset['myEmail'])
        console.log(document.querySelector('div').dataset.myEmail)
        console.log(document.querySelector('div').getAttribute('data-my-email'))

        // dataset对象：读取自定义属性
        // 自定义属性：`data-`前缀
        // 预定义属性/预置属性：`id, class, style, src, type, ...`

疑问：cneNode(true) ，但是怎么识别克隆哪个元素呢？

批改老师：PHPz

批改状态：合格

老师批语：