JavaScript操作DOM对象详解

什么是DOM对象

DOM（Document Object Model，文档对象模型）是一种针对HTML和XML文档的编程接口，它将文档作为一个由节点和对象组成的结构，开发者可以使用DOM提供的API来操作这些节点和对象，从而将页面进行动态的更新。

DOM对象即是由浏览器解析HTML代码后生成的一组节点和对象的集合，这些节点和对象包含了HTML文档中的所有信息，而通过JavaScript，我们可以操作这些节点和对象，动态地更新页面内容。

如何获取DOM对象

在JavaScript中，要获取DOM对象有多种方法，常用的方法如下：

通过ID获取DOM对象

通过document.getElementById()方法可以获取指定ID的DOM对象，示例代码如下：

// 获取id为myDiv的DOM对象
let myDiv = document.getElementById("myDiv");

// 修改该DOM对象的内容
myDiv.innerHTML = "Hello World!";

通过TAG名称获取DOM对象

通过document.getElementsByTagName()方法可以获取指定tag名称的DOM对象集合，示例代码如下：

// 获取所有的p标签DOM对象
let pElems = document.getElementsByTagName("p");

// 遍历p标签DOM对象集合，修改每个p标签的内容
for(let i = 0; i < pElems.length; i++){
  pElems[i].innerHTML = "Hello World!";
}

通过CLASS名称获取DOM对象

通过document.getElementsByClassName()方法可以获取指定class名称的DOM对象集合，示例代码如下：

// 获取class为myClass的DOM对象集合
let myClassElems = document.getElementsByClassName("myClass");

// 遍历class为myClass的DOM对象集合，修改每个DOM对象的内容
for(let i = 0; i < myClassElems.length; i++){
  myClassElems[i].innerHTML = "Hello World!";
}

DOM对象的常用操作

获取DOM对象之后，我们可以对其进行一系列的操作，常用的操作如下：

修改元素内容

使用innerHTML属性可以获取或设置DOM对象的HTML内容，示例代码如下：

// 获取id为myDiv的DOM对象
let myDiv = document.getElementById("myDiv");

// 修改该DOM对象的内容
myDiv.innerHTML = "Hello World!";

修改元素样式

使用style属性可以获取或设置DOM对象的CSS样式，示例代码如下：

// 获取id为myDiv的DOM对象
let myDiv = document.getElementById("myDiv");

// 修改该DOM对象的样式
myDiv.style.backgroundColor = "red";

创建新的DOM节点

使用document.createElement()方法可以创建一个新的DOM节点，示例代码如下：

// 创建一个新的p标签DOM对象
let newPElem = document.createElement("p");

// 设置该p标签DOM对象的HTML内容
newPElem.innerHTML = "Hello World!";

// 将该p标签DOM对象添加到页面的body元素中
document.body.appendChild(newPElem);