Ariel Jakubowski

Using JavaScript to Manipulate the DOM

Accessing DOM Elements

The query selector finds the first element or node that matches a specified parameter. The most common ways a query selector is used are to access elements of a certain type, elements with a certain id, and elements with a certain class. More complex query selectors can be written that account for more parameters and can exclude elements that match specified parameters.

document.querySelector("element");
//Gets element that matches specified typedocument.querySelector(".class");
//Gets element that matches specified classdocument.querySelector("#id");
//Gets element that matches specified id

Multiple elements all matching the same parameters can be accessed using the following code. This will return a NodeList which is simply a collection of all of the nodes matching the specified criteria.

document.querySelectorAll("element");
//Gets element that matches specified type

To specifically get elements that match a specified id the following code can be used.

document.getElementById("elementId");

To get a collection of elements that have a certain class or set of classes the following code can be used.

document.getElementsByClassName("class12");
//Gets all elements with class1document.getElementsByClassName("class1 class2");
//Gets all elements with class1 and class2

These selectors can be applied to the entire document to get elements from anywhere in the document or they can be applied to a node to get information about that node’s child nodes.

By using query selectors, additional information about a specific element can also be found in the form of attributes. An attribute is simply a property of an element that holds a certain piece of information. Some commonly used attributes are ids, names, values, source information, and styling information. For a complete list of HTML attributes, click the following link.

The following code can be applied to an element to get the attributes of an element.

element.getAttribute("attributeName");
//Gets information about specified attributeelement.attributes
//Gets information about all attributes of an element

Adding, Changing, and Removing DOM Elements

To add a new node to the DOM, the element must first be created then it must be added to the document or to another node as a child.

const newH1 = document.createElement('h1')
//Creates new h1 
newH1.textContent = 'This is a new h1'
//Sets text of h1 
document.body.appendChild(newH1)
//Adds new h1 to the DOM

The contents of an existing DOM element can be changed by isolating the content of the node or the HTML that the node contains and changing that content. For example if we had a div that we wanted to turn into a button, we could use the following code to do so.

document.getElementById("ourDiv").innerHTML = 
"<button>Click me!</button>";

If we wanted to now change the text inside the button when it is clicked we could do so by writing a function that would trigger when the button is clicked that would run either option in the following code.

const btn = document.querySelector("button")btn.innerText = "Clicked!";btn.textContent = "Clicked!";

A node can be removed by simply calling remove on the node or by removing it as a child from its parent node, as shown below.

document.querySelector("p").remove()
//Removes first p tag from pagenode.removeChild(child);
//Removes child node from parent node

Manipulating Element Attributes

To add an attribute to an element the node’s attribute can be assigned a value. This same format can be used to modify existing attributes.

node.attribute = attributeValue

The following code also can be used to add a new attribute to an element.

element.setAttribute("attributeName", attributeValue)

An attribute can be removed from an element using the following code;

element.removeAttribute("attributeName")

Manipulating Element Styling

An element’s style can be modified by making a CSS styling declaration and using the style property.

element.style.stylingProperty = stylingValue
element.style.backgroundColor = "blue"
element.style.font-size = 12pt

Triggering DOM Changes

Changes to the DOM are triggered by events. These events are actions that a user takes when interacting with a webpage. There are actions that can be triggered by acting on a particular element and actions that can be triggered by interacting with the entire window. In order to use an event to trigger an action, an event listener must be attached to the window or to a node.

To attach an event listener to a node the following code can be used. First the node or window is specified then an event type, then the name of the function that the event should trigger. Other parameters can be specified to indicate how the event listener should behave. For example, the parameter “once” can be added to ensure that the event is triggered no more than once. If the event listener is invoked once the listener is then removed.

targetNode.addEventListener("eventType", fuctionToTrigger);

For more information about different types of events visit the following link.