如何从 JavaScript DOM 中的 <td><><td/> （td 标记的子项）获取元素

Question

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: Cannot read properties of undefined (reading 'getElementsById' or tagname also)

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

Answer 1

可能在第一行...

然而，HTML 所代表的文档对象模型根本不关心换行或额外的空白。相反，它是关于它在树中的位置。 是

的第二个孩子，（索引为 1），但我不知道为什么它是你想要的那个。它是 标签本身吗？还是第二个子元素？

如果是子元素在 td 中的位置，则可以检索数组中的所有子元素：

td.getElementsByTagName("*")

然后你可以拉出第二个孩子（再次，[1]的索引），并且（可选）直接获取内容......

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

如果是 将你带到那里......

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 

【讨论】：

• 当然，这让您了解了 td，但是 span 节点的识别特征是什么？它的位置？事实上它是一个跨度？事实上它不是一个强大的？
• 如果页面已经加载，我强烈推荐 jQuery 路由。
• 实际上我正在搜索跨度文本是否与表格行中的另一个字符串匹配？如果匹配，那么我只取表中的行。所以我不需要 document.getElementById("cate_name").textContent 。我检查了 td.getElementsByTagName("") ， td.getElementsByTagName("")[1].textContent， td.getElementsByTagName("span")[0].textContent，但对于所有这些它show Uncaught TypeError: Cannot read properties of undefined (reading 'getElementsByTagname')
• 我编辑了我的答案，有一些新发现，如果这有帮助，请 lmk

Answer 2

您需要使用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>