文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本篇文章围绕《现代 JavaScript 教程zh.javascript.info》遍历 DOM 章节中的一道经典练习题展开编写代码把表格中所有对角单元格td的背景色绘制为红色。文章以该题的官方解答为核心结合同章节 article.md 中的表格专用导航属性知识从任务还原、完整可运行代码、属性全景解析到边界情况扩展带读者彻底掌握table.rows、row.cells等 DOM 表格导航属性的实际用法。读完本文你将能够脱离getElementById之类的查找方法仅凭表格自身的导航属性精准定位任意行列的单元格。任务还原把 5×5 表格的对角单元格涂成红色题目见 task.md要求编写代码把表格中的对角单元格都绘制成红色。你需要用代码从table中获取所有的对角单元格td然后绘制它们// td 表示的是对单元格的引用 td.style.backgroundColor red;题目提供了一个 5 行 5 列的起始页面每个单元格的内容是列号:行号的 1-based 标记形式见 source.view/index.html因此第 1 行单元格标记为1:1、2:1、3:1、4:1、5:1第 2 行单元格标记为1:2、2:2、3:2、4:2、5:2……以此类推。所谓对角单元格即行号等于列号的那些格子1:1、2:2、3:3、4:4、5:5。任务要求用代码从table中获取这些单元格而不是用querySelector等全局查找方法目的是练习表格元素提供的专用导航属性。官方解题思路用rows和cells属性定位对角单元格官方解答见 solution.md只有一句话但点明了整个思路的核心我们将使用rows和cells属性来获取表格中的对角单元格。其中table.rows是表格中所有tr行元素组成的集合row.cells是某一行内所有td/th单元格组成的集合。对角线的规律是第i行的对角单元格恰好是这一行的第i个单元格下标从 0 开始。因此外层循环遍历行号i内层直接通过row.cells[i]取到对角单元格即可。完整可运行代码见 solution.view/index.html!DOCTYPE HTML html head style table { border-collapse: collapse; } td { border: 1px solid black; padding: 3px 5px; } /style /head body table tr td1:1/tdtd2:1/tdtd3:1/tdtd4:1/tdtd5:1/td /tr tr td1:2/tdtd2:2/tdtd3:2/tdtd4:2/tdtd5:2/td /tr tr td1:3/tdtd2:3/tdtd3:3/tdtd4:3/tdtd5:3/td /tr tr td1:4/tdtd2:4/tdtd3:4/tdtd4:4/tdtd5:4/td /tr tr td1:5/tdtd2:5/tdtd3:5/tdtd4:5/tdtd5:5/td /tr /table script let table document.body.firstElementChild; for (let i 0; i table.rows.length; i) { let row table.rows[i]; row.cells[i].style.backgroundColor red; } /script /body /html逐行解读解题代码将上面的script拆开来看let table document.body.firstElementChild;获取table元素。这里用document.body.firstElementChild是因为在题目给出的 HTML 中body的第一个元素子节点恰好就是tablefirstElementChild只返回元素节点会跳过文本节点。在实际项目中更稳妥的做法是给表格加id后直接使用document.getElementById或table全局引用但作为导航属性的练习这里刻意演示了通过节点关系获取表格的方式。for (let i 0; i table.rows.length; i) { let row table.rows[i]; row.cells[i].style.backgroundColor red; }table.rows.length是表格的行数这里为 5所以i依次取0、1、2、3、4table.rows[i]通过下标索引取出第i个tr元素DOM 集合虽然不是真正的数组但支持按索引访问row.cells[i]取出该行第i个单元格——它恰好就是主对角线上的格子最后通过style.backgroundColor red直接修改内联样式完成高亮这对应了题目要求的绘制方式。需要注意脚本位置代码放在body末尾的script中此时浏览器已经解析完整个表格table必然存在。如果脚本放在head中document.body甚至会是null因为浏览器还没读到body这一点在 article.md 的最顶层documentElement 和 body一节中有专门警示。为什么row.cells[i]恰好是对角线表格中的行号与列号均从 0 开始计数第i行0-based中的单元格其列下标分别为0、1、2、3、4对角线要求在行内列下标等于全局行下标即单元格的列下标j满足j i因此取row.cells[i]就能拿到(行 i, 列 i)的主对角线单元格。对应到题目标记上第 0 行1:1、2:1…中cells[0]是1:1第 1 行1:2、2:2…中cells[1]是2:2……最终被染红的正是1:1、2:2、3:3、4:4、5:5这五个格子与题目 iframe 预览solution所展示的结果一致。DOM 表格专用导航属性全景这道题之所以用rows和cells而不是querySelectorAll(tr)是因为table家族元素在通用导航属性之外还提供了特定于表格类型的便捷属性。据 article.md 的更多链接表格一节完整的表格导航属性族如下元素属性含义tabletable.rows所有tr行元素的集合tabletable.caption/table.tHead/table.tFoot分别引用caption、thead、tfoot元素tabletable.tBodies所有tbody元素的集合即使 HTML 源码中未写tbody浏览器也会在 DOM 中补一个thead/tfoot/tbodytbody.rows该节内部tr元素的集合trtr.cells该行内td和th单元格的集合trtr.sectionRowIndex该行在所属thead/tbody/tfoot中的位置索引trtr.rowIndex该行在整个表格中的编号含所有行td/thtd.cellIndex该单元格在所属tr中的编号其中table.rows与tr.cells正是本解法所用的两个属性。它们都是DOM 集合collection——类数组的可迭代对象具有以下三个关键性质详见 article.md 的DOM 集合一节可迭代可以用for..of遍历但不能用for..in后者会遍历出item、values等额外属性不是数组没有filter、map等数组方法需要时可用Array.from(...)转成真数组只读且实时不能通过table.rows[i] ...替换子节点修改需使用appendChild、remove等操作但集合会实时反映 DOM 的最新状态。article.md 中还给出了一个与本题同源的最小示例用于演示按行、按列索引取单元格的通用写法——它取出第 0 行第 1 列内容为two的单元格并高亮table idtable tr tdone/tdtdtwo/td /tr tr tdthree/tdtdfour/td /tr /table script // 获取带有 two 的 td第一行第二列 let td table.rows[0].cells[1]; td.style.backgroundColor red; // highlight it /script可以看出table.rows[0].cells[1]这种先定位行、再定位列的链式索引正是表格导航属性的典型用法本题只是在行号与列号相等的条件下复用了同样的模式。边界情况与扩展思考1. 非正方形表格解法row.cells[i]假设第i行至少存在第i个单元格当列数 ≥ 行数如 5 行 × 8 列时i始终小于每行的列数代码可以正常执行染红的格子是左上角行数 × 行数的主对角线部分当列数 行数如 8 行 × 5 列时i一旦超过row.cells.length - 1row.cells[i]就会得到undefined访问undefined.style会抛出TypeError。此时应把循环上界改为Math.min(table.rows.length, 某行的 cells 长度)或先判断row.cells[i]是否存在。2. 用rowIndex/cellIndex写等价解法tr.rowIndex是行在整个表格中的编号td.cellIndex是单元格在行内的编号两者均为 0-based。因此可以遍历所有单元格用全局行号等于行内列号作为染色条件写出逻辑等价但更贴近对角线定义的版本for (let row of table.rows) { for (let td of row.cells) { if (row.rowIndex td.cellIndex) { td.style.backgroundColor red; } } }这道题中table.rows[i]的下标i与row.rowIndex一致因为表格没有thead/tbody分段、行都从 0 开始两种写法结果相同。若表格带有thead等分区rowIndex仍是全表统一编号用它做条件判断会更稳健。3. 分节表格下的行为table.rows会包含thead、tbody、tfoot中所有的tr下标顺序与它们在 HTML 中的出现顺序一致。若需要按分区取行则要改用table.tBodies[i].rows、table.tHead.rows等属性并注意sectionRowIndex描述的是行在所属分区内的序号而非全表序号。小结表格元素提供了table.rows、tr.cells、tr.rowIndex、td.cellIndex等专用导航属性让你可以在不借助querySelector的情况下直接定位行与单元格本题的核心公式是主对角线单元格 table.rows[i].cells[i]i从 0 到table.rows.length - 1其成立前提是行号与列号都从 0 开始计数DOM 集合可迭代、只读、实时索引访问是其定位元素的基本手段遇到非正方形表格或带分节的表格时建议结合rowIndex/cellIndex判断或调整循环边界确保代码健壮。本文涉及的完整练习源码起始页与解答页位于 source.view/index.html 与 solution.view/index.html题目描述见 task.md表格导航属性的系统讲解见 article.md 的更多链接表格一节可对照阅读加深理解。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐实战演练用 table.rows 与 tr.cells 遍历 DOM 表格并高亮对角线单元格实战演练用 table.rows 与 tr.cells 遍历 DOM 表格并高亮对角线单元格 本指南基于 Modern JavaScript Tutorial文档/教程前端DOM 表格导航实战用 table.rows 与 tr.cells 遍历并高亮对角线单元格en.javascript.info 官方练习解析DOM 表格导航实战用 table.rows 与 tr.cells 遍历并高亮对角线单元格en.javascript.info 官方练习解析 本指南围绕《文档/教程前端《现代 JavaScript 教程》DOM 元素查找实战用 6 种方法定位表格与表单中的元素《现代 JavaScript 教程》DOM 元素查找实战用 6 种方法定位表格与表单中的元素 本篇指南围绕仓库 2 ui/1 document/04 sear文档/教程前端上一篇如何用Sketch MeaXure插件实现设计师与开发者的无缝协作终极设计标注指南下一篇Loop 窗口透明度快捷键完整指南3 个组合键让 Mac 窗口不再互相遮挡创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考