简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >JS基本语法7：DOM元素的增删改 \指定位置的插入\ 仿写留言板案例\dataset对象

JS基本语法7：DOM元素的增删改 \指定位置的插入\ 仿写留言板案例\dataset对象

茂林
茂林原创
2024年01月07日 16:32:571101浏览

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>
上一条：Mac OS Ventura M1上执行`make`时，如果出现`call to undeclared function 'sys_icache_invalidate'`错误下一条：Dcoker运行mysql5.7镜像
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
徐涛2023-08-18 13:42:361楼
啊撒大声地
  • 啊萨弗拉斯寄快递发啦
    徐涛2023-08-18 13:52:48

相关文章

查看更多