HTML | DOM 删除对象

在HTML文档中，DOM（文档对象模型）允许你通过JavaScript访问文档的元素、属性、方法等，可以对它们进行添加、删除、修改等操作。

在本文中，我们将重点介绍HTML | DOM中如何删除对象（元素）。

通过ID删除对象

要删除一个具有ID属性的HTML元素，可以使用getElementById()方法来获取该元素，然后使用其父元素的removeChild()方法将其从DOM中移除。代码如下：

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

通过父元素删除对象

如果要删除一个元素，而不知道其ID，可以通过访问其父元素，然后使用removeChild()方法来删除该元素。代码如下：

var parent = document.getElementById("parent-element-id");
var child = document.getElementById("child-element-id");
parent.removeChild(child);

通过类名删除对象

要删除一个拥有特定类名的HTML元素，可以使用getElementsByClassName()方法来获取所有具有该类的元素，并从它们的父元素中删除它们。代码如下：

var elements = document.getElementsByClassName("class-name");

while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
}

通过标签名删除对象

要删除所有特定类型的HTML元素，可以使用getElementsByTagName()方法来获取所有该类型的元素，并逐一从它们的父元素中删除它们。代码如下：

var elements = document.getElementsByTagName("tag-name");

while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
}

结论

以上是HTML | DOM中删除对象的四种方法。要注意的是，DOM操作会影响文档的结构和布局，请谨慎使用。另外，在删除对象前，请确保它已经存在于DOM中，否则将会抛出异常。