开发者问题收集

如何从 JavaScript DOM 中的 <td><><td/> (td 标签的子元素)获取元素

2021-11-04
2808
td = tr[i].getElementsByTagName("td")[3];
console.log(td);

此处 td 显示以下元素。

<td style="display: none;">
                        <strong>Category:</strong> <span id="cate_name">Rice </span><br>
                        <strong>Product Code:</strong> 2132557596 <br>
                        <strong>Num of Sale:</strong> 0 Times <br>
                        <strong>Base Price:</strong> $65.00 <br>
                        <strong>Rating:</strong> 0 <br>
                    </td>

我只需要 <span id="cate_name">Rice </span><br> 此区域。详细信息 - 我只需要“如何获取”中的第一行。

我尝试了这些,但在控制台中它们显示 Uncaught TypeError:无法读取未定义的属性(读取“getElementsById”或标签名)

td.getElementsByID("cate_name")
td.getElementsByID("cate_name").value
td.getElementsByTagName("span")
td.getElementsTagName("span").value
and also use td[0].aboveThing
2个回答

可能位于第一“行”...

但是,HTML 所表示的文档对象模型根本不关心换行符或额外的空白。相反,它关心的是它在树中的位置。<span> 是 <td> 的第二个子元素(索引为 1),但我不知道为什么它是您要访问的子元素。它是 <span> 标签本身吗?还是第二个子元素?

如果它是子元素在 td 中的位置,您可以在数组中检索所有子元素:

td.getElementsByTagName("*")

然后您可以拉出第二个子元素(再次,索引为 [1]),并且(可选)直接获取内容...

td.getElementsByTagName("*")[1].textContent

如果它是 <span>带你到那里...

td.getElementsByTagName("span")[0].textContent

如果您需要通过 id="cate_name" 属性执行此操作,则 getElementById 在文档节点上可用。这是因为正确格式的 HTML 不应重复使用 id:

document.getElementById("cate_name").textContent

此外,这在 Chrome 的控制台中。其他浏览器使用略有不同的 JavaScript 调用,例如 innerText。页面是否已导入 jQuery?如果是这样,则可以避免浏览器之间的所有不一致。您可以使用...进行检查

$.fn.jquery

这将获取 jQuery 版本号。 此页面 Stack Overflow 目前响应的是“1.12.4”

使用 jQuery,您只需使用 CSS 样式选择器即可在 DOM 中查找节点:

$("tr td:nth-child(2) span#cate_name").innerText

.. 或者只是:

$("#cate_name").innerText

所以我错了, td.getElementsByTagName("*") (引号中的星号至关重要)不返回数组,而是返回专门的 HtmlCollection 对象。我们可以将其转换为真正的 js 数组,并像这样操作它:

var arr = [].slice.call(td.getElementsByTagName("*"));
var br = arr.find(x => x.localName == "br");  // find first line break
var firstRow = arr.slice(0, arr.IndexOf(br)) // first 'row' as array segment
var firstRowText = firstRow.map(x => x.innerText).Join() //if you want the whole first row text
FerrousOxide
2021-11-04

您需要使用 innerText ,而不是 value

td.getElementById("cate_name").innerText
td.getElementsByTagName("span").innerText

编辑:

抱歉。我被“内部文本”的问题“蒙蔽了双眼”,再也看不到了。

getElementById 仅适用于 document ,因为它要求元素 ID 在完整文档中是唯一的。

并且 getElementsByTagName 返回一个节点列表。

const table = document.getElementById('id_table');

const trList = table.getElementsByTagName('tr');

// getElementById only works with document
console.info(document.getElementById("cate_name").innerText)

for (let i = 0; i < trList.length; i++) {
  const td = trList[i].getElementsByTagName("td")[0]
  console.info(td.getElementsByTagName("span")[0].innerText)
}
<table id="id_table">
  <tr>
    <td>
      <strong>Category:</strong> <span id="cate_name">Rice </span><br>
        <strong>Product Code:</strong> 2132557596 <br>
        <strong>Num of Sale:</strong> 0 Times <br>
        <strong>Base Price:</strong> $65.00 <br>
        <strong>Rating:</strong> 0 <br>
    </td>
  </tr>
</table>
Tonio
2021-11-04