WebApi中的DOM节点增删改查总结

最新推荐文章于 2023-10-15 14:51:55 发布

百无一用。

最新推荐文章于 2023-10-15 14:51:55 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端 html css

本文链接：https://blog.csdn.net/weixin_50680475/article/details/121960333

版权

1.查询子元素，父元素，兄弟元素节点

<body>
    <ul>
        <li>我是小1</li>
        <li class="li2">我是小2</li>
        <li>我是小3</li>
        <li>我是小4</li>
        <li>我是小5</li>
    </ul>

    <script>
        // 1.查询子元素节点 ：  父元素.children
        let ul = document.querySelector('ul')
        console.log(ul.children)   // 5个li元素

        /* 2.查询兄弟元素节点 : 
          上一个兄弟元素 ：  元素.previousElementSibling
          下一个兄弟元素 ：  元素.nextElementSibling
        */
        let li2 = document.querySelector('.li2')
        console.log(li2.previousElementSibling)  //  "我是小1"
        console.log(li2.nextElementSibling)     //  "我是小3"

        // 3.查询父元素节点 ：  元素.parentNode
        console.log(li2.parentNode)        //   "ul"
        // 在元素后加两个parentNode可以查询父元素的父元素 依次类推
        console.log(li2.parentNode.parentNode)  // "body"
    </script>

</body>

运行结果：

2.更改元素节点样式

<body>
    <ul>
        <li>我是小1</li>
        <li class="li2">我是小2</li>
        <li>我是小3</li>
        <li>我是小4</li>
        <li>我是小5</li>
    </ul>

    <script>
        /* 1.查询兄弟元素节点 : 
          上一个兄弟元素 ：  元素.previousElementSibling
          下一个兄弟元素 ：  元素.nextElementSibling
        */
        let li2 = document.querySelector('.li2')
        // 更改元素样式
        li2.style.color = 'blue' 
        // 更改上一个兄弟元素样式
        li2.previousElementSibling.style.fontSize = '20px'
        // 更改下一个兄弟元素样式
        li2.nextElementSibling.style.backgroundColor = 'pink'
        //  更改父元素样式
        li2.parentNode.style.margin = '100px'
    </script>
</body>

运行结果:

3.新增节点

dom中有三种语法可以实现新增节点

  <body>
    <ul>
      <li>我是1</li>
      <li id="li2">我是2</li>
      <li>我是3</li>
      <li>我是4</li>
      <li>我是5</li>
    </ul>
    
    <script>
      /* 节点操作
      1.新增节点: document.createElement()
        (1)内存 创建空标签 : let li =  document.createElement('标签名')
        (2)设置内容   :  li.innerText = '文本'
        (3)添加到dom树 :  父元素.appendChild( 子元素 )

      额外复习： dom中有三种语法可以实现新增节点
        1. document.write('')  
        2. 元素.innerHTML
        3. docum0ent.createElement()
      */
      let ul = document.querySelector('ul')

      //1. document.write('')  ： 几乎不用
      // document.write('<h1>我是标题标签</h1>')

      //2. 元素.innerHTML ：可以使用（不适合大量新增）
      //直接 = 赋0值会覆盖原来的内容
      // document.body.innerHTML = '<a href="#">我是链接</a><h2>我是标题</h2>'

      //如果不想覆盖可以使用 连接符
      // document.body.innerHTML += '<a href="#">我是链接</a><h2>我是标题</h2>'

      //3.dom推荐 ： document.createElement()
      //(1)内存中 创建空元素
      let newLi =  document.createElement('li')
      //(2)设置元素内容
      newLi.innerText = '我是新来的6'
      //(3)添加到dom树
      ul.appendChild(newLi)

    </script>
  </body>

运行结果：

4.删除节点：

<body>
    <button class="btn">点我删除节点</button>
    <ul>
        <li>我是1</li>
        <li id="li2">我是2</li>
        <li>我是3</li>
        <li>我是4</li>
        <li>我是5</li>
    </ul>

    <script>
        /*
        删除节点:  父元素.removeChild( 子元素 )
            * 注意点： 元素只能移除自己的子元素
        */

        document.querySelector('.btn').onclick = function () {
            //获取父元素
            let ul = document.querySelector('ul')
            //子元素
            let li2 = document.querySelector('#li2')
            //删除节点:  父元素.removeChild( 子元素 )
            ul.removeChild(li2)
        }
    </script>
</body>

运行结果：

最后还有一个克隆节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 100px;
            border: 1px solid pink;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <button class="btn1">点我克隆节点true</button>
    <button class="btn2">点我克隆节点false</button>
    <div class="box">
        <a href="我是链接"></a>
        <p>我是p标签</p>
        <ul>
            <li>我是ikun1</li>
            <li>我是ikun2</li>
        </ul>
    </div>
    <script>
        /* 节点操作
        1.新增节点: document.createElement()
            (1)内存 创建空标签 : let li =  document.createElement('标签名')
            (2)设置内容   :  li.innerText = '文本'
            (3)添加到dom树 :  父元素.appendChild( 子元素 )
        2.克隆节点:
            克隆元素自己      ： 元素.cloneNode(false)
            克隆元素自己+后代  ：元素.cloneNode(true)
        3.删除节点:
        */

        document.querySelector('.btn1').onclick = function(){
            //1.克隆box ： 克隆box自己 + 所有后代元素
            let cBox = document.querySelector('.box').cloneNode(true)
            console.log(cBox )  
            //2.将克隆之后的元素添加到页面
            document.body.appendChild(cBox)  
        }

        document.querySelector('.btn2').onclick = function(){
            //1.克隆box : 只克隆box自己
            let cBox = document.querySelector('.box').cloneNode(false)
            console.log(cBox )  
            //2.将克隆之后的元素添加到页面
            document.body.appendChild(cBox)     
        }
    </script>
   
</body>
</html>

运行结果：

只克隆自己：元素.cloneNode(false)
克隆自己和子元素：元素.cloneNode(true)

百无一用。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebApi中的DOM节点增删改查总结

1.查询子元素，父元素，兄弟元素节点<body> <ul> <li>我是小1</li> <li class="li2">我是小2</li> <li>我是小3</li> <li>我是小4</li> <li>我是小5</li> </ul> <
复制链接

扫一扫