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

td = tr[i].getElementsByTagName("td")[3];
console.log(td);

Here td displays below elements.

                   <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>

I need only <span id="cate_name">Rice </span><br> this area. In details- I need only the fisrt line in How can I get it.

I try these but in console they show 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

CodePudding user response：

You need to use innerText, not value.


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

Edit:

Sorry. I have been "blinded" by the problem of the 'internal text', and I did not see any more.

The getElementById only works with document, because expects the element ids unique in the full document.

And the getElementsByTagName returns a node list.

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>

CodePudding user response：

The may be on the first 'line'...

However, the Document Object Model that HTML represents doesn't care about line breaks, or additional white space at all. Rather, it's about where in the tree it lies. The <span> is the second child to the <td>, (index of 1), but I don't know why it's the one you're trying to get to. Is it the <span> tag itself? or the second child element?

If its the placement of the child within the td, you can retrieve all the children in an array:

td.getElementsByTagName("*")

and then you can pull out the second child (again, index of [1]), and (optionally) get the content directly...

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

If it's the fact that it's a <span> that brings you there...

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

If you need to do it by the id="cate_name" attribute, the getElementById is available on the document node. This is because properly formed HTML should not re-use an id:

document.getElementById("cate_name").textContent

Also, this in the console of Chrome. Other browsers use slightly different JavaScript calls, such as innerText. Does the page already jQuery imported? If so, all the inconsistencies between browsers can be avoided. You can check for it with...

$.fn.jquery

This will get the jQuery version number. This page, Stack Overflow, currently responds with '1.12.4'

With jQuery you can just use CSS-style selectors to find your node in the DOM:

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

.. or just:

$("#cate_name").innerText

So I was mistaken, td.getElementsByTagName("*") (and the asterisk in the quotes is vital) doesn't return an array, but rather a specialized HtmlCollection object. We can convert it to a true js array, and manipulate it like this:

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