How to get the value of an element by traversing the DOM

Related searches

I am traversing the DOM in order to get the value of a table data cell. To be more specific, the following bit of traversing:

const nodeLis = target.parentElement.parentElement.childNodes;

gets me a node list that contains:

NodeList 
0 #text " "
1 <td>title1</td>
2 #text " "
3 <td>title2</td>
4 #text " "
5 <td>title3</td>
6 #text " "

Now what I want to do is be able to get the values of the table data cells, specifically 'title1', 'title1' and 'title3'

Now I have tried to index into the childNodes list by doing

console.log(nodeLis[1]);

But this gets me

<td>title1</td>

and I'm not sure how to grab the actual title1 value from it

console.log(nodeLis[1].textContent);

Traversing the DOM, The DOM, as you might guess from the name Document Object Model, is a I also encode relationships between elements: input fields each have a label , and it the value of the document object's first child (remember that JavaScript arrays � Traversing the Node Tree. Often you want to loop an XML document, for example: when you want to extract the value of each element. This is called "Traversing the node tree" The example below loops through all child nodes of <book>, and displays their names and values:

You can use document.querySelectorAll() for that purpose. After that, you can iterate through the NodeList, and use innerHTML to get the individual child node values.

document.querySelectorAll('td').forEach(x => {
  console.log(x.innerHTML);
})
<table>
  <tr>
    <td>Title 1</td>
    <td>Title 2</td>
    <td>Title 3</td>
  </tr>
</table>

How to traverse the DOM in JavaScript, Often we want to perform actions on the elements that have some kind of relation from one node to the other nodes, that is, the way of traversing the DOM. The nodeType property for an element node will have the value� The jQuery traversing methods allow you to iterate DOM elements in a DOM hierarchy. Use the selector to get the reference of an element (s) and then call jQuery traversing methods to edit it. Important DOM manipulation methods: each (), children (), find (), first (), parent (), next (), previous (), siblings () etc.

You can get the content of the element by looking at the innerHTML property

console.log(nodeLis[1].innerHTML);

Walking the DOM, The DOM allows us to do anything with elements and their contents, but first we need to reach the In the DOM, the null value means “doesn't exist” or “no such node”. These properties are usually the same: they both get the parent. In the table above, traversing from bottom-left cell to top-right one : The XML content is transformed into JavaScript XML DOM object. The array of elements (with tag Element) using the method getElementsByTagName () is obtained. Next, we traverse through this array and display the child node values in a table.

How to get the value of an element by traversing the DOM, querySelector to find elements. Can you guess which method is more efficient? < div class="� The getAttribute() method retrieves an attribute value by element name. Example The following example (get_attribute_example.htm) parses an XML document ( node.xml ) into an XML DOM object and extracts the attribute value of the category Employee (index at 2) −

Traversing the DOM with JavaScript, The nodes in the DOM are referred to as parents, children, and siblings, depending on their relation to other nodes. The parent of any node is the node that is one level above it, or closer to the document in the DOM hierarchy. There are two properties to get the parent — parentNode and parentElement.

getElementsByTagName (tagNameValue) is a method available in any DOM Element or the root Document element. When called, it returns an array with all of the element's descendants matching the tag name. The first element of the list is located at position in the array.

Comments
  • I would recommend combining this with German's answer. innerHTML is not the best choice when what you're actually interested in is a piece of text.
  • @Brilliand Ah, thanks for pointing it out. I did a quick Google search about it just now, and found some explanation to it. textContent is indeed better!
  • It would be better to directly edit textContent into your code snippet, rather than adding a note saying that the code snippet is partially wrong.