DOM 树：把 HTML 看成一家人的族谱#

同一页 PPT 用一段很短的 HTML 展示了”对象”之间的关系：

1
<!-- PPT 上的示例页面 -->
2
<html>
3
  <head>
4
    <title>DOM</title>
5
  </head>
6
  <body>
7
    <h1>DOM对象标题</h1>
8
    <a href="https://itcast.cn">传智教育</a>
9
  </body>
10
</html>

这张图是整篇的”世界观”：

• 每个标签都是树上的一个节点（对象），标签嵌套就是父子关系（<body> 是 <h1> 的父节点，<h1> 是 <body> 的子节点）
• 标签的属性（href）、标签里的文字（“传智教育”）也都各自是一个对象，挂在所属元素下面

一、知识回顾（读完直接做下面的实践题）#

1. DOM 全称 Document Object Model（文档对象模型），浏览器把标记语言的各个组成部分封装为对象交给 JS：Document（整个文档对象）、Element（元素对象）、Attribute（属性对象）、Text（文本对象）、Comment（注释对象）
2. 有了 DOM，JS 就能对 HTML 做四件事：改变元素的内容、改变元素的样式（CSS）、对 DOM 事件作出反应、添加和删除元素
3. DOM 操作核心思想：将网页中所有的元素当做对象来处理——标签的所有属性在这个对象上都能找到（<a href> 的 href 就是 a.href）
4. DOM 操作固定两步：① 获取要操作的 DOM 元素对象 ② 操作 DOM 对象的属性或方法（记不住 API 就查文档或 AI）
5. 获取元素两个主力方法：document.querySelector('选择器') 拿匹配到的第一个元素；document.querySelectorAll('选择器') 拿匹配到的所有元素，返回 NodeList 节点集合（伪数组）——有 length、有索引，但没有 push() 这类真数组方法
6. 括号里写的是 CSS 选择器：#sid 按 id、.txt 按 class、span 按标签名；其他获取方式（了解）是 getElementById('id')、getElementsByTagName('div')、getElementsByClassName('cls')
7. 改内容用 innerHTML（会解析 HTML 标签，写 <b> 就真的加粗）或 innerText（纯文本，<b> 原样显示）；它们既能写也能读，且是整体替换不是追加
8. 改属性直接用点号：img.src、link.href、input.value（输入框用 value，不是 innerHTML）、img.alt、input.disabled = true；类名用 div.className（整串覆盖）或 classList.add / remove / toggle / contains
9. 改样式用 元素.style.样式名 = '值'（写的是行内样式）：CSS 属性名要转小驼峰（background-color → style.backgroundColor、font-size → style.fontSize），值必须是带单位的字符串（'30px' 不能写 30）
10. 表格隔行换色：document.querySelectorAll("tbody tr") 拿所有数据行（表头在 thead 里，不会被选到）→ for 循环 → 判断 i % 2 == 0（索引从 0 开始，所以索引偶数 = 页面上数下来的奇数行）→ style.backgroundColor 分别设 #f2e2e2、#e6f7ff

二、裸写题#

• 2-1 把三个标题”抓”到手 页面上从上到下有三个标题，第一个标题带 id title1。要求：

  1. 用 id 把第一个标题抓出来，打印它的内容
  2. 用标签名把所有标题抓出来，打印一共有几个
  3. 再用标签名抓一次，只拿到第一个，打印它的内容 （练习文件 test_16_获取元素.html 里已经准备好了三个标题，在写作区写 JS 即可。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：一个是”抓一个”的方法，一个是”抓一把”的方法；“抓一把”的结果要自己数个数、自己按下标取第一个 二级 · 方法：document.querySelector('选择器') 抓第一个、document.querySelectorAll('选择器') 抓全部；选择器写 #id、.类名、标签名；个数用 length；打印用 console.log() 三级 · 骨架：let first = document.querySelector('____'); / console.log(first.____); / let all = document.querySelectorAll('____'); / console.log(all.____); / console.log(all[____].innerHTML);

  参考答案（做完再点开）

  1
  //1. 用 id 拿第一个标题
  2
  let h1 = document.querySelector('#title1');
  3
  console.log(h1.innerHTML);      // 11111
  4
  
  5
  //2. 用标签名拿所有标题，打印个数
  6
  let hs = document.querySelectorAll('h1');
  7
  console.log(hs.length);         // 3
  8
  
  9
  //3. 用标签名只拿第一个
  10
  let h1First = document.querySelector('h1');
  11
  console.log(h1First.innerHTML); // 11111

  对照课程 07. JS-DOM.html 的第一段注释（课程里三种写法都写了，只是把后两种注释掉了）。注意：querySelectorAll 的结果是伪数组，要取里面某一个必须写索引 hs[0]。

• 2-2 把标题的文字换掉 页面上有一个标题（id 为 title1）和一个说明段落（id 为 msg）。要求：

  1. 把标题的内容改成”修改后的文本内容”
  2. 把段落的内容改成”我是加粗的文字”，并且让”加粗”两个字真的加粗显示
  3. 再把另一个段落（id 为 msg2）也设成同样的一句话，但这次要求”加粗”两个字连同尖括号一起原样显示出来 做完看一眼两个段落的区别，说出为什么不一样。 （练习文件 test_16_修改内容.html 里已经准备好了标签和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：改内容用的是元素对象上的一个属性；“标签生效还是原样显示”取决于用哪个属性 二级 · 方法：innerHTML 会解析标签、innerText 不解析；写的时候把标签当成字符串拼进去（如 '我是<b>加粗</b>的文字'） 三级 · 骨架：document.querySelector('#title1').____ = '修改后的文本内容'; / document.querySelector('#msg').____ = '我是____加粗____的文字'; / 第二段换成 ____Text

  参考答案（做完再点开）

  1
  //1. 改标题内容
  2
  document.querySelector('#title1').innerHTML = '修改后的文本内容';
  3
  
  4
  //2. 用 innerHTML：标签会被解析，<b> 真的变成加粗
  5
  document.querySelector('#msg').innerHTML = '我是<b>加粗</b>的文字';
  6
  
  7
  //3. 用 innerText：标签不解析，原样显示
  8
  document.querySelector('#msg2').innerText = '我是<b>加粗</b>的文字';

  区别的原因：innerHTML 按 HTML 解析这段字符串，所以 <b> 变成了加粗标签；innerText 把它当纯文本，标签就原样露出来了。这也是”要拼标签用 innerHTML、只塞纯文字用 innerText”的由来。

• 2-3 换掉图片地址，再把一行字改成红字 页面上有一个头像图片（id 为 avatar，现在是一条坏图）和一行文字（id 为 slogan）。要求：

  1. 把图片的地址换成同级 img 目录下的那张图（img/1.png），并给它补上替代文字”员工头像”
  2. 把那一行文字改成红色、字号 30px、并且加粗（加粗用类名 bold，页面上已经有 .bold { font-weight: bold; } 这条样式）
  3. 顺便把页面上的链接（id 为 home）的地址换成 https://www.itcast.cn （练习文件 test_16_改属性和样式.html 里已经准备好了元素、样式和写作区，同目录下有 img/1.png。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：属性用点号直接改（HTML 里叫什么就点什么）；样式用 style，加粗这条走”加类名”的路子 二级 · 方法：img.src、img.alt、a.href；style.color、style.fontSize（值要带引号和单位）；加类名用 classList.add('bold') 三级 · 骨架：document.querySelector('#avatar').____ = 'img/____.png'; / ...____ = '员工头像'; / let s = document.querySelector('#slogan'); / s.style.____ = 'red'; / s.style.____ = '30px'; / s.classList.____('bold'); / document.querySelector('#home').____ = 'https://itcast.cn';

  参考答案（做完再点开）

  1
  //1. 改图片的属性
  2
  let img = document.querySelector('#avatar');
  3
  img.src = 'img/1.png';
  4
  img.alt = '员工头像';
  5
  
  6
  //2. 改文字样式：颜色、字号走 style，加粗走类名
  7
  let slogan = document.querySelector('#slogan');
  8
  slogan.style.color = 'red';
  9
  slogan.style.fontSize = '30px';   // 注意写成 fontSize，值要带 px
  10
  slogan.classList.add('bold');     // 类名里已经有 font-weight: bold
  11
  
  12
  //3. 改超链接地址
  13
  document.querySelector('#home').href = 'https://itcast.cn';

  两个检查点：① 字号必须写 '30px'——写 30 不生效；② 加粗演示的是”样式写进 CSS 类、JS 只换类名”这个更耐维护的写法（用 slogan.style.fontWeight = 'bold' 效果一样，但样式就散在 JS 里了）。

• 2-4 实现表格隔行换色 页面上有一张成绩表（表头 3 列，数据行 5 行）。要求：奇数行背景色 #f2e2e2、偶数行背景色 #e6f7ff；表头不能被染色。 （练习文件 test_16_隔行换色.html 里已经准备好了表格，在写作区写 JS 即可——这就是 PPT 第 25 页的案例。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：先把”要染色的行”一把抓出来（注意别把表头抓进来），再一行一行按顺序判断该染哪个色 二级 · 方法：document.querySelectorAll('tbody tr')；for (let i = 0; i < 集合.length; i++) 循环；i % 2 == 0 判断奇偶；元素.style.backgroundColor 改背景色 三级 · 骨架：let trList = document.querySelectorAll('____ tr'); / for (let i = 0; i < trList.____; i++) { / if (i ____ 2 == 0) { trList[i].style.____ = '#f2e2e2'; } else { …… '#e6f7ff'; } }

  参考答案（做完再点开）

  1
  // 获取所有数据行（tbody 里的 tr，表头在 thead 里不会被选到）
  2
  let trList = document.querySelectorAll('tbody tr');
  3
  
  4
  for (let i = 0; i < trList.length; i++) {
  5
    if (i % 2 == 0) {                                // 索引 0、2、4… → 页面上第 1、3、5 行
  6
      trList[i].style.backgroundColor = '#f2e2e2';   // 奇数行
  7
    } else {
  8
      trList[i].style.backgroundColor = '#e6f7ff';   // 偶数行
  9
    }
  10
  }

  对照课程 06. JS-案例-员工列表.html 结尾的 <script>。检查点：① 表头不变色（说明你没写 querySelectorAll('tr')）；② 第 1 行是浅粉、第 2 行是浅蓝（说明 i % 2 的判断没写反）。