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
uj5u.com熱心網友回復：
您需要使用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>uj5u.com熱心網友回復：
可能在第一條“線”...
但是，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
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/347861.html
標籤：javascript dom dom操纵