DOM操作获取、创建、添加、删除标签

晚安_good night

于 2024-08-17 10:24:46 发布

阅读量456

点赞数 16

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/yellow_important/article/details/141276652

版权

在JavaScript中，操作HTML元素（标签）是一项基本技能。以下是一些常用的DOM操作方法，包括获取、创建、添加、删除标签的示例：

获取标签

通过ID获取元素

var element = document.getElementById('myId');

通过标签名获取元素集合

var elements = document.getElementsByTagName('p');

通过类名获取元素集合

var elements = document.getElementsByClassName('myClass');

通过CSS选择器获取元素

var element = document.querySelector('.myClass');
var elements = document.querySelectorAll('.myClass');

创建标签

创建一个新的元素

var newElement = document.createElement('div');

添加标签

将新创建的元素添加到文档中

var parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);

将新元素插入到指定元素之前

var referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement);

将新元素插入到指定元素之后

var referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement.nextSibling);

删除标签

删除指定的元素

var elementToRemove = document.getElementById('elementToRemove');
elementToRemove.parentNode.removeChild(elementToRemove);

删除一个父元素的所有子元素

var parentElement = document.getElementById('parent');
while (parentElement.firstChild) {
  parentElement.removeChild(parentElement.firstChild);
}

示例：添加和删除按钮

假设我们有一个按钮，点击后会创建一个新的按钮并添加到页面上，再次点击则会删除这个新创建的按钮。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<button id="addButton">添加按钮</button>
<div id="buttonContainer"></div>

<script>
  var addButton = document.getElementById('addButton');
  var buttonContainer = document.getElementById('buttonContainer');

  addButton.addEventListener('click', function() {
    // 创建新按钮
    var newButton = document.createElement('button');
    newButton.textContent = '新按钮';
    newButton.onclick = function() {
      // 删除按钮
      buttonContainer.removeChild(newButton);
    };
    // 将新按钮添加到容器中
    buttonContainer.appendChild(newButton);
  });
</script>

</body>
</html>