Python全栈入门到实战【JavaScript篇 10】DOM操作入门，用JavaScript操控网页元素

前言

上一篇《JavaScript篇 09》中，我们攻克了JS的作用域、闭包和this三大难点。至此，你已经完整地学完了JavaScript作为一门编程语言的语法和核心概念。但相信你一直在等待这一刻——之前所有的console.log输出都只在控制台里，我们什么时候才能用JavaScript真正操作网页，实现点击按钮换颜色、点击切换菜单、动态改变页面内容？

现在，这一刻到了。从本篇开始，JavaScript回归它的终极使命：操作网页。在浏览器中，网页被抽象为一棵"节点树"——DOM（Document Object Model，文档对象模型）。JavaScript通过DOM API可以访问和修改这棵树上的任意节点——增删改查元素、修改样式、响应事件——所有的网页交互都是基于DOM操作实现的。

本篇作为DOM操作的第一篇，将从DOM的基本概念讲起，然后学习最核心的操作：获取元素、修改内容、修改样式、修改属性。每学一个API，都有可直接运行的实战示例。学完这一篇，你就能写出"点击按钮改变页面样式"这样真正有交互的代码了。

本节核心学习内容：

1. DOM是什么：把HTML变成JavaScript可以操控的"对象树"
2. 获取元素：querySelector/querySelectorAll与getElementById系列
3. 修改内容：innerHTML vs textContent vs innerText
4. 修改样式：style属性与classList操作
5. 修改属性：setAttribute/getAttribute
6. 实战：点击按钮切换主题色、动态切换导航激活状态

一、DOM是什么

1.1 从HTML到DOM树

当浏览器加载一个HTML页面时，它会做两件事：

1. 解析HTML，构建一个节点树（DOM Tree）
2. 把JS中操作这个树的API暴露出来（DOM API）

每个HTML标签、文本、注释都变成了DOM树上的一个节点：

<html>
  <head>
    <title>页面标题

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/zsh_1314520/article/details/165243140