Community Learn Tools Library Leisure
search
English
Home > List of blog posts > dom 元素的增删改、操作内容、自定义属性操作对象、js操作css
Blogger Information
Blog 19
fans 0
comment 0
visits 8261
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 元素的增删改、操作内容、自定义属性操作对象、js操作css
Wu.Ang
Original
591 people have browsed it

js dom 元素的增删改、操作内容、自定义属性操作对象、js操作css

dom 元素的增删改

读 : 遍历 dom

写 : 增、删、改

创建元素 createElement()

const span = document.createElement('span');

追加元素 append()

  1. // 创建新元素
  2. const span = document.createElement("span");
  3. // 追加到页面
  4. document.body.append(span);
  5. // 给span追加内容
  6. span.append("hello");

遍历追加元素

  1. // 创建新元素
  2. const ul = document.createElement("ul");
  3. // 追加到页面
  4. document.body.append(ul);
  6. for (let i = 0; i < 5; i++) {
  7.   let li = document.createElement("li");
  8.   li.append("item" + (i + 1));
  9.   ul.append(li);
  10.   li.style = "list-style:none;";
  11. }

再某个节点前后加入内容

1.当前节点之前 before();

2.在当前节点之后 after();

  1. // 获取第三个li
  2. const li3 = ul.querySelector("li:nth-of-type(3)");
  4. // 在节点前添加内容
  5. const append_li = document.createElement("li");
  6. append_li.append("新内容");
  7. li3.before(append_li);
  8. // 在节点后追加内容
  9. const after_li = document.createElement("li");
  10. after_li.append("追加一个内容");
  11. li3.after(after_li);

克隆 cloneNode(true)

如果克隆内容()内必须加上 true

  1. const append_li = document.createElement("li");
  2. append_li.append("新内容");
  3. const new_li = append_li.cloneNode(true);

insertAdjacentElement(‘插入位置’,元素)

  1. // insertAdjacentElement('插入位置', 元素)
  2. // 插入位置有四个
  3. // afterBegin: 开始标签之后,第一个子元素
  4. // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  5. // afterEnd: 结束标签之后,它的下一个兄弟元素
  6. // beforeEnd: 结束标签之前,它的最后一个子元素
  7. const h2 = document.createElement("h2");
  8. h2.append("列表");
  9. const h3 = h2.cloneNode(true);
  10. // 列表前插入标题
  11. ul.insertAdjacentElement("beforebegin", h2);
  12. // 列表内容开始插入标签
  13. ul.insertAdjacentHTML("afterbegin", "<li>第一个标签</li>");
  15. // 列表内容结束插入标签
  16. ul.insertAdjacentHTML("beforeend", "<li>最后一个标签</li>");
  17. // 列表后插入标题
  18. ul.insertAdjacentElement("afterend", h3);

元素替换 replaceChild(新节点,被替换的旧节点)

  1. 需要找到插入点
  2. 在父元素调用
  1. // 被替换的旧节点
  2. const targetNode = ul.querySelector("li:last-of-type");
  3. // 新节点
  4. const link = document.createElement("a");
  5. link.href = "http://www.baidu.com";
  6. link.append("百度一下");
  7. // 节点替换
  8. ul.replaceChild(link, targetNode);

移除元素 remove()

  1. ul.lastElementChild.remove();
  2. ul.firstElementChild.remove();
  3. ul.querySelector("li:nth-of-type(2)").remove();

js 操作内容 (textContent、innerText、innerHTML、outerHTML)

首选 : textContent、innerHTML

  1. textContent : 返回所有内容,包括 style
  1. // textContent : 返回所有内容,包括style
  2. console.log(box.textContent);
  4. /*
  5. h2 {
  6.     color: red;
  7.   }
  8. 信息
  9. 隐藏信息
  10. xxxxxxxxxxxxxx
  11. */
  1. innerText : 只输出正常文本
  1. // innerText : 只输出正常文本
  2. console.log(box.innerText);
  3. /*
  4. 信息
  6. xxxxxxxxxxxxxx
  7. */
  1. innerHTML : 带有标签的 html 内容
  1. // innerHTML : 带有标签的html内容
  2. console.log(box.innerHTML);
  4. /*
  5. <style>
  6.   h2 {
  7.     color: red;
  8.   }
  9. </style>
  10. <h2>信息</h2>
  11. <span style="display: none">隐藏信息</span>
  12. <p>xxxxxxxxxxxxxx</p>
  13. */

innerHTML 和 innerText 区别 : innerHTML 可以解析 html 标签

  1. const p = document.createElement("p");
  2. const link = '<a href="http://www.php.cn">php中文网</a>';
  3. p.innerText = link; //追加后a标签不能正常显示
  4. p.innerHTML = link; //a标签可以正常显示
  5. box.append(p);
  1. outerHTML : 当前 html 元素的表示
  1. // outerHTML : 当前html元素的表示
  2. console.log(box.outerHTML);
  4. /*
  5. <div class="box">
  6.   <style>
  7.     h2 {
  8.       color: red;
  9.     }
  10.   </style>
  11.   <h2>信息</h2>
  12.   <span style="display: none">隐藏信息</span>
  13.   <p>xxxxxxxxxxxxxx</p>
  14.   <p><a href="http://www.php.cn">php中文网</a></p>
  15. </div>
  16. */
  18. ele.outerHTML = null; //删除元素
  19. ele.outerHTML = "<a>xxx</a>"; //替换内容

自定义属性操作对象 dataset

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10.   <div class="btn-group">
  11.     <button data-index="1" onclick="alert(this.dataset.index)">btn1</button>
  12.     <button data-index="2" onclick="alert(this.dataset.index)">btn2</button>
  13.     <button data-index="3" onclick="alert(this.dataset.index)">btn3</button>
  15.     <!-- 自定义属性 : data-xxx -->
  16.     <!-- 获取时 : dataset.xxx -->
  18.     <div data-my-email="0000000000@qq.com">我的邮箱</div>
  19.   </div>
  20.   <script>
  21.     const email = document.querySelector('body div div');
  22.     // data-my-email -> dataset.myEmail
  23.     // 需要把my-email替换成myEmail
  24.     console.log(email.dataset.myEmail);
  25.   </script>
  26. </body>
  27. </html>

js操作css : getComputedStyle()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box{
  10.       width: 100px;
  11.       height: 100px;
  12.       border: 1px solid;
  13.     }
  14.   </style>
  15. </head>
  16. <body>
  17.   <div class="box" style="color: red;">hello</div>
  18.   <script>
  19.     // 获取元素行内样式 : style属性
  20.     const box = document.querySelector('.box');
  21.     console.log(box.style.color);
  23.     // 获取元素内部样式
  24.     const wgs = window.getComputedStyle(box);
  25.     console.log(wgs.width);
  26.     console.log(wgs.height);
  28.     // 宽度转换
  29.     let width = window.getComputedStyle(box).width;
  30.     // 数据类型转换
  31.     width = parseInt(width);
  32.     console.log(width);
  33.     console.log(typeof(width));
  34.     // 要通过行内样式进行替换
  35.     box.style.width = (width +100) + 'px';
  36.   </script>
  37. </body>
  38. </html>

实例演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>留言板</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       li {
  15.         list-style: none;
  16.         /* 允许内容换行 */
  17.         word-wrap: break-word;
  18.       }
  19.       .title_div,
  20.       .message_div,
  21.       .btn_div {
  22.         width: 350px;
  23.         margin-left: 20px;
  24.       }
  25.       .btn_div button {
  26.         width: 200px;
  27.         height: 30px;
  28.         margin: auto;
  29.       }
  30.       .tishi {
  31.         color: red;
  32.         font-size: 10px;
  33.         display: none;
  34.       }
  35.       input {
  36.         width: 200px;
  37.         height: 30px;
  38.         border-radius: 10px;
  39.         padding-left: 10px;
  40.       }
  41.       ul.list {
  42.         width: 300px;
  43.         margin-top: 20px;
  44.       }
  46.       /* ------------------------------------------- */
  47.       .box {
  48.         width: 300px;
  49.         border: 1px solid;
  50.         border-radius: 10px;
  51.         margin: 3px;
  52.         padding: 5px;
  53.         position: relative;
  54.       }
  55.       .box:hover {
  56.         background-color: lightgoldenrodyellow;
  57.       }
  58.       .title_h3 {
  59.         text-align: center;
  60.       }
  61.       .button_xg {
  62.         position: absolute;
  63.         top: 10px;
  64.         right: 45px;
  65.       }
  66.       .button_sc {
  67.         position: absolute;
  68.         top: 10px;
  69.         right: 10px;
  70.       }
  71.     </style>
  72.   </head>
  74.   <body>
  75.     <div class="title_div">
  76.       <label for="message" style="font-size: 20px">标题:</label>
  77.       <input type="text" id="title" class="title" autofocus />
  78.       <span class="tishi">标题不能为空</span>
  79.     </div>
  80.     <div class="message_div">
  81.       <label for="message" style="font-size: 20px">留言:</label>
  82.       <input type="text" id="message" class="message" autofocus />
  83.     </div>
  84.     <div class="btn_div">
  85.       <button onclick="Btn()">提交</button>
  86.     </div>
  88.     <ul class="list"></ul>
  89.     <script>
  90.       function Btn() {
  91.         // 获取内容
  92.         const title = document.querySelector(".title");
  93.         const message = document.querySelector(".message");
  94.         const span = document.querySelector(".tishi");
  95.         const ul = document.querySelector(".list");
  96.         // -----------------------------------------------------------------
  98.         // 判断标题是否为空
  99.         if (title.value == 0) {
  100.           span.style.display = "inline";
  101.           return false;
  102.         } else {
  103.           span.style.display = "none";
  104.         }
  105.         // -----------------------------------------------------------------
  107.         // 新建div,h3,li,button
  108.         const div = document.createElement("div");
  109.         const h3 = document.createElement("h3");
  110.         const li = document.createElement("li");
  111.         const button_sc = document.createElement("button");
  112.         const button_xg = button_sc.cloneNode(true);
  113.         // 添加属性
  114.         div.classList.add("box");
  115.         h3.classList.add("title_h3");
  116.         button_xg.classList.add("button_xg");
  117.         button_sc.classList.add("button_sc");
  118.         // li.classList.add("message_li");
  120.         // 追加内容
  121.         h3.append(title.value);
  122.         li.append(message.value);
  123.         button_xg.append("修改");
  124.         button_sc.append("删除");
  126.         div.append(h3);
  127.         div.append(li);
  128.         div.append(button_xg);
  129.         div.append(button_sc);
  131.         // ul中追加div
  132.         ul.insertAdjacentElement("afterbegin", div);
  134.         // 修改
  135.         button_xg.onclick = function () {
  136.           // prompt() 弹出input框
  137.           const new_message = prompt(li.innerText);
  138.           li.innerHTML = new_message;
  139.         };
  141.         // 点击删除
  142.         button_sc.onclick = function () {
  143.           confirm("是否删除") ? div.remove() : false;
  144.         };
  146.         // -----------------------------------------------------------------
  148.         // 输入框清空
  149.         title.value = null;
  150.         message.value = null;
  151.       }
  152.     </script>
  153.   </body>
  154. </html>
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