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

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>

代码运行如下：