5 Document Object Methods in JavaScript (a small DOM cheat sheet)
Document is an object in JavaScript that refers to the entire contents of a web page and this post is going to talk about each of the methods inside this document object.
The 5 “Document” Methods are as follows:
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()
This area of JavaScript is referred to as “DOM” or Document Object Manipulation and is how we get our JavaScript to interact with or “manipulate” the HTML and CSS in the browser.
This is the example HTML code we’re going to be looking at to help us understand the concept of manipulating the document object in JavaScript.
<body>
<h1>Some sort of title</h1>
<h1>that can't fit on one line?</h1>
<ul>
<li id="highlight">Item 1</li>
<li class="bold">Item 2</li>
<li class="bold">Item 3</li>
</ul>
</body>
document.getElementById()
The getElementById() method is going to return (as it says in the name) an element by ID which can only occur once on an HTML page so it will return the element that has that specific ID assigned to it as in the example shown below which has been extracted from a list.
<li id="highlight">Item 1</li>
When we call the getElementById() method, our JavaScript will call the entire li tag and return it as shown above. We would save the result of calling the method to a variable and then just call that variable as shown by the variable “example” below.
var example = document.getElementById("highlight");
When we call the “example” variable now we will have the li item returned as previously stated. The console does display this as HTML but the result of calling “example” is actually an object (you can see that by typing the following into the console).
console.dir(example);
The output will be all of the elements within the object.
document.getElementsByClassName()
Just like in the getElementById method we were calling a method by its ID, in this method we’re calling the element by its class.
var examples = documentgetElementsByClassName("bold");
Unlike in the previous example however, the result (the variable “examples” in this case) will be a list of all the elements that have the class “bold”. This is because there is no rule about how many elements can share a class like there are rules about how many ID’s can be on a page.
When we call examples and view it in the console…
console.dir(examples);
…we will be returned something that looks like an array but it is actually a “node list” which is similar to an array only the forEach function can’t be used to access each of the variables (and rather a “for” loop will need to be used; accessing each value using the “i” variable in the loop).
Just like in the getElementById() example that we spoke about previously, this method will return what looks like a list of HTML but each of these are actually objects and “deeper variables” can be accessed in the same way.
document.getElementsByTagName()
The next method we’re going to discuss is the getElementsByTagName() method found in JavaScript. This method will return a node list of all the elements of a certain tag (i.e. H1 or li).
var examples = document.getElementsByTagName("li");
When the JavaScript code above is called on a web page, all of the li elements will be returned (just like in the getElementsByTagClass method). As the returned data is a node list (a list of objects), the same rules apply in that to iterate through the values, a for loop utilising the variable “i” (or similar) must be used.
We could also call the other elements in the demo code, like “body”, “head”, “HTML” or “h1” tags etc.
document.querySelector()
querySelector is a newer method in the JavaScript document object library and it is a method that ties the three previously discussed methods into one simpler method (it does the same as all three). The only difference between this and the previous methods is that this method will return the first element of that type and not a node list of all that are on the page.
The querySelector will take a CSS style selector i.e. “#highlight” or “.bold” as shown in the example below. NOTE: Because we are looking for the ID “Highlight” we will pass the querySelector method a # before the name of the element (in the case of ID). Obviously if we were trying to access the list items that have “class” name assigned, we’ll need to use a full stop before the name as we would in our CSS.
var tag = document.querySelector("#highlight");
var tag = document.querySelector(".bold");
The two lines of code will both return the first element that have either that ID or class respectively. So on looking at the HTML example that we’re using, if we called this method for “h1” we would get the first h1 returned and if we used it for “li”, we’d get the first li element returned etc.
document.querySelectorAll()
Much like the previous method (the document.querySelector method) this method works in the exact same way only it returns all of the values of each type called based on our CSS style selector that we feed into the function.
var tag = document.querySelectorAll("#highlight");
var tag = document.querySelectorAll(".bold");
This method makes the document.querySelector method act exactly like the previously discussed document.getElementById, document.getElementsByClassName, document.getElementsByTagName methods only we’re using CSS style selectors as inputs and we receive multiple outputs in a node list (a bunch of objects, constructed from HTML).