Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS基本语法7：DOM元素的增删改 \指定位置的插入\ 仿写留言板案例\dataset对象
Blogger Information
Blog 27
fans 0
comment 0
visits 19023
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
JS基本语法7：DOM元素的增删改 \指定位置的插入\ 仿写留言板案例\dataset对象
茂林
Original
1110 people have browsed it

1. DOM元素的增删改 2. DOM元素内容的增删改查 3.指定位置的插入 4. 仿写留言板案例 5. dataset对象

1. DOM元素的增删改
  1.  1.createElement:新增元素
  2.  2.append:尾部追加元素
  3.  3.createDocumentFragment:增加片断
  4.  4.after:后面插入元素
  5.  5.before：前同插入元素
  6.  6.cloneNode(true):克隆元素(深度克隆)
  7.  7.replaceChild(new,old):替换子元素
  8.  8.remove:删除元素,自杀, removeChild:被(父元素)删除
  1. <script>
  2.     /**
  3.      * 1.createElement:新增元素
  4.      * 2.append:尾部追加元素
  5.      * 3.createDocumentFragment:增加片断
  6.      * 4.after:后面插入元素
  7.      * 5.before：前同插入元素
  8.      * 6.cloneNode(true):克隆元素(深度克隆)
  9.      * 7.replaceChild(new,old):替换子元素
  10.      * 8.remove:删除元素,自杀, removeChild:被(父元素)删除
  11.      */
  13.     //1.createElement()
  15.     //参数:预定义的html标签字符串
  16.     //新增元素,第1步创建新元素,保存在变量中
  17.     const ul = document.createElement("ul")
  18.     //2.append():追加到页面中
  20.     //参数：添加的对象或内容
  21.     // document.querySelector("body").append(ul)
  22.     document.body.append(ul)
  24.     //添加多个元素
  25.     //let li = document.createElement("li")
  26.     //为新的元素添加文本内容
  27.     // li.append("item")
  28.     //ul.append(li)
  30.     /*  for (let i = 1; i <= 5; i++) {
  31.       let li = document.createElement("li")
  33.       li.append("item" + i)
  34.       ul.append(li)
  35.     } */
  36.     //3.createDocumentFragment()
  38.     //无参数
  39.     //在页面中避免因新加元素频繁,影响页面加载的效率,先将新加的元素存入一个片断中
  40.     //最后一次性添加到页面中
  41.     let frag = document.createDocumentFragment()
  42.     for (let i = 1; i <= 5; i++) {
  43.       let li = document.createElement("li")
  44.       li.append("item" + i)
  45.       frag.append(li)
  46.     }
  48.     ul.append(frag)
  49.     //4.after():后面插入元素
  51.     //在插入的位置上调用after()方法
  52.     //参数：插入的元素及内容
  53.     //先找到插入元素的位置
  54.     let three = ul.querySelector(":nth-child(3)")
  55.     console.log(three)
  56.     //创建要插入的元素
  57.     let li = document.createElement("li")
  58.     li.append("new-item-after")
  59.     //插入
  60.     three.after(li)
  62.     //5.before():前面插入元素
  64.     //在插入的位置上调用before()方法
  65.     //参数：插入的元素及内容
  66.     //先找到插入元素的位置
  67.     three = ul.querySelector(":nth-child(3)")
  68.     li = document.createElement("li")
  69.     li.append("new-item-before")
  70.     three.before(li)
  72.     //6.cloneNode(true):克隆/复制元素
  73.     //先找到需要克隆的元素
  74.     //然后再追加或插入到指定的位置中
  75.     let last = ul.lastElementChild
  77.     let copy = last.cloneNode(true)
  78.     //参数:true,代表深度克隆,会把子元素及其内容一起复制
  79.     //不加参数true,只复制元素,不复制元素中的内容
  80.     ul.append(copy)
  81.     three.before(copy)
  83.     //7.replace(new,old)：替换子元素
  84.     //父元素调此方法替换子元素
  85.     //参数:new元素,old元素
  86.     let four = ul.querySelector(":nth-child(4)")
  87.     console.log(four)
  88.     li = document.createElement("li")
  89.     li.append("replace-li")
  90.     ul.replaceChild(li, four)
  92.     //8.removeChild:父元素删除子元素 remove：自己把自己删除,自杀
  94.     ul.removeChild(ul.querySelector(":nth-child(2)"))
  95.     ul.querySelector(":first-child").remove()
  96.   </script>

1. DOM元素的增删改

2 DOM元素的内容增删改

1.textContent:查看元素内容,是全部内容,包括js,css,隐藏内容
2.innerText:查看已渲染的(可见)内容
3.innerHTML:查看/替换/删除子元素内容(html),原样显示出来了
4.outerHTML:查看/替换/删除元素‘自身’(html)及所有的子元素

  1. <body>
  2.     <h3>HELLO WORLD</h3>
  3.     <div class="box">
  4.       <style>
  5.         h2 {
  6.           color: red;
  7.         }
  8.       </style>
  9.       <h2>通知</h2>
  10.       <span style="display: none">试用期员工不参加</span>
  11.       <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
  12.     </div>
  13.   </body>
  14.   <script>
  15.     /**
  16.      * 1.textContent:查看元素内容,是全部内容,包括js,css,隐藏内容
  17.      * 2.innerText:查看已渲染的(可见)内容
  18.      * 3.innerHTML:查看/替换元素内容(html),原样显示出来了
  19.      * 4.outerHTML:替换元素‘自身’(html)
  20.      */
  21.     console.log(document.querySelector("h3").textContent)
  22.     console.log(document.querySelector(".box").textContent)
  23.     console.log(document.querySelector(".box").innerText)
  24.     console.log(document.querySelector(".box").innerHTML)
  25.     document.querySelector(".box").innerHTML = "<h2>查看/替换元素内容</h2>"
  27.     //.outerHTML = null === .remove()
  28.     // document.querySelector(".box").outerHTML = null
  29.     document.querySelector(".box").remove()
  30.   </script>

3 指定位置插入元素

  1.    (1) 插入位置
  2.    1. `beforebegin`:元素自身的前面（起始标签）
  3.    2. `afterbegin`:插入元素内部的第一个子节点之前
  4.    3. `beforeend`:插入元素内部的最后一个子节点之后
  5.    4. `afterend`:元素自身的后面（结束标签）
  7.     (2) API 方法
  8.    1. `insertAdjacentElement()`:指定位置插入元素
  9.    2. `insertAdjacentText()`: 指定位置插入文本节点
  10.    3. `insertAdjacentHTML()`: 指定位置插入元素节点(DOMString)
  1.   <body>
  2.     <ul class="list">
  3.       <li>item1</li>
  4.       <li>item2</li>
  5.       <li>item3</li>
  6.       <li>item4</li>
  7.       <li>item5</li>
  8.     </ul>
  9.     <script>
  10.       //1.insertAdjacentElement():指定位置插入元素
  11.       //有两个参数：1 插入元素的位置 2 插入的元素标签
  12.       //插入元素的位置
  13.       const ul = document.querySelector(".list")
  14.       //插入元素的内容
  15.       const h3 = document.createElement("h3")
  16.       h3.append("商品列表")
  17.       //在ul起始标签的前面插入h3
  18.       // ul.insertAdjacentElement("beforebegin", h3)
  19.       //在元素内容的第一个子节点之前 插入h3
  20.       // ul.insertAdjacentElement("afterbegin", h3)
  21.       //在元素内容的最后一个子节点之后插入h3
  22.       // ul.insertAdjacentElement("beforeend", h3)
  23.       //在元素ul结束标签的后面插入h3
  24.       //ul.insertAdjacentElement("afterend", h3)
  26.       //2.insertAdjacentText()
  27.       //有两个参数：1 插入元素的位置 2 插入的文本内容
  28.       //在ul起始标签的前面插入文本
  29.       // ul.insertAdjacentText("beforebegin", "(特价商品)")
  30.       //在ul元素内容的第一个子节点之前 插入文本内容
  31.       //ul.insertAdjacentText("afterbegin", "(特价商品)")
  32.       //在ul元素内容的最后一个子节点后面 插入文本内容
  33.       //ul.insertAdjacentText("beforeend", "(特价商品)")
  34.       //在ul结束标签的后面插入文本
  35.       //ul.insertAdjacentText("afterend", "(特价商品)")
  37.       // 3.insertAdjacentHTML():指定位置插入元素节点(DOMString)
  38.       //在指定的位置插入html元素
  39.       //可以将html字符串,直接解析成html元素
  40.       let p = `<p style="color:red">商品数量：5件</p>`
  41.       ul.insertAdjacentHTML("beforebegin", p)
  42.       ul.insertAdjacentHTML("afterbegin", p)
  43.       /**指定位置插入
  44.        * (1)指定位置
  45.        * 1.beforebegin：元素自身起始标签的前面
  46.        * 2.afterbegin：插入元素内部的第一个子节点之前
  47.        * 3.beforeend：插入元素内部的最后一个子节点之后
  48.        * 4.afterend：元素自身结束标签的后面
  49.        * (2)插入API方法
  50.        * 1.insertAdjacentElement():指定位置插入元素
  51.        * 2.insertAdjacentText():指定位置插入文本节点
  52.        * 3.insertAdjacentHTML():指定位置插入元素节点(DOMString)
  53.        */
  54.     </script>
  55.   </body>

4.读取自定义属性的方法

  1. 预定义属性: id,class,style, title...
  2. 自定义属性: data-前缀
  3. 注: data-不要写,蛇形->驼峰
  1.   <body>
  2.     <!-- 
  3.         1.预定义属性：id,style,class,name...
  4.         2.自定义属性：data- 前缀的属性
  6.         有两个方法获取 
  7.         1.通过dataset
  8.         2.通过getAttribute()
  9.      -->
  10.     <h3 style="color: red">Hello world</h3>
  11.     <div data-email="abc@qq.com" data-my-name="朱老师">我的邮件地址</div>
  12.     <script>
  13.       const h3 = document.querySelector("h3")
  14.       console.log(h3.style.color)
  15.       const div = document.querySelector("div")
  16.       //无法使用以下方法获取自定义属性
  17.       // console.log(div.data - email)
  18.       //1.通过dataset对象方法获取
  19.       //省去前缀data- ,dataset.email
  20.       //my-name:转为小驼峰,myName dataset.myName
  21.       console.log(div.dataset.email)
  22.       console.log(div.dataset.myName)
  23.       //2.使用getAttribute('data-email')  getAttribute('data-my-name')
  24.       console.log(div.getAttribute("data-email"))
  25.       console.log(div.getAttribute("data-my-name"))
  26.     </script>
  27.   </body>

5.getComptedStyle()

  • 计算样式: 元素上的全样样式,包括行内,文档,外部等

  • 只读

    1. <head>
    2.   <meta charset="UTF-8" />
    3.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    4.   <title>getComputedStyle</title>
    5.   <link rel="stylesheet" href="style.css" />
    6.   <style>
    7.     h3 {
    8.       width: 200px;
    9.       height: 50px;
    10.     }
    11.   </style>
    12. </head>
    13. <body>
    14.   <h3 style="color: red">Hello World</h3>
    15.   <script>
    16.     const h3 = document.querySelector("h3")
    17.     console.log(h3.style.color)
    18.     //querySelector 无法获取对除行内样式以外的样式信息
    19.     console.log(h3.style.width)
    21.     console.log(window.getComputedStyle(h3).backgroundColor) //rgb(255, 255, 0)
    22.     console.log(window.getComputedStyle(h3).width) //200px
    23.     let width = window.getComputedStyle(h3).width
    24.     //返回的是字符串
    25.     //通过 parseInt()转成数值型
    27.     width = parseInt(width) + 100 + "px"
    28.     console.log(width)
    29.     //通过行内样式改变width的值
    30.     h3.style.width = parseInt(width) + 100 + "px"
    31.     /**
    32.      * getComputedStyle对象
    33.      * 计算样式：元素上的全部样式,包括行内,文档,外部样式
    34.      * 返回值：只读,
    35.      * 想修改样式在行内样式里修改
    36.      */
    37.   </script>
    38. </body>
Correction status：Uncorrected

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
2 comments
徐涛 2023-08-18 13:42:36
啊撒大声地
1 floor
啊萨弗拉斯寄快递发啦
徐涛 2023-08-18 13:52:48
Author's latest blog post