如何从 JavaScript DOM 中的 <td><><td/> (td 标签的子元素)获取元素
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
可能位于第一“行”...
但是,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
您需要使用
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>