dom节点操作

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

小崽子o

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

阅读量58

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_64352881/article/details/123747403

版权

查找子节点

 <body>
    <ul>
      <!-- 我是注释哟 -->
      我是文本哈
      <li>我是1</li>
      <li>我是2</li>
      <li>我是3</li>
      <li>我是4</li>
      <li>我是5</li>
    </ul>

    <script>
      /* 查询节点
      1.查询子元素节点 ：  父元素.children
      */

      let ul = document.querySelector('ul')

      //1. 查询节点 （元素、文本、注释）
      console.log( ul.childNodes )//了解即可，获取元素节点、文本节点、注释
      
      //2. 查询元素子节点 （元素）
      console.log( ul.children )//5个li元素
      
      
    </script>

  </body>

查找兄弟点

 <body>
    <button class="btn">点我操作li2的兄弟节点</button>
    <ul>
      <li>我是1</li>
      <li id="li2">我是2</li>
      <li>我是3</li>
      <li>我是4</li>
      <li>我是5</li>
    </ul>
    <script>
      /* 查询节点
      1.查询子元素节点 ：  父元素.children
      2.查询兄弟元素节点 : 
        上一个兄弟元素 ：  元素.previousElementSibling
        下一个兄弟元素 ：  元素.nextElementSibling
      */

      document.querySelector('.btn').onclick = function(){
        let li2 = document.querySelector('#li2')
        //上一个兄弟元素 ：  元素.previousElementSibling
        li2.previousElementSibling.style.color = 'red'
        //下一个兄弟元素 ：  元素.nextElementSibling
        li2.nextElementSibling.style.color = 'purple'
      }
    </script>
  </body>

查找父节点

 <body>
    <button class="btn">点我操作li2的兄弟节点</button>
    <ul>
      <li>我是1</li>
      <li id="li2">我是2</li>
      <li>我是3</li>
      <li>我是4</li>
      <li>我是5</li>
    </ul>
    <script>
      /* 查询节点
      1.查询子元素节点 ：  父元素.children
      2.查询兄弟元素节点 : 
        上一个兄弟元素 ：  元素.previousElementSibling
        下一个兄弟元素 ：  元素.nextElementSibling
      3.查询父节点 ：  元素.parentNode
      */

      //获取li2
      let li2 = document.querySelector('#li2')
      //获取li2的父节点
      console.log( li2.parentNode )//ul
      //获取li2的爷爷（爸爸的爸爸）
      console.log( li2.parentNode.parentNode )//body
      
      console.log( li2.parentNode.parentNode.parentNode )//html

      console.log( li2.parentNode.parentNode.parentNode.parentNode )//document   dom树

      console.log( li2.parentNode.parentNode.parentNode.parentNode.parentNode )//null
      
      

      
    </script>
  </body>

新增节点

 <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( 子元素 )
      2.克隆节点:
      3.删除节点:

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

      //1. document.write('')  
      // document.write('<h1>程序员</h1>')

      //2. 元素.innerHTML ：可以使用（不适合大量新增）
      //直接 = 赋值会覆盖原来的内容
      // 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 = '我是新来的'
      console.log(newLi)
      //(3)添加到dom树
      ul.appendChild(newLi)


    </script>
  </body>

克隆节点

   <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>

删除节点

<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>
        /* 节点操作
        1.新增节点: document.createElement()
            (1)内存 创建空标签 : let li =  document.createElement('标签名')
            (2)设置内容   :  li.innerText = '文本'
            (3)添加到dom树 :  父元素.appendChild( 子元素 )
        2.克隆节点:
            克隆元素自己      ： 元素.cloneNode(false)
            克隆元素自己+后代  ：元素.cloneNode(true)
        3.删除节点:  父元素.removeChild( 子元素 )
            * 注意点： 元素只能移除自己的子元素
        */

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