DOM节点的增加删除

最新推荐文章于 2024-07-24 16:49:00 发布

远方@诗

最新推荐文章于 2024-07-24 16:49:00 发布

阅读量1.2k

点赞数 2

文章标签： html css html5

本文链接：https://blog.csdn.net/xaiozhao/article/details/130461755

版权

前言

介绍一下DOM节点的获取以及通过DOM实现节点的增加与删除

一、获取节点

1. 通过元素 id 来获取元素

语法：document.getElementById（'id名'）

<body>
  <div id="app"> 春天来了.... </div>
  <script>
    //根据id 获取div
    let div = document.getElementById('app');
    console.log(div);
  </script>
</body>

2.根据class（类名）获取

语法： document.getElementsByClassName('class名')

<body>
  <div class="one "> 春天来了.... </div>
  <div class="one two"> 夏天来了.... </div>
  <div class="one two"> 秋天来了.... </div>
  <script>
    //根据class获取div
    let div = document.getElementsByClassName('one');
    console.log(div);
  </script>
</body>

注意：返回的是节点集合,就算只有一个符合条件的返回也是集合。

3.通过标签名获取元素

语法：document.getElementsByTagName（'name名'）

<body>
  <div> 春天来了.... </div>
  <div> 夏天也快了.... </div>
  <script>
    //根据标签名 获取div
    let div = document.getElemenstByTagName('div');
    console.log(div);
  </script>
</body>

注意：返回的是节点集合，只有一个符合条件的返回也是节点集合(伪数组)。

4.万能获取法

语法： document.querySelector()

<body>
  <div id="goods"> 春天来了.... </div>
  <div> 夏天也快了.... </div>
  <script>
    let div = document.querySelector('#goods');
    console.log(div);//<div id="goods"> 春天来了.... </div>
  </script>
</body>

注意：不管页面中有几个符合条件的,都返回第一个。

语法：document.querySelectorAll()

<body>
  <div class="one"> 春天来了.... </div>
  <div class="one"> 夏天也快了.... </div>
  <script>
    let div = document.querySelectorAll('.one');
    console.log(div);
  </script>
</body>

注意：不管页面中有几个符合条件的,都返回集合,哪怕只有一个符合条件的也返回结合。

二、创建

1.创建节点对象

语法： document.createElement('')

<script>
   // 创建标签节点对象
   let div = document.createElement('div');
</script>

2.创建文本对象

语法：document.createTextNode('')

<script>
  // 创建文本对象
  let text = document.createTextNode('螃蟹掉进油锅里---闹个大红脸');
</script>

三、追加

1.将新创建的节点对象追加到body中

语法：document.body.appendChild(新创建的节点对象)

<script>
   // 创建标签节点对象
   let div = document.createElement('div');
   //将新创建的节点对象追加到body中
   document.body.appendChild(div)
</script>

2.追加节点对象到父节点的最后

语法：父元素.appendChild(节点对象)

<body>
  <div id="app">
    今儿下午适合睡觉..
    <h5> 三个菩萨堂---妙妙秒 </h5>
  </div>
  <script>
    //获取节点
    let app = document.getElementById('app');
    // 创建文本对象
    let text = document.createTextNode('螃蟹掉进油锅里---闹个大红脸');
    //将新创建的节点对象追加到父节点的最后
    app.appendChild(text)
  </script>
</body>

3.将新节点追加到旧节点的前面

语法：父节点.insertBefore(新节点，旧节点)

<body>
  <div id="app">
    <h5> 三个菩萨堂---妙妙秒 </h5>
  </div>
  <script>
    //获取节点
    let app = document.getElementById('app');
    let h = document.querySelector('h5');
    // 创建文本对象
    let text = document.createTextNode('螃蟹掉进油锅里---闹个大红脸');
    //将新创建的文本对象追加到旧节点的前面
    app.insertBefore(text,h)
  </script>
</body>

四、删除

1.自己删除自己

语法：节点.remove()

<body>
  <div id="app">
    春天来了
    <h5> 三个菩萨堂---妙妙秒 </h5>
  </div>
  <script>
    //获取节点
    let h = document.querySelector('h5');
    // 删除自己
    h.remove();
  </script>
</body>

2.父节点删除子节点

语法：父节点.removeChild(子节点)

<body>
  <div id="app">
    春天来了
    <h5> 三个菩萨堂---妙妙秒 </h5>
  </div>
  <script>
    //获取节点
    let app = document.getElementById('app');
    let h = document.querySelector('h5');
    // 父节点删除子节点
    app.removeChild(h);
  </script>
</body>