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

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> .00 <br>
                        <strong>Rating:</strong> 0 <br>
                    </td>

我只需要<span id="cate_name">Rice </span><br>这个区域。详细信息-我只需要我如何获得它的第一行。

我尝试了这些，但在控制台中它们显示未捕获类型错误：无法读取未定义的属性（也读取 'getElementsById' 或标记名）

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

Answer 1

您需要使用 innerText，而不是 value。


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

编辑：

对不起。我已经被'internal text'的问题“蒙蔽”了，再也没有看到

getElementById 仅适用于 document，因为需要元素 ID 在整个文档中是唯一的。

和getElementsByTagName returns一个节点列表。

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> .00 <br>
        <strong>Rating:</strong> 0 <br>
    </td>
  </tr>
</table>

Answer 2

可能在第一个 'line'...

然而，HTML 代表的文档 Object 模型根本不关心换行符，或额外的白色 space。相反，它是关于它在树中的位置。是的第二个 child，（索引为 1），但我不知道为什么它是您要访问的那个。是标签本身吗？或第二个 child 元素？

如果它是 child 在 td 中的位置，您可以检索数组中的所有 children：

td.getElementsByTagName("*")

然后您可以拉出第二个 child（同样是 [1] 的索引），并且（可选）直接获取内容...

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

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

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

如果您需要通过 id="cate_name" 属性来完成，getElementById 在文档节点上可用。这是因为格式正确的 HTML 不应该 re-use id:

document.getElementById("cate_name").textContent

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

进行检查

$.fn.jquery

这将得到jQuery版本号。此页面 Stack Overflow 当前响应为“1.12.4”

使用 jQuery 你可以只使用 CSS-style 选择器在 DOM:

中找到你的节点

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

.. 或者只是：

$("#cate_name").innerText

所以我错了，td.getElementsByTagName("*")（引号中的星号很重要）不是 return 数组，而是一个专门的 HtmlCollection object。我们可以把它转换成一个真正的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><><td/>（td 标签的子元素）中获取 JavaScript DOM 中的元素

How Can I get element from <td><><td/> (td tag's child) in JavaScript DOM

javascript

dom

dom-manipulation