In the below we explain the JavaScript alternatives to getElementById() and show a working example of getElementById() together with two alternatives. You can Scroll down and then click the buttons to read how the targets have been referenced. Once we have the elements we apply some styles and add some text within our divs #target-1, #target-2 and #target-3 which you'll see when you click the buttons.
In our HTML code we have the following:
<div id="target-1" class="view-content view-content--1"></div> <div id="target-2" class="view-content view-content--2"></div> <div id="target-3" class="view-content view-content--3"></div>
We can return an Element object representing the element whose id property matches the specified string 'target-1' using the below.
const al = document.getElementById("target-1");
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
However, if we don't have an ID we can achieve the same with either of the following two alternative approaches:
Alternative Approach 1 (for document.get.ElementById)
document.getElementsByClassName
const al = document.getElementsByClassName("view-content--1")[0];
In the above we use [0] to get the first element with a class of 'view-content--1'. Without the [0] we would get all elements that have a class of 'view-content--1'.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
or
Alternative Approach 2 (for document.get.ElementById)
document.querySelector
const al = document.querySelector(".view-content--1");
In the above the method querySelector() returns the first element within the document that matches the specified selector, or group of selectors.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
HTML
Target 1 (#target-1)
Target 2 (#target-2)
Target 3 (#target-3)
JavaScript
// Listen for `DOMContentLoaded` event
document.addEventListener('DOMContentLoaded', e => {
// SPECIFY OUR FUNCTIONS WHICH CHANGE APPEARANCE OF OUR TARGETS
function highlightTarget1() {
// set styling for div #target-1
al.style.background = 'yellowgreen';
al.style.color = 'white';
// set styling for div#target-2 (but we've used document.getElementsByClassName("view-content--2")[0] to reference it)
el.style.background = 'transparent';
el.style.color = 'initial';
// set styling for div#target-3 (but we've used document.querySelector(".view-content--3") to reference it)
il.style.background = 'transparent';
il.style.color = 'initial';
// add some text to div#target-1
al.innerHTML = 'Target 1 (#target-1)';
al.innerHTML += '<br />When we click \'Button 1\' our event listener in the JavaScript below calls the function \'highlightTarget1\' where our variable \'al\' has used the Document method getElementById() to return the Element object representing the element whose id property is \'target-1\'. In our JavaScript code we have used: <code>document.getElementById("target-1");</code>';
// add text to div#target-2
el.innerHTML = 'Target 2 (#target-2)';
// add text to div#target-3
il.innerHTML = 'Target 3 (#target-3)';
// demonstrate how we can use the JavaScript keyword 'this' as opposed to btn1 to color the first button
this.style.background = "yellowgreen";
// color the second button
btn2.style.background = "rgb(239,239,239)";
// color the third button
btn3.style.background = "rgb(239,239,239)";
}
function highlightTarget2() {
// set styling for div #target-1
al.style.background = 'transparent';
al.style.color = 'initial';
// set styling for div#target-2 (but we've used document.getElementsByClassName("view-content--2")[0] to reference it)
el.style.background = 'yellowgreen';
el.style.color = 'white';
// set styling for div#target-3 (but we've used document.querySelector(".view-content--3") to reference it)
il.style.background = 'transparent';
il.style.color = 'initial';
// add text to div #target-1
al.innerHTML = 'Target 1 (#target-1)';
// add some text to div #target-2
el.innerHTML = 'Target 2 (#target-2)';
el.innerHTML += '<br />When we click \'Button 2\' our event listener in the JavaScript below calls the function \'highlightTarget2\' where our variable \'el\' has used the getElementsByClassName method of Document interface to return an array-like object of all child elements which has the given class name of \'view-content--2\'. In our JavaScript code we have used: <code>document.getElementsByClassName("view-content--2")[0];</code> to specify first element <code>[0]</code> with the class of \'view-content--2\'.';
// add text to div #target-3
il.innerHTML = 'Target 3 (#target-3)';
// color the first button
btn1.style.background = "rgb(239,239,239)";
// demonstrate how we can use the JavaScript keyword 'this' as opposed to btn2 to color the second button
this.style.background = "yellowgreen";
// color the third button
btn3.style.background = "rgb(239,239,239)";
}
function highlightTarget3() {
// set styling for div #target-1
al.style.background = 'transparent';
al.style.color = 'initial';
// set styling for div#target-2 (but we've used document.getElementsByClassName("view-content--2")[0] to reference it)
el.style.background = 'transparent';
el.style.color = 'initial';
// set styling for div#target-3 (but we've used document.querySelector(".view-content--3") to reference it)
il.style.background = 'yellowgreen';
il.style.color = 'white';
// add text to div #target-1
al.innerHTML = 'Target 1 (#target-1)';
// add text to div #target-2
el.innerHTML = 'Target 2 (#target-2)';
// add some text to div #target-3
il.innerHTML = 'Target 3 (#target-3)';
il.innerHTML += '<br />When we click \'Button 3\' our event listener in the JavaScript below calls the function \'highlightTarget3\' where our variable \'il\' has used the Document method querySelector() which returns the first Element within the document that matches the specified selector \'.view-content--3\'. If no matches are found, null is returned. In our JavaScript code we have used: <code>document.querySelector(".view-content--3");</code>';
// color the first button
btn1.style.background = "rgb(239,239,239)";
// color the second button
btn2.style.background = "rgb(239,239,239)";
// color the third button and demonstrate how we can use the JavaScript keyword 'this' as opposed to btn3
this.style.background = "yellowgreen";
}
// GET REFERENCE TO OUR TARGET ELEMENTS
// get reference to our #target-1 using document.getElementById
const al = document.getElementById("target-1");
// get reference to our .view-content--2 using document.getElementsByClassName (Alternative 1)
const el = document.getElementsByClassName("view-content--2")[0];
// get reference to our .view-content--3 using document.querySelector (Alternative 2)
const il = document.querySelector(".view-content--3");
// GET REFERENCES TO OUR BUTTONS AND PASS A VARIABLE TO OUR FUNCTIONS
// get reference to our first button
var btn1 = document.getElementById("myBtn1");
btn1.myVar = "al";
// get reference to our second button
var btn2 = document.getElementById("myBtn2");
btn2.myVar = "el";
// get reference to our third button
var btn3 = document.getElementById("myBtn3");
btn3.myVar = "il";
// ADD EVENT LISTENERS TO OUR BUTTONS FOR ACTION CLICK
// add event listener for our first button
btn1.addEventListener("click", highlightTarget1);
// add event listener for our second button
btn2.addEventListener("click", highlightTarget2);
// add event listener for our third button
btn3.addEventListener("click", highlightTarget3);
});