JavaScript- 1.3 DOM对页面内容进行操作

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

JavaScript- 1.1 行内、内部、外部三种引用方式

JavaScript- 1.2 ECMA基本语法和控制流

JavaScript- 1.3 DOM对页面内容进行操作

JavaScript- 1.4 BOM对浏览器进行操作

系列文章目录

前言

一、DOM操作

1. 访问DOM元素

2. 修改DOM元素

3. 创建和添加DOM元素

4. 删除DOM元素

5. 事件处理

6.总结

二、代码实践

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、DOM操作

JavaScript的DOM（Document Object Model，文档对象模型）操作允许开发者动态地访问、修改、添加或删除HTML和XML文档的内容、结构及样式。以下是对DOM操作的主要方面的详细说明：

1. 访问DOM元素

在操作DOM之前，首先需要获取到目标元素。JavaScript提供了多种方法来访问DOM元素：

getElementById()：通过元素的ID属性获取元素。

javascript
```
let element = document.getElementById('elementId');
```
getElementsByClassName()：通过类名获取元素集合。

javascript
```
let elements = document.getElementsByClassName('className');
```
getElementsByTagName()：通过标签名获取元素集合。

javascript
```
let elements = document.getElementsByTagName('div');
```

querySelector() 和 querySelectorAll()：使用CSS选择器获取单个或多个元素。

javascript

let element = document.querySelector('#elementId');
let elements = document.querySelectorAll('.className');

2. 修改DOM元素

获取到元素后，可以对其进行多种修改：

修改内容：
- textContent：修改元素的文本内容。
  javascript
```
element.textContent = 'New text content';
```
- innerHTML：修改元素的HTML内容（可以包含HTML标签）。
  javascript
```
element.innerHTML = '<strong>New HTML content</strong>';
```
修改样式：
- 通过style属性直接修改元素的样式。
  javascript
```
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';
```
修改属性：
- 使用getAttribute()和setAttribute()来获取和设置元素的属性。
  javascript
```
let value = element.getAttribute('data-value');
element.setAttribute('data-value', 'newValue');
```

3. 创建和添加DOM元素

可以动态地创建新的元素并将其添加到DOM中：

创建新元素：

javascript

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

添加元素：
- appendChild()：将元素添加到父元素的末尾。
  javascript
```
parentElement.appendChild(newElement);
```
- insertBefore()：在指定元素之前插入新元素。
  javascript
```
parentElement.insertBefore(newElement, referenceElement);
```

4. 删除DOM元素

可以使用removeChild()方法来删除DOM中的元素：

javascript

parentElement.removeChild(childElement);

5. 事件处理

DOM操作还包括对事件的响应，通过事件监听器来实现用户交互：

添加事件监听器：

javascript

element.addEventListener('click', function() {alert('Element clicked!');
});

6.总结

通过JavaScript的DOM操作，开发者可以实现对网页内容的动态控制，这为创建交互式和动态网页应用提供了强大的工具。通过访问、修改、创建、删除元素以及处理事件，开发者可以构建出功能丰富、用户体验良好的网页应用。

二、代码实践

代码如下：

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DOM对页面内容进行操作</title></head><body><p id="p1">这是一段文字</p><button type="button" onclick="document.getElementById('p1').style.fontSize='50px'">点击按钮改变字号</button></body>
</html>

代码运行如下：