DOM常见的操作有哪些？-JavaScript面试指南

当前位置:　首页>> 技术小册>> JavaScript面试指南

DOM（Document Object Model）是HTML或XML文档的编程接口，它把整个文档表示为一个树形结构，开发者可以通过DOM提供的API来操作这个树形结构，实现对文档的增删改查等操作。下面是DOM常见的操作以及对应的代码示例：

获取元素
可以通过document对象的各种方法获取文档中的元素，例如getElementById、getElementsByClassName、getElementsByTagName等。示例代码如下：
```
// 获取id为"myDiv"的元素
const myDiv = document.getElementById("myDiv");

// 获取class为"myClass"的所有元素
const myElements = document.getElementsByClassName("myClass");

// 获取所有p元素
const pElements = document.getElementsByTagName("p");
```
创建元素
可以使用createElement方法创建新的元素节点，使用appendChild方法将新元素添加到文档中。示例代码如下：
```
// 创建一个新的div元素，并设置其id属性为"myNewDiv"
const newDiv = document.createElement("div");
newDiv.id = "myNewDiv";

// 将新的div元素添加到body元素中
document.body.appendChild(newDiv);
```
修改元素属性
可以通过元素的属性来修改元素的属性值。示例代码如下：
```
// 获取id为"myDiv"的元素，并将其背景颜色设置为红色
const myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";

// 将id为"myDiv"的元素的文本内容修改为"Hello World"
myDiv.textContent = "Hello World";
```
修改元素内容
可以通过innerHTML属性来修改元素的HTML内容，或者通过textContent属性来修改元素的文本内容。示例代码如下：
```
// 获取id为"myDiv"的元素，并将其HTML内容修改为"<h1>Hello World</h1>"
const myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<h1>Hello World</h1>";

// 将id为"myDiv"的元素的文本内容修改为"Hello World"
myDiv.textContent = "Hello World";
```
删除元素
可以使用removeChild方法从文档中删除元素。示例代码如下：
```
// 获取id为"myDiv"的元素，并从文档中删除它
const myDiv = document.getElementById("myDiv");
myDiv.parentNode.removeChild(myDiv);
```

该分类下的相关小册推荐：

web前端开发性能优化实战

Javascript编程指南

深入学习前端重构知识体系

javascript设计模式原理与实战

WebSocket入门与案例实战

Node.js 开发实战

Javascript重点难点实例精讲（一）

Javascript-ES6与异步编程

npm script实战构建前端工作流

零基础学JavaScript

JavaScript入门与进阶

剑指javascript