使用外部 javascript 更改几个 table 单元格中的文本

Question

我有一个日历类型的交易，我正在尝试创建，但我无法一次性选择和更改多个 <td> 元素。我计划使用 for 循环遍历每个节点并在每次迭代中修改其文本来完成此操作，但我对如何实际访问文本感到困惑。如果我有，在我的外部：

var daysInWeek = document.getElementsByTagName("td");

并且在 HTML 中：

<tr><td id="w1_mo">w1d1</td>
                        <td id="w1_tu">w1d2</td>
                        <td id="w1_we">w1d3</td>
                        <td id="w1_th">w1d4</td>
                        <td id="w1_fr">w1d5</td>
                        <td id="w1_sa">w1d6</td>
                        <td id="w1_su">w1d7</td></tr>

其中五个

如何访问前一个节点并更改其文本？点运算符似乎没有给我提供与 .getElementById() 相同的选项。我知道也有 .item(index: int) 但看起来我通过标签名称获得与元素相同的选项。对菜鸟 Javascripter 的建议？

Answer 1

getElementsByTagName 给你一个 NodeList 里面有匹配的元素。您可以使用 A) 方括号表示法访问元素：[n] 其中 n 是 0 <= n < list.length，或 B) 使用 .item(n)（与 n 相同的范围）。

例如，这将访问文档中的第一个 td：

var daysInWeek = document.getElementsByTagName("td");
var firstTdInDocument = daysInWeek[0];

那是一个 HTMLElement 对象。要访问其内容，请使用：

...其childNodes 属性访问其直接子节点的所有。 childNodes 是一个 NodeList，包含 Text 和 Element 个节点（可能还有 Comment 个节点）
...它的 children 属性如果你想要 childNodes 的一个子集，它只包含 Element 个实例
...它的 textContent（标准）或 innerText（IE 特定）属性以纯文本形式访问其内容（标记被删除)
...它的 innerHTML 属性以 HTML
...它的 nextSibling 或 nextElementSibling 属性如果你想访问 Node (nextSibling) 或 Element (nextElementSibling) 在树中跟在它后面（在 td 元素的情况下，通常是另一个 td 元素或 null)
...它的 previousSibling 或 previousElementSibling 走另一条路

因此，例如，要设置文档中第一个 td 的 HTML：

document.getElementsByTagName("td")[0].innerHTML = "I'm the first <code>td</code> element";

请注意，您不再局限于 getElementsByTagName 之类的粗俗内容；对于任意 CSS 表达式，您可以使用 querySelector 和 querySelectorAll 分别获取第一个匹配元素或匹配元素列表。这在 document 和所有现代浏览器的 Element 实例以及 IE8+ 上都受支持。

因此，例如，另一种更新文档中第一个 td 文本的方法是：

document.querySelector("td").innerHTML = "I'm the first <code>td</code> element";

或

document.querySelectorAll("td")[0].innerHTML = "I'm the first <code>td</code> element";

更多内容在 DOM specs and on MDN。

使用外部 javascript 更改几个 table 单元格中的文本

Changing text in several table cells with external javascript

javascript

for-loop

getelementsbytagname