The Dom – Locating Nodes

Four ways to locate nodes

Lets’s talk about locating nodes, based on this example code. Full code here at CodePen for locating nodes.

Notice that these statements in each of these function bodies start with a word document. Document in JavaScript references the HTML document that is running the code. It’s data type is that of an object. It is where we get the name DOM from, the document object model. The document object is itself considered to be a node in the DOM tree.

<body>
<h1>Locating Nodes Demo</h1>
<p id=”textToChange”>Click on a button to change the color of this text.</p>
<button type=”button” onclick=”changeColor1()”>Use DOM traversal</button>
<button type=”button” onclick=”changeColor2()”>Use getElementsByTagName</button>
<button type=”button” onclick=”changeColor3()”>Use getElementById</button>
<button type=”button” onclick=”changeColor4()”>Use querySelector</button>

function changeColor1() {

document.childNodes[1].childNodes[2].childNodes[3].style.color = ‘red’; // This is using DOM traversal. You can go down the tree using node relations. Style.color changes the color.

} //Note: This way of locating a specific node is actually the worst way. Takes more work to figure out exact path in the DOM and if anything changes in the HTML page, if one element is added or removed in the wrong place, then suddenly the whole thing breaks.

function changeColor2() {

document.getElementsByTagName(‘p’)[0].style.color = ‘orange’; //This uses getElementsByTagName. We use it on the document and we look for every element that is a particular tag name such as P, which we provide as an argument. This method will return a list of every element with that tag name even, even if there’s only one. We can access a particular element by using bracket notation and an index number. Bracket 0 will give us the very first element with a tag name in the document. This could be a good method to use if you need to get to every element of a particular type in a document. But probably not the best way to get a single element.

}

function changeColor3() {

document.getElementById(‘textToChange’).style.color = ‘blue’; //getElementById is more specific. It uses ID to target the element directly. This is the most preferred way and has been used most over the years to target a node.

}

function changeColor4() {

document.querySelector(‘#textToChange’).style.color = ‘green’; //querySelector is a more recent preferred way to target to a node. You can give it a CSS selector. In this case the ID. This method flexible and powerful. You can use any CSS selector including more complex selectors, not just ID’s. You can use classes, element names, ID’s , attribute selectors. Anything that you can normally use with CSS. But, however note, that this will only give you back the very first element that it finds that matches the selector. So if you are trying to get more than one element back, you need to use a different method called: querySelectorALL() , which returns a node list of all nodes matching your selector.

}

</script>

We can access the style attribute of HTML elements by using .style after a given node in JS, this is called the style property. Most HTML element attributes (like .style.color) can be accessed in JavaScript by using properties in this way, not just the style.

For example we could do this in our code and it would hide the button instead.