DOM增删改/留言板/dataset

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、增删改（写操作）
  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>

【文章原创作者：阿里云代理 http://www.558idc.com/aliyun.html 复制请保留原URL】
更多阅读