DOM manipulation
When a web page loads, the Document Object Model is created on the browser. It is described as being the logical structure of HTML documents. Through the DOM, we are able to use programming languages like javascript to manipulate websites and create dynamic sites. Here I will be talking about how JavaScript is used to change the content and elements of a website.
One of the most important parts a web page must contain is an HTML file, usually an index.html. Using a browser, we view the website, which shows our HTML files. You are able to view the DOM in chrome with DevTools in two ways. Either under the Elements tab or by the Console tab by typing document.
**open DevTools by going to the menu and right-clicking or selecting View -> Developer -> Developer Tools.
The DOM is also known as the DOM tree, because of its layout. It contains many objects called nodes. There are many kinds of nodes, One is the document object which is known as the root node, there are also element nodes, text nodes, and comment nodes.
Methods:
We can use javascript to manipulate HTML elements, this is usually done by first finding the element. There are a few ways to find an element, some of these methods are :
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
Document example:
<!DOCTYPE html>
<html>
<body> <h1>Document example </h1><div class="example">This is a class example </div>
<div class="example"> second class example</div><p id="demo"> this is an ID example</p>
<hr><ul>
<li>one tag</li>
<li>two tag</li>
<li>three tag</li>
<li>for tag</li>
</ul></body>
</html>
getElementById()
An element can be given Id’s that are unique, using getElementById returns the element object id property matches the string. Because they are unique this method is useful to access a specific element quickly.
const demo = document.getElementById("demo");getElementsByClassName()
Class names can be assigned on multiple elements. A class can be used to identify more than one element at a time. Unlike the getElementById, which returns one element, GetElementsbyClassName returns a collection of node elements, an array-like object that contains element nodes with the same class name. They can be accessed by index numbers(starting at 0) and can be iterated through to access each node.
This example shows us how we get the element by the class name and after we are able to change the background using iteration.
let example = document.getElementsByClassName("example");for (i = 0; i < example.length; i++) {
example[i].style.backgroundColor = 'yellow';
}
This iteration is to change every background color of this class to yellow, but you can change just one class element by using index numbers
example[0].style.backgroundColor = 'pink';getElementsByTagName()
This method looks for elements by their Tag names and also method returns a collection of all elements in the document. Its an array of element nodes and are also accessed by index numbers and by being iterated over.
var x = document.getElementsByTagName("li");In this example, we grabbed the node element by the Tag name LI and changed the inner text of only the first li tag.
Query Selectors methods
- querySelector()
When using the method querySelector() the return value is the first element in the document that matches the selector, or group of selectors entered.
To target a single element, we use the querySelector() method.
<p id="example">This is a p element with id of example.</p>(when we query an element with an id attribute, use hash # symbols, then they are class attributes use we use a. period symbol )
queryExample = document.querySelector("#example")querySelectorAll()
If we are trying to obtain a collection of elements, querySelectorAll is the best method to be used. You would also use iteration here to access all of the elements to be changed or by index to change one of the elements.
(usually used with class or tags)
<h2> class="example">A heading with class="example"</h2>
<p> class="example">A paragraph with class="example".</p>const test = document.querySelectorAll(‘.example’);