What is the DOM?
- HTML elements as objects
- Properties and events of the HTML elements
- Methods to access the HTML elements
All other objects on your website are owned by the DOM Document. This means you must always start at the document in order to access any object on your webpage. As well as properties and methods that enable us to access and modify our website, it contains many other useful properties and methods.
Finding HTML Elements
Get element by ID
A single element is retrieved by its id using the getElementById() method. The following example shows how to retrieve a single element:
var items = document.getElementsByClassName(‘list-items’);
We are going to save the variable header title with the element with the id of the header title.
Get elements by class name
The getElementsByClassName() method returns a list of all the elements found in an object using an array.
var items = document.getElementsByClassName(‘list-items’);
We are getting all the items with class list-items and storing them in a variable.
Get element by tag name
By using the getElementsByTagName() method, we can also get our elements by tag name.
var listItems = document.getElementsByTagName(‘li’);
Our HTML document contains all li elements, so we are going to get them as variables.
When a CSS selector is specified, the querySelector() method returns the first matching element. Thus, you can get elements according to their ids, classes, tags, and all other valid CSS selectors. These are only a few of the most commonly used selectors.
Get by id:
var header = document.querySelector(‘#header’)
Get by class:
var items = document.querySelector(‘.list-items’)
Get by tag:
var headings = document.querySelector(‘h1’);
Get more specific elements:
Selectors allow us to access more specific elements as well.
Here, we are looking for both a tag and its class simultaneously, and returning the first element that passes the CSS Selector.
With querySelectorAll(), all elements that fit the CSS Selector are returned instead of only those that match querySelector().
var heading = document.querySelectorAll(‘h1.heading’);
An array of h1 tags with a heading class is created by putting them all in this example.
Changing HTML Elements
By changing the HTML element’s properties, we are able to modify its content and appearance.
Changing the HTML
Changes can be made to the content of an HTML element by using the innerHTML property.
document.getElementById(“#header”).innerHTML = “Hello World!”;
Our example gets the element with the id header and sets the inner content to “Hello World””.
Another way to use InnerHTML is to put tags inside another tag.
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"
All already existing div tags are given a h1 tag.
Changing a value of an attribute
It is also possible to modify the value of an attribute using the DOM.
document.getElementsByTag(“img”).src = “test.jpg”;
Throughout this example, all *img/> tags point to test.jpg as the src.
Changing the style
Our HTML elements’ style property needs to be changed in order to change their style. We can do this with the following example syntax:
document.getElementById(id).style.property = new style
We can now test the example by changing the bottom border of an element to a solid black line:
document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;
In place of the normal CSS property names, the CSS properties should be written in camelcase. For instance, borderBottom should be written instead of border-bottom.
Adding and deleting elements
The next step will be to learn how we can add new elements and delete existing ones.
var div = document.createElement(‘div’);
With this method, we simply create a div element using a tagname instead of passing it through the createElement() method. Afterward, we just need to insert it into our DOM document and give it some content.
var newContent = document.createTextNode("Hello World!");
The content is created with a String parameter with the createTextNode() method and then an element is added before an existing div.
var elem = document.querySelector('#header');
The removeChild() method is used to delete an element.
Let’s examine how we can replace items now.
var div = document.querySelector('#div');
var newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"
The replaceChild() method is used to replace an element. There are two arguments in the above code, the first representing the new element and the second representing the element we wish to replace.
Directly writing HTML output into the output stream
document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);
In addition to taking multiple arguments, the write() method will append them in order of occurrence to the document.
input field change
Using the attributes on your tags, you can create events directly in HTML code. For example, here is an example of an onclick event:
<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1>
In the example given, the *h1/> text changes to “Hello””“Hello””“Hello”” as soon as you click the button.
As you can see in the next example, you can also call functions when an event occurs.
<h1 onclick=”changeText(this)”>Click me!</h1>
As soon as the button is clicked, we call the changeText() method with the element passed as an attribute.
document.getElementById(“btn”).onclick = changeText();
Assign Events Listeners
In the next section, we’ll take a look at assigning event listeners to HTML elements.
Our btn element is simply associated with a clickevent that triggers the runEvent method when clicked.
An element can also have multiple events assigned to it:
A DOM Document has a hierarchical relationship between its nodes. A tree-like structure can be seen in this arrangement. A node’s relationship to its child, siblings, and parent is often described using the terms parent, sibling, and child.
There is only one node with no parent at the top of the graph, which is called the root. HTML documents usually have a root tag called *html/>, since it has no children and is the top tag of the document.
Navigating Between Nodes
Nodes can be navigated using these properties:
The following example shows how you can get the parent element of an h1.
var parent = document.getElementById(“heading”).parentNode
Finally, my conclusion
Contact me via Linkedin or leave a comment below if you have any questions or feedback…Thanks!