javascript的DOM操作是实现网页动态交互的核心能力，通过操作文档对象模型，我们可以灵活获取、修改页面中的各类元素，从而实现内容的动态更新。DOM将整个HTML文档看作一个树形结构，每个HTML标签、文本节点都是树上的一个节点，javascript可以通过对应的API访问和操作这些节点。
常用的DOM元素获取方法
要实现动态修改网页内容，首先需要获取到目标元素，常用的获取方法有以下几种：
- getElementById：通过元素的id属性获取单个元素，id在页面中通常是唯一的。
- getElementsByClassName：通过元素的class属性获取一组元素，返回的是HTMLCollection集合。
- getElementsByTagName：通过标签名获取一组元素，返回的是HTMLCollection集合。
- querySelector：通过CSS选择器获取第一个匹配的元素。
- querySelectorAll：通过CSS选择器获取所有匹配的元素，返回的是NodeList集合。
下面是获取元素的代码示例：
// 通过id获取元素
const titleElement = document.getElementById('pageTitle');
// 通过class获取元素集合
const listItems = document.getElementsByClassName('list-item');
// 通过标签名获取所有p元素
const allParagraphs = document.getElementsByTagName('p');
// 通过CSS选择器获取第一个类为content的div
const contentDiv = document.querySelector('div.content');
// 通过CSS选择器获取所有a标签
const allLinks = document.querySelectorAll('a');
动态修改元素文本内容
获取到元素之后，最常用的操作就是修改元素的文本内容，主要有两种方式：
使用innerText属性
innerText属性用于获取或设置元素内部的文本内容，它会忽略元素内部的HTML标签，只处理纯文本。
// 获取id为demo的元素
const demoElement = document.getElementById('demo');
// 修改元素的文本内容
demoElement.innerText = '这是修改后的新文本内容';
// 获取元素的当前文本内容
const currentText = demoElement.innerText;
console.log(currentText);
使用textContent属性
textContent属性和innerText类似，也是用于操作元素的文本内容，二者的区别是textContent会获取所有元素的文本，包括script和style标签里的文本，而innerText不会。
const infoElement = document.getElementById('info');
// 设置文本内容
infoElement.textContent = '使用textContent设置的文本内容';
// 获取文本内容
const infoText = infoElement.textContent;
动态修改元素HTML内容
如果需要修改元素内部包含的HTML标签结构，可以使用innerHTML属性，这个属性会解析设置的字符串中的HTML标签，将其渲染为对应的元素。
const container = document.getElementById('container');
// 设置包含HTML标签的内容
container.innerHTML = '<p>这是一段新的段落</p><span>这是span标签</span>';
// 获取元素内部的HTML内容
const htmlContent = container.innerHTML;
需要注意，使用innerHTML时要避免插入不可信的内容，防止XSS攻击。
动态修改元素属性
除了修改内容，还可以动态修改元素的各类属性，比如src、href、class、style等。
修改普通属性
可以通过setAttribute方法设置属性，通过getAttribute方法获取属性，也可以直接通过元素对象的属性名来操作。
const imgElement = document.getElementById('banner');
// 修改图片的src属性
imgElement.src = 'new-banner.jpg';
// 修改图片的alt属性
imgElement.setAttribute('alt', '新的图片描述');
// 获取图片的src属性
const imgSrc = imgElement.getAttribute('src');
修改样式属性
修改元素的样式可以通过style对象来实现，样式属性名需要转换成驼峰命名法，比如background-color要写成backgroundColor。
const boxElement = document.getElementById('box');
// 修改背景颜色
boxElement.style.backgroundColor = '#f0f0f0';
// 修改宽度
boxElement.style.width = '200px';
// 修改字体大小
boxElement.style.fontSize = '16px';
动态添加和删除元素
DOM操作还支持动态创建新元素，以及添加、删除现有元素。
创建并添加新元素
使用createElement方法创建新元素，然后通过appendChild或者insertBefore方法将新元素添加到指定位置。
// 创建一个新的li元素
const newLi = document.createElement('li');
// 设置li的文本内容
newLi.innerText = '新增的列表项';
// 获取ul元素
const ulElement = document.getElementById('list');
// 将新的li添加到ul的最后
ulElement.appendChild(newLi);
// 创建新的p元素
const newP = document.createElement('p');
newP.textContent = '插入到容器开头的段落';
// 获取容器元素
const wrap = document.getElementById('wrap');
// 将新p插入到容器的第一个子元素之前
wrap.insertBefore(newP, wrap.firstChild);
删除元素
删除元素可以使用元素自身的remove方法，也可以通过父元素的removeChild方法删除。
// 获取要删除的元素
const deleteElement = document.getElementById('deleteMe');
// 直接删除元素
deleteElement.remove();
// 或者通过父元素删除
const parentElement = deleteElement.parentNode;
parentElement.removeChild(deleteElement);
综合示例：动态修改网页内容
下面是一个完整的示例，结合了上述多种DOM操作，实现点击按钮动态修改页面内容的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DOM操作示例</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="mainTitle">初始标题</h1>
<p id="content">初始段落内容</p>
<button id="changeBtn">修改内容</button>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
</ul>
<script>
// 获取按钮元素
const btn = document.getElementById('changeBtn');
// 给按钮添加点击事件
btn.addEventListener('click', function() {
// 修改标题文本
document.getElementById('mainTitle').innerText = '修改后的标题';
// 修改段落内容并添加高亮类
const contentP = document.getElementById('content');
contentP.innerHTML = '这是<span class="highlight">动态修改</span>后的段落内容';
// 添加新的列表项
const newLi = document.createElement('li');
newLi.innerText = '新增的列表项3';
document.getElementById('list').appendChild(newLi);
// 修改按钮文本
this.innerText = '内容已修改';
this.disabled = true;
});
</script>
</body>
</html>
通过上述方法，我们可以灵活使用javascript的DOM操作实现各类网页内容的动态修改，满足不同的交互需求。
DOM操作javascript动态修改网页内容getElementById修改时间：2026-07-04 09:42:34