使用外部JavaScript更改多个表格单元格中的文本(Changing text in several table cells with external javascript)

编程入门行业动态更新时间:2024-10-28 22:23:40

我有一个日历类型的交易，我正在尝试创建，我很想一次选择和更改几个<td>元素。我打算使用for循环通过遍历每个节点并在每次迭代时修改其文本来实现这一点，但我对如何实际访问文本感到困惑。如果我有，在我的外部：

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

在HTML中：

其中五个

如何访问前一个节点并更改其文本？看起来点运算符不会给我与.getElementById()相同的选项。我知道也有.item(index: int) ，但看起来我得到了与标签名称相同的选项。对于菜鸟Javascripter的建议？

I have a calender type deal that I am trying to create and I am hung up on selecting and changing several <td> elements in one go. I plan on using a for loop to accomplish this by traversing each node and modifying its text each iteration, but I am confused on how to actually access the text. If I have, in my external:

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

And in HTML:

Five of them

How do I go about accessing the node next to the previous and changing its text? It would appear that the dot operator does not give me the same options as .getElementById() does. I understand there is also .item(index: int) as well but it would appear I get the same options as elements by tag name. Suggestions for a noob Javascripter?

最满意答案

getElementsByTagName为您提供了一个NodeList其中包含匹配的元素。您可以使用A）括号表示法访问元素： [n]其中n是0 <= n < list.length ，或B）使用.item(n) （ .item(n)相同范围）。

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

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

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

...其childNodes属性可访问其所有直接子节点。 childNodes是一个包含Text和Element节点的NodeList （可能还有Comment节点）

...如果您想要仅包含Element实例的childNodes子集，则为其children属性

...其textContent （标准）或innerText （IE特定）属性以直接文本形式访问其内容（标记被删除）

...它的innerHTML属性以HTML格式访问其内容

...如果你想访问树中跟随它的Node （ nextSibling ）或Element （ nextElementSibling ），那么它的nextSibling或nextElementSibling属性（在td元素的情况下，通常是另一个td元素或null ）

...它的previousSibling或previousElementSibling走另一条路

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

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

请注意，您不仅限于像getElementsByTagName这样的原始内容; 您可以使用querySelector和querySelectorAll分别为任意CSS表达式获取第一个匹配元素或匹配元素列表。这在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规范和MDN的信息。

getElementsByTagName gives you a NodeList with matching elements in it. You access the elements using either A) brackets notation: [n] where n is 0 <= n < list.length, or B) Using .item(n) (same range for n).

So for instance, this accesses the first td in the document:

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

That's an HTMLElement object. To access its contents, you use:

...its childNodes property to access all of its direct child nodes. childNodes is a NodeList containing Text and Element nodes (and possibly Commentnodes)

...its children property if you want a subset of childNodes that only includes Element instances

...its textContent (standard) or innerText (IE-specific) property to access its contents as straight text (markup is stripped out)

...its innerHTML property to access its contents as HTML

...its nextSibling or nextElementSibling properties if you want to access the Node (nextSibling) or Element (nextElementSibling) that follows it in the tree (in the case of td elements, that's usually another td element or null)

...its previousSibling or previousElementSibling to go the other way

So for instance, to set the HTML of the first td in the document:

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

Note that you're not limited to crude things like getElementsByTagName anymore; you can use querySelector and querySelectorAll to get the first matching element or a list of matching elements, respectively, for any arbitrary CSS expression. This is supported on document and also on Element instances on all modern browsers, and also IE8+.

So for instance, another way to update the text of the first td in the document is:

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";