What Is the DOM?
Examples of dependancies are jQuery & popper.js for bootstrap which if called after the script tag in your html, it will not work correctly. A work around to this is to add an argument that includes something like this:
document.addEventListener('DOMContentLoaded', someFunctionOrVariable);which will allow the full DOM to run before that DOM manipulation argument via a callback/promise – but we are getting way ahead of ourselves here.
How to Manipulate the DOM
document is the object to focus on when referring to DOM manipulation. The
document object allows you to create, edit, remove HTML/CSS. In order to manipulate anything on the DOM, you will need to follow a specific process of “Selecting” first then manipulating it’s properties or methods.
querySelectorAll you can select parts of the HTML exactly as you would within CSS. For example for a
<p> tag, you can select it by creating a constant like so:
const p = document.querySelector('p');
const p = document.querySelectorAll('p'); and this can but done for any selector like you normally would with CSS. For example
Another cool thing you can do is to create a const as a method of a current querySelector. Here is what I mean:
const ul = document.querySelector('ul'); const li = ul.querySelectorAll('li')
What this will allow you to do is to select all the
li tags within the first
ul on the DOM (obviously an
li tag would live inside of a
ul but this was just a cheap example).
The old way to do this was to use some of these, while it’s useful it isn’t really necessary to learn anymore but definitely good to know it exists for reference. You can see a whole list here:https://developer.mozilla.org/en-US/docs/Web/API/Document
The above will call the first p tag and only the first one it finds from the top of the DOM. If you wanted to select all paragraph tags, you’d do almost the exact same line of code like so:
Misc Note: The global scope on the browser is the
window– any global variables you create can actually be called on the window as a method of the window. For example
const myGlobalVariable = 'things';
window.myGlobalVariable === myGlobalVariablewould result in
Ok, You Selected It, Now What?
This is intended to just be a shortlist of some really useful methods of DOM manipulation. Review https://developer.mozilla.org/en-US/docs/Web/API/Element and https://developer.mozilla.org/en-US/docs/Web/API/Node for more possibilities.
Before we do anything with it, let’s learn about Element Properties and Methods
const header = document.querySelector('h1');
In the example above, we aren’t doing anything with it. We just selected it. So how do you manipulate it?
One way is to use predefined methods. Let’s explore some:
innerText and textContent
const header = document.querySelector('h1'); header.textContent = 'Drew Learned: How to edit an H1 using querySelector!';
If you opened up the browser console on this page and ran the above script, you’d update the title of this post to “Drew Learned: How to edit an H1 using querySelector!”. Let’s consider a few more examples.
innerTextis easily confused with
Node.textContent, but there are important differences between the two. Basically,
innerTextis aware of the rendered appearance of text, while
insertAdjacentText(); is another noteworthy method to use. I’d strongly recommend reviewing https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText along with this post for more details.
To be continued…
If you would like to learn more, check out part 2 of this blog series: https://drewlearns.com/2020/01/02/manipulating-the-document-object-model-part-2/