DOM编程教学，JavaScript如何与网页元素交互经验教程
DOM编程教学，JavaScript如何与网页元素交互经验教程
JavaScript的核心能力在于操作网页。那么，JS是如何“看到”并“改变”网页内容的呢？答案就是通过DOM（文档对象模型）。本文将教你如何选择页面上的元素并修改它们。
1. 什么是DOM？
当网页加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- 模型： DOM将整个HTML文档表示成一个由节点和对象组成的树形结构。
- 树结构： 文档是根节点，
<html>是其子节点，<head>和<body>是<html>的子节点，以此类推。
JavaScript可以通过这套模型提供的接口（API）来：
- 动态改变页面内容。
- 改变元素的CSS样式。
- 对用户事件做出反应。
你可以把HTML文档看作是一栋大楼的蓝图，而DOM就是这栋大楼在内存中的真实结构，JavaScript则是可以对这个结构进行装修和改造的工程师。
2. 选择元素
要与元素交互，首先必须选中它。document对象代表整个页面，它提供了多种选择元素的方法。
通过ID选择：getElementById
通过元素的 id属性来选择。因为ID应该是唯一的，所以这个方法返回单个元素。
<h1 id="mainTitle">欢迎光临</h1>let titleElement = document.getElementById("mainTitle");
console.log(titleElement); // 打印出这个h1元素对象通过CSS选择器选择：querySelector和 querySelectorAll（现代、强大！）
-
querySelector(‘selector’)：返回与指定CSS选择器匹配的第一个元素。 -
querySelectorAll(‘selector’)：返回一个包含所有匹配元素的NodeList（类似于数组的集合）。
<ul class="fruits-list">
<li>苹果</li>
<li class="highlight">香蕉</li>
<li>橙子</li>
</ul>// 选择第一个 <li> 元素
let firstLi = document.querySelector("li");
console.log(firstLi.textContent); // 输出："苹果"
// 选择 class 为 "highlight" 的第一个元素
let highlightedItem = document.querySelector(".highlight");
console.log(highlightedItem.textContent); // 输出："香蕉"
// 选择 class 为 "fruits-list" 的元素下的所有 <li>
let allListItems = document.querySelectorAll(".fruits-list li");
console.log(allListItems.length); // 输出：3
// 遍历 querySelectorAll 返回的 NodeList
allListItems.forEach(function(item) {
console.log(item.textContent);
});
// 输出：
// 苹果
// 香蕉
// 橙子建议：在现代开发中，优先使用 querySelector和 querySelectorAll，因为它们非常灵活。
3. 修改元素内容
选中元素后，我们可以修改其内部的HTML或文本。
-
textContent： 获取或设置元素的文本内容（忽略HTML标签）。 -
innerHTML： 获取或设置元素内的HTML代码。使用它可以插入新的HTML元素。
<div id="myDiv">
<p>这是一段<strong>旧</strong>的文本。</p>
</div>let myDiv = document.getElementById("myDiv");
// 使用 textContent
console.log(myDiv.textContent); // 输出：这是一段旧的文本。
myDiv.textContent = "这是一段全新的纯文本！"; // 所有HTML标签都会被当作文本显示
// 使用 innerHTML
myDiv.innerHTML = "<p>这是一段<em>全新</em>的HTML内容！</p>"; // 会解析HTML标签注意： 如果内容来自用户输入，使用 innerHTML可能有安全风险（XSS攻击），此时应优先使用 textContent。
4. 修改元素样式
可以通过元素的 style属性来直接修改其CSS样式。CSS属性名需要转换为驼峰命名法。
let title = document.getElementById("mainTitle");
title.style.color = "blue"; // 对应 CSS 的 color
title.style.backgroundColor = "yellow"; // 对应 CSS 的 background-color
title.style.fontSize = "24px"; // 对应 CSS 的 font-size5. 实战练习
创建一个HTML文件，包含以下代码，并观察效果。
<!DOCTYPE html>
<html>
<head>
<title>DOM 练习</title>
</head>
<body>
<h1 id="greeting">初始标题</h1>
<p class="content">第一段内容。</p>
<p class="content">第二段内容。</p>
<button id="changeBtn">点击改变页面</button>
<script>
// 1. 选择按钮元素
let button = document.getElementById("changeBtn");
// 2. 给按钮添加点击事件（下篇文章详解）
button.onclick = function() {
// 3. 选择标题并修改内容和样式
let title = document.getElementById("greeting");
title.textContent = "你好，DOM！";
title.style.color = "red";
// 4. 选择所有段落并修改内容
let paragraphs = document.querySelectorAll(".content");
paragraphs.forEach(function(p, index) {
p.innerHTML = `这是被JavaScript改变的第 <strong>${index + 1}</strong> 段。`;
});
};
</script>
</body>
</html>用浏览器打开这个文件，点击按钮，看看页面发生了什么变化。
总结
通过DOM，JavaScript获得了与HTML文档交互的能力。到此你学会了如何使用 getElementById、querySelector等方法来选择元素，以及如何使用 textContent、innerHTML和 style属性来修改元素的内容和样式。这是实现动态网页的第一步。