Community Learn Tools Library Leisure
search
English
Home > List of blog posts > DOM增删改/留言板/dataset
Blogger Information
Blog 16
fans 0
comment 0
visits 5727
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
DOM增删改/留言板/dataset
Sinan学习博客
Original
298 people have browsed it

一、增删改（写操作）

  1. <body>
  2.   <!-- 
  3.         DOM增删改常用接口
  4.         1. `createElement()`: 创建新元素
  5.         2. `createDocumentFragment()`: 创建文档片断
  6.         3. `append()`: 追加新元素、内容
  7.         4. `before()`: 在前面追加
  8.         5. `after()`: 在后面追加
  9.         6. `cloneNode()`: 克隆节点
  10.         7. `replaceChild()`: 替换元素
  11.         8. `remove()`: 移除元素
  12.      -->
  13.   <script>
  14.     // 1.创建
  15.     //创建新元素（ul标签）,先创建才能添加
  16.     //静态变量ul存储createElement()接口创建的ul便签（元素）
  17.     const ul = document.createElement("ul");
  19.     // 2.添加元素
  20.     //append()接口总是将元素添加到指定父元素的底部
  21.     //这里是将ul标签添加到body底部
  22.     document.body.append(ul);
  24.     // 3.添加子元素、内容
  25.     //使用for循环往ul便签中添加5个li便签，并添加内容
  26.     //append()前面的属性，表示要将元素、内容添加到哪个父级元素中
  27.     for (let i = 0; i <= 5; i++) {
  28.       const li = document.createElement("li");
  29.       ul.append(li);
  30.       li.append("item");
  31.     }
  33.     //------------------------优化---------------------
  34.     // 4.文档片段
  35.     //使用文档片段 fragment() 优化创建过程，提高渲染效率
  36.     const frag = document.createDocumentFragment();
  37.     for (let i = 0; i <= 5; i++) {
  38.       const li = document.createElement("li");
  39.       li.append("demo");
  40.       //不直接添加到ul中，而是先存放到文档片段里
  41.       frag.append(li);
  42.     }
  43.     //然后一次性添加
  44.     ul.append(frag);
  45.   </script>
  46. </body>

代码效果如下：

后插：after() 、前插：before()

  1. //以某个元素为参照物，添加新的兄弟元素到前面、后面
  2. // 4.后面 after()
  3. //先找到参照元素
  4. const li3 = ul.querySelector(":nth-child(3)");
  5. const h2 = document.createElement("h2");
  6. li3.after(h2);
  7. h2.append("第二标题");
  8. // 5.前面 before()
  9. const p = document.createElement("p");
  10. li3.before(p);
  11. p.append("段落");

代码效果如下：

克隆：cloneNode()

  1. // 6.克隆：cloneNode()
  2. // 参数true表示深度克隆，包括子元素、内容，参数为空则不克隆子元素、内容
  3. // const newUl = ul.cloneNode();
  4. const newUl = ul.cloneNode(true);
  5. document.body.append(newUl);

代码效果如下：

7.替换/更新：replaceChild(新,旧)

  1. // 7.替换/更新：replaceChild(新,旧)
  2. //把ul里的h2替换为h3
  3. const h3 = document.createElement("h3");
  4. h3.append("第三标题替换了第二标题");
  5. ul.replaceChild(h3, h2);

代码效果如下：

8.删除：remove()，removeChild()

  1. // 8.删除：remove()，removeChild()
  2. // remove()被删元素自己调用删除自己
  3. // h3自己调用删除自己
  4. h3.remove();
  5. // removeChild()父级调用删除指定子元素
  6. ul.removeChild(p);

代码效果如下：

二、内容操作

innerHTML与outerHTML区别：

  • innerHTML:
    读取/替换被选取元素内部的html元素、内容，不包含被选取元素本身。
  • outerHTML:
    读取/替换所有被选取元素内部的html元素、内容, 还包含被选取元素本身。

innerHTML

  1. <div class="test"><span>aaaaaaaaaaaaa</span>bbb</div>
  2. <script>
  3.    console.log(document.querySelector(".test").innerHTML);//读取
  4.    document.querySelector(".test").innerHTML = "<h2>ccc</h2>";//替换
  5. </script>

outerHTML

  1. <div class="test"><span>aaaaaaaaaaaaa</span>bbb</div>
  2. <script>
  3.    console.log(document.querySelector(".test").outerHTML);//读取
  4.    document.querySelector(".test").outerHTML = "<h2>ccc</h2>";//替换
  5. </script>

textContent

  1.     <div class="test">
  2.       <style>
  3.         h2 {
  4.           color: red;
  5.         }
  6.       </style>
  7.       <h2>2222222222</h2>
  8.       <span style="display: none">(这段内容被隐藏了)</span>bbb
  9.     </div>
  10. //返回被选元素所包含的所有HTML元素，js，css，文本内容
  11. console.log(document.querySelector(".test").textContent);


innerText

  1.     <div class="test">
  2.       <style>
  3.         h2 {
  4.           color: red;
  5.         }
  6.       </style>
  7.       <h2>2222222222</h2>
  8.       <span style="display: none">(这段内容被隐藏了)</span>bbb
  9.     </div>
  10.     <script>
  11.       // innerText: 只返回渲染后可见的内容
  12.       console.log(document.querySelector(".test").innerText);
  13.     </script>


三、指定位置添加元素

  1.     <div>
  2.       <h2>第二标题</h2>
  3.     </div>
  4.     <script>
  5.       // 便签位置：
  6.       // beforebegin: 开始标签之前
  7.       // afterbegin:  开始标签之后
  8.       // beforeend:   结束标签之前
  9.       // afterend:    结束标签之后
  11.       // API方法
  12.       // insertAdjacentElement("位置", 元素) 指定位置插入元素
  13.       // insertAdjacentText("位置", "文本") 指定位置插入文本
  14.       // insertAdjacentHTML("位置", "html元素以字符串方式") 指定位置插入html元素串
  16.       // 第一步：获取位置元素
  17.       const div = document.querySelector("div");
  18.       // 第二步：创建被插入的元素，并用insertAdjacentText()插入文本
  19.       const h1 = document.createElement("h1");
  20.       h1.insertAdjacentText("beforeend", "第一标签"); // 往h1标签里插入文本
  21.       const p = document.createElement("p");
  22.       p.insertAdjacentText("afterbegin", "这是一段段落这是一段段落这是一段段落这是一段段落"); // 往p标签里插入文本
  23.       // 第三步：将元素插入指定位置
  24.       div.insertAdjacentElement("afterbegin", h1);
  25.       div.insertAdjacentElement("beforeend", p);
  26.       // 第四步：div结束标签前插入ul类表
  27.       div.insertAdjacentHTML("beforeend", "<ul><li>item1</li><li>item2</li></ul>");
  28.     </script>


四、仿写留言板案例

  1.     <!-- 留言输入框 -->
  2.     <input type="text" onkeydown="addComment(this)" placeholder="请留言" autofocus />
  3.     <!-- 插入留言的容器 -->
  4.     <ul class="list"></ul>
  5.     <script>
  6.       const ul = document.querySelector(".list");
  7.       function addComment(ele) {
  8.         // ele: 输入框
  9.         // ele.value: 输入框的值
  10.         // event: 事件
  11.         // event.key: 键盘事件key属性，表示数入的内容。
  12.         if (event.key === "Enter") {
  13.           // if非空判断
  14.           if (ele.value.length === 0) {
  15.             alert("请输入点什么！");
  16.             ele.focus();
  17.             return false;
  18.           } else {
  19.             // const li = document.createElement("li");
  20.             // li.innerHTML = ele.value + ` <button onClick="del(this.parentNode)">删除</button>`;
  21.             // ul.insertAdjacentElement("afterbegin", li);
  23.             ele.value += " <button onclick='del(this.parentNode)'>删除</button> ";
  24.             ul.insertAdjacentHTML("afterbegin", `<li>${ele.value}</li>`);
  25.             ele.value = null;
  26.             // ele.focus();
  27.           }
  28.         }
  29.       }
  30.       //删除
  31.       function del(ele) {
  32.         // console.log(ele);
  33.         // ele.remove();
  35.         // if (confirm("是否确定删除？")) {
  36.         //   ele.remove();
  37.         // } else {
  38.         //   return false;
  39.         // }
  41.         //if语法糖
  42.         return confirm("是否确定删除本条留言？") ? ele.remove() : false;
  43.       }
  44.     </script>

五、dataset对象

  1. <!--
  2.  自定义属性名：
  3.  - 如果使用大驼峰，小驼峰命名法，dataset访问时属性名要用全小写。
  4.  - 如果属性名单词之间用 - 号链接，dataset访问时属性名要转为小驼峰法。
  5. -->
  6. <span data-userName="张三" data-My-Email="zs@qq.com"></span>
  7. <script>
  8.       const span = document.querySelector("span");
  9.       console.log(span.dataset.username);
  10.       console.log(span.dataset.myEmail);
  11. </script>

六、getComputedStyle()计算样式

  1.     <style>
  2.       .box {
  3.         background-color: black;
  4.         color: white;
  5.         width: 200px;
  6.         height: 100px;
  7.         padding: 50px;
  8.       }
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <div class="box">
  13.       <p>getComputedStyle()</p>
  14.     </div>
  15.     <script>
  16.       const box = document.querySelector(".box");
  17.       let styles = window.getComputedStyle(box).color;
  18.       console.log(`字体颜色: ${styles}`);
  19.       styles = window.getComputedStyle(box).backgroundColor;
  20.       console.log(`背景色: ${styles}`);
  21.       styles = window.getComputedStyle(box).width;
  22.       console.log(`宽度: ${styles}`);
  23.       styles = window.getComputedStyle(box).height;
  24.       console.log(`高度: ${styles}`);
  25.       styles = window.getComputedStyle(box).padding;
  26.       console.log(`内边距: ${styles}`);
  27.     </script>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：很好，很详细，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post