JavaScript Fundamentals & DOM Manipulation
For my blog this Mod I wanted to review some of the basics of JavaScript. I’ve found it valuable to return to the information I only learned a few weeks ago in order to refresh the basics.
First a quick introduction:
JavaScript is a programming language that allows you to implement complex features on a website, such as dynamic elements or interactivity. Or, in other words, HTML and CSS add content and structure the foundations of a website, and JavaScript adds behavior.
JavaScript was initially created to “make web pages alive”. It responds to user interaction, changing the website without having to reload the page.
Javascript allows us to (1) find or select certain elements using HTML or CSS (2) adjust a property of the selected element (3) remove or add HTML and (4) listen and respond to specific events on our browser.
This is possible through DOM manipulation.
The Document Object Model (DOM) is created when the page loads from the HTML that the web server provides the browser.
The DOM is an object-oriented representation of the web page, made up of nodes and objects, which can be modified with a scripting language such as JavaScript.
We normally interact with it through the document object. Because it is the “source of truth” for what browsers display, changes to the DOM create changes in the browser screen. It is helpful to think of the DOM as a tree, in order to better understand how to find or select HTML elements and their children in the rendered page.
When creating the HTML for a page including class or id attributes for a node (HTML element) will make it and its children (branches) easier to find (as well as provide useful information about that node).
There are a few ways to use JavaScript to find elements inside the DOM:
For single elements:
document.getElementById()
▹Will find an HTML element with a particular id
▹ If the element is found, the method will return the element as an object otherwise it will return null
document.querySelector()
▹More open-ended! Will find the first HTML element that matches a tag or a specified CSS selector (id, class names, types, attributes, etc.)
For multiple elements:
document.getElementsByTagName()
▹Will return all the elements with the same tag name
document.getElementsByClassName()
▹Will return all the elements with the same class name
document.querySelectorAll()
▹Will find all HTML elements that match a specified CSS selector (id, class names, types, attributes, etc.)
Adjusting the property of a selected node:
If we assign an element to a variable:
We can then change the attributes of that element:
Adding and Removing HTML:
document.createElement()
▹ After which we can use the example above to adjust its properties or
▹ use .innerHTML to specify the HTML content of an element or
▹ use innerText to edit the text within the opening and closing tags
Following creating the element we can append the changes to a parent node, passing in the argument of the new child element:
▹ parentNode.append()
As for removing Nodes:
▹ node.removeChild(childNode) will remove a particular child
▹ node.remove() will remove the node on which it was called
Sources:
