DOM操作、仿留言板小案例、dataset对象

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、DOM操作1.1、新增
  1.         // 1. 创建：
  2.         const ul = document.createElement('ul')
  4.         // 2. 添加
  5.         document.body.append(ul)
  7.         // 为ul添加一些元素
  8.         for ( let i = 1; i <= 5; i++ ) {
  9.             const li = document.createElement('li')
  10.             li.append('item-' + i)
  11.             ul.append(li)
  12.         }
  14.         // 3. 文档片段
  15.         // 使用文档片段来优化创建过程，提升渲染效率
  16.         const frag = document.createDocumentFragment()
  17.         for ( let i = 1; i <= 5; i++ ) {
  18.             const li = document.createElement('li')
  19.             li.append('demo-' + i)
  20.             frag.append(li)
  21.         }
  22.         // 最后再统一添加到页面中的ul里去
  23.         ul.append(frag)

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

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

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

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

1.4、替换/更新：replaceChild
  1.    const last = ul.lastElementChild
  2.        let h2 = document.createElement('h2')
  3.        h2.append('被替换的元素')
  4.        ul.replaceChild(h2, last)

  1. ul.replaceChildren(h2, last)

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

1.5、删除
  1.        // 删除当前元素
  2.        // ul.removeChild(ul.querySelector(':last-child'))
  3.        ul.querySelector(':last-child').remove()
  4.        //两种方式都可以
二、DOM指定位置插入
  1.     <h2>Hello world</h2>
  2.     <div class="box">
  3.         <style>
  4.             h2 {
  5.                 color: red;
  6.             }
  7.         </style>
  8.         <h2>通知</h2>
  9.         <span style="display: none">试用期员工不参加</span>
  10.         <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
  11.     </div>
2.1、textContent：获取全部内容
  1.         console.log(document.querySelector('h2').textContent)
  2.         console.log(document.querySelector('.box').textContent)

2.2、innerText：返回已渲染（可见）内容
  1.         console.log(document.querySelector('h2').innerText)

2.3、innerHTML:替换/读取元素“内容”
  1.         console.log(document.querySelector('.box').innerHTML)
  2.         console.log(document.querySelector('.box').innerHTML = '<h1>hello php</h1>')

2.4、outerHTML：替换/删除元素自身内容
  1.         //console.log(document.querySelector('.box').outerHTML = null)
  2.         document.querySelector('.box').remove()

三、仿留言板小案例
  1.     <input type="text" onkeydown="addCommet(this)" placeholder="请留言" autofocus />
  2.     <!--
  3.         oninput：按一次触发记录一次
  4.         onkeydown：键盘按下才记录
  5.     -->
  6.     <ul class="list"></ul>
  1.         function addCommet(ele) {
  2.             if (event.key === 'Enter') {
  3.                 // 1. 非空判断
  4.                 if (ele.value.length === 0) {
  5.                     alert('没输出？')
  6.                     // 重置焦点
  7.                     ele.focus()
  8.                     return false
  9.                 } else {
  10.                 // 2. 添加留言
  11.                     const ul = document.querySelector('.list')
  12.                     const li = document.createElement('li')
  13.                 // 3. 动态添加删除功能
  14.                     ele.value += '<button onclick="del(this.parentNode)">删除</botton>'
  15.                     ul.insertAdjacentHTML('afterbegin', `<li>${ele.value}</li>`)
  16.                 // 4. 清空留言
  17.                     ele.value = null
  18.                 }
  19.             }
  20.         }
  21.         // 删除函数
  22.         function del(ele) {
  23.             // 三元判断
  24.             return confirm('Are you sure you want to delete?') ? ele.remove() : false
  25.         }

  1.         /**
  2.          * 流程：
  3.          * 1、判断 event.key === ele.value，是回车键就提交
  4.          * 2、判断提交值是否为空，用长度来判断，空就提醒，不为空就执行
  5.          * 3、添加留言至新li
  6.          * 4、动态添加删除功能
  7.          * 5、留言添加至列表第一个，ul标签后，afterbegin
  8.          * 6、添加成功后，清空留言框内容
  9.          */
四、dataset对象
  1.     <h3 style="color:red">hello php.cn</h3>
  2.     <div data-username="金莲" data-my-email="jl@php.cn">用户信息</div>
  1.         // 预定义属性
  2.         console.log(document.querySelector('h3').style.color)
  4.         // 自定义属性
  5.         console.log(document.querySelector('div')['data-username']) //undefined
  6.         console.log(document.querySelector('div').dataset['username'])
  7.         console.log(document.querySelector('div').dataset.username)
  8.         console.log(document.querySelector('div').dataset['myEmail'])
  9.         console.log(document.querySelector('div').dataset.myEmail)
  10.         console.log(document.querySelector('div').getAttribute('data-my-email'))

  1.         // dataset对象：读取自定义属性
  2.         // 自定义属性：`data-`前缀
  3.         // 预定义属性/预置属性：`id, class, style, src, type, ...`
疑问：cneNode(true) ，但是怎么识别克隆哪个元素呢？" class="reference-link">疑问：cneNode(true) ，但是怎么识别克隆哪个元素呢？【本文由：阿里云代理 http://www.56aliyun.com 复制请保留原URL】
更多阅读