返回
DOM复习 - 了解DOM操作的基础知识，掌握常用方法
前端
2023-12-06 02:31:57
DOM基础概念
什么是DOM？
DOM（文档对象模型）是HTML文档的编程接口。它允许您使用JavaScript来操作HTML文档，包括获取元素、创建元素、添加元素、删除元素、修改元素的内容等。
DOM的结构
DOM是一个树形结构，其中每个元素都是一个节点。根节点是<html>元素，其他元素都是其子节点。子节点可以是元素节点、文本节点、注释节点等。
<html>
<head>
</head>
<body>
<h1>DOM介绍</h1>
<p>DOM是文档对象模型，它允许您使用JavaScript来操作HTML文档。</p>
</body>
</html>
DOM操作方法
DOM提供了许多操作方法，可以让我们对HTML文档进行各种操作。这些方法包括：
querySelector()：获取一个元素。querySelectorAll()：获取一组元素。getElementById()：通过ID获取一个元素。getElementByClassName()：通过类名获取一组元素。getElementByTagName()：通过标签名获取一组元素。createElement()：创建一个元素。appendChild()：将一个元素添加到另一个元素中。removeChild()：从一个元素中删除另一个元素。innerHTML：获取或设置元素的HTML内容。outerHTML：获取或设置元素的HTML代码。
DOM操作示例
获取元素
以下代码演示如何使用querySelector()方法获取一个元素：
const h1 = document.querySelector('h1');
console.log(h1); // <h1>DOM介绍</h1>
创建元素
以下代码演示如何使用createElement()方法创建一个元素：
const p = document.createElement('p');
p.innerHTML = '这是新创建的段落。';
console.log(p); // <p>这是新创建的段落。</p>
添加元素
以下代码演示如何使用appendChild()方法将一个元素添加到另一个元素中：
const body = document.querySelector('body');
body.appendChild(p);
console.log(body); // <body><h1>DOM介绍</h1><p>这是新创建的段落。</p></body>
删除元素
以下代码演示如何使用removeChild()方法从一个元素中删除另一个元素：
body.removeChild(p);
console.log(body); // <body><h1>DOM介绍</h1></body>
修改元素的内容
以下代码演示如何使用innerHTML属性修改元素的内容：
h1.innerHTML = '这是新标题。';
console.log(h1); // <h1>这是新标题。</h1>
总结
DOM是前端开发的基础，掌握DOM操作方法可以帮助您更好地理解和操作HTML文档。本文介绍了DOM的基本概念、DOM的结构以及一些常用的DOM操作方法。希望对您有所帮助。
