本教程旨在解决使用javascript在html表格中查找带有特定类名的单元格时常见的效率问题。文章将详细介绍两种有效方法：一种是逐行遍历并在每行内查找目标单元格，另一种是更高效地直接选取所有符合条件的单元格，从而避免重复搜索整个文档，确保代码的准确性和性能。
在Web开发中，经常需要通过JavaScript操作HTML表格（
），并提取其内容。然而，如果不了解DOM查询的正确作用域，可能会导致代码效率低下或结果不准确。本教程将深入探讨如何高效且准确地完成这项任务。常见的误区：在循环中重复查询整个文档许多初学者在尝试遍历表格行并查找每行中的特定单元格时，可能会犯一个常见的错误：在每次循环迭代中都使用document.querySelector()来查找元素。 考虑以下HTML表格结构：
如果使用以下JavaScript代码来尝试查找： let table = document.querySelector('#table');
let rows = table.rows;
for (let i = 0; i <p>这段代码的问题在于，document.querySelector('.bi')无论在循环的哪一次迭代中执行，它总是会从整个文档中查找并返回<strong>第一个</strong>匹配.bi类的元素。这意味着在上述示例中，它将始终返回包含“6.16”的</p><td>元素，而不会正确地获取到第二行中包含“7.20”的</td><td>。这显然不是我们想要的结果。<h3>解决方案一：逐行遍历并在行内查找</h3>
<p>要正确地在每行中查找目标单元格，关键在于将querySelector的作用域限制在当前的行元素上。而不是在整个document上进行查询。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3866" title="jinn-node"><img
src="https://img.php.cn/upload/skill/000/000/081/178981932374166.jpg" alt="jinn-node" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3866" title="jinn-node" class="overflowclass">jinn-node</a>
<p class="overflowclass">在Jinn网络为自主项目工作赚取代币奖励，让闲置的OpenClaw代理开始工作。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3866" title="jinn-node" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>以下是修正后的代码示例：</p>
<pre class="brush:php;toolbar:false;">
// 获取表格的所有行
const rows = document.querySelectorAll("#table tbody tr");
// 遍历每一行
for (let i = 0; i <p><strong>代码解释：</strong></p><ol><li>document.querySelectorAll("#table tbody tr")：首先，我们精确地选取了ID为table的表格中所有<tbody>内的<tr>元素。querySelectorAll返回一个NodeList，其中包含了所有的行元素。<li>rows[i].querySelector("td.bi")：在循环的每次迭代中，我们不再从document中查找，而是从当前的行元素rows[i]中调用querySelector。这将确保查询范围仅限于当前行，从而准确地找到该行中带有bi类的<td>元素。<li>if (cell)：这是一个良好的实践，用于检查是否成功找到了目标单元格，以避免在元素不存在时尝试访问其属性而导致错误。</li>
<h3>解决方案二：直接选取所有目标单元格（更高效）</h3>
<p>如果你的目标仅仅是获取表格中所有带有特定类名的单元格，而不需要逐行处理，那么可以采用一种更直接、更高效的方法：使用document.querySelectorAll一次性选取所有符合条件的单元格。</p>
<pre class="brush:php;toolbar:false;">
// 直接选取ID为'table'的表格中所有带有类名'bi'的td元素
const biCells = document.querySelectorAll("#table td.bi");
// 遍历所有找到的单元格并输出其文本内容
biCells.forEach(cell => {
console.log(cell.innerText);
});
代码解释：
|
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
