JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at the most reliable ways to manipulate the DOM.
Use Newer DOM Manipulating Methods
The document
object has the querySelector
and querySelectorAll
methods, which are more versatile than the old getElementById
and getElementsByTagName
methods.
querySelector
returns the first element that has the given CSS selector.
querySelectorAll
returns a NodeList of all the elements that have the given CSS selector.
For instance, given the following HTML code:
<p>
foo
</p>
<p>
bar
</p>
<p>
baz
</p>
Then we can get the first p element with the document.querySelector
method as follows:
const p = document.querySelector('p');
If we want to get all the p elements, we can write the following code:
const p = document.querySelectorAll('p');
NodeLists are array-like iterable objects, so we should convert them to an array with the spread operator so that we can manipulate the list more easily:
const ps = document.querySelectorAll('p');
const arr = [...ps];
Once we converted the NodeList to an array, we can use any array methods with it that we wish to.
For instance, we can get the p element with the content ‘bar’ as follows:
const ps = document.querySelectorAll('p');
const arr = [...ps];
const bar = arr.find(a => a.innerText === 'bar');
Now bar
has the p element with the innerText
value set to 'bar'
.
If we use querySelector
, then if the given element isn’t found, it’ll return null
. Therefore, we should make sure that we check for that before doing anything.
For instance, if we have the HTML above, and we have the following code:
const div = document.querySelector('div');
Then div
will be null
.
Therefore, we should make sure to check for null
to prevent possible crashes arising from attempting to manipulate null
values.
Displaying Things with InnerHTML
The innerHTML
property of an element object lets us set the HTML content of an element. It lets us add child elements to the DOM without using createElement
or appendChild
as the browser will automatically put the items into the DOM tree.
For instance, given the following HTML:
<p>
foo
</p>
Then we can add bold text with the b tag as follows:
const p = document.querySelector('p');
p.innerHTML = '<b>foo</b>';
Then we’ll see that text ‘foo’ is bold.
Checking for DOM Elements with the hasAttribute Method
DOM elements has the hasAttribute
method to check if an element has an attribute. This is useful for checking if an element has the given attribute before doing anything.
For instance, we can write the following code to check if an attribute exists in a given element:
<p class='foo'>
foo
</p>
Then we can check if the class
attribute is in the p element by writing:
const p = document.querySelector('p');
const hasClass = p.hasAttribute('class');
Since the class
attribute exists in the p tag, then hasClass
should be true
. If the attribute doesn’t exist in the element, then hasAttribute
returns false
.
Photo by Ulises Baga on Unsplash
Getting All Attributes of an Element with the DOM Node Object’s attributes Property
A DOM element has an attributes
property that returns an array-like iterable object that has all the properties of the given element in the object.
For instance, if we have the following HTML:
<p class='foo'>
foo
</p>
Then we can get the attributes of the p tag as follows:
const p = document.querySelector('p');
const attributes = [...p.attributes];
Then attributes
is an array with the attributes as entries. Notice that we used the spread operator to convert the array-like object to an array.
Each entry has properties for the name and value of the attribute. It also has properties like the child elements and text content for the attribute values.
Conclusion
The best way to get one or more elements is to use the document.querySelector
or document.querySelectorAll
methods respectively.
If we use querySelectorAll
to get all elements with the given selector, then we should convert the returned NodeList to an array with the spread operator so that manipulation of the items will be easier.
If we use the querySelector
method, then it returns null
if no entries with the given selector are found, so we should check for that.
To check if an attribute exists in a DOM element, then we should get a DOM element with the hasAttribute
method. It returns a boolean indicating if the attribute exists in a DOM element.
To get all the attributes of an element, we can use the attributes
property of an element object. It returns an array-like iterable object, so we should again use the spread operator to spread it into an array.