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的相同范围）。< / p>

例如，这会访问文档中的第一个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（{{1}在树中跟随它（在nextElementSibling元素的情况下，通常是另一个td元素或td）
... null或previousSibling走另一条路

例如，要设置文档中第一个previousElementSibling的HTML：

td

请注意，您不仅限于document.getElementsByTagName("td")[0].innerHTML = "I'm the first <code>td</code> element";之类的粗俗内容;您可以使用getElementsByTagName和querySelector分别获取任意CSS表达式的第一个匹配元素或匹配元素列表。 querySelectorAll以及所有现代浏览器上的document个实例以及IE8 +都支持此功能。

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

td

或者

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

DOM specs和MDN上的更多内容。

使用外部JavaScript更改多个表格单元格中的文本

1 个答案: