Understand and learn about Javascript HTML DOM. DOM is an API provided by the browser to communicate with programming languages. The function of HTML DOM itself is to make web pages more dynamic and interactive. Like the primary function of using Javascript itself makes web applications more interactive and dynamic in presenting information on web pages.
When you decide to learn JavaScript, you automatically have to learn HTML DOM.
Why?
The main goal of Javascript on the web is to make web pages look dynamic.
This can be done by Javascript with the help of DOM. And DOM is a developer tool to communicate with web pages.
I think studying DOM is the main goal for us to learn Javascript. So it is obligatory that you know and understands the DOM.
Want to know the best part?
I will share the Javascript Dom tutorial for those of you who are starting to learn Javascript with examples that are easy to understand
Table of Contents
UNDERSTANDING DOM (DOCUMENT OBJECT MODEL)
DOM is an API (Application Programming Interface) that is provided by the browser to web programming languages to communicate and interact.
Simply put, DOM is a set of rules for manipulating the appearance of web pages. DOM isn’t bound by JavaScript and is entirely not part of JavaScript. DOM can be accessed with other client-side languages.
Tags or elements in HTML are arranged in the DOM. By using JavaScript, we can manipulate all HTML tags.
The DOM isn’t just for HTML documents. DOM can also be used for XML and SVG documents.
How to use Javascript DOM?
As we already know, DOM is an object to model an HTML document.
The DOM object in javascript is called document. This object contains everything we need to manipulate HTML.
If we try to type a document in the Javascript console, then the HTML code will appear.
Inside the document object, there are functions and attributes that we can use to manipulate HTML documents.
In the previous tutorial, I used an object document to manipulate DOM HTML using a document.write() method.
document.write() is used to write to HTML documents.
Example:
Try typing the following code in the Javascript console.
1 2 | document.write("Hello World"); document.write("Learning Javascript") |
Result :
Access and manipulate HTML objects
The document object is a model of an HTML document. This object contains a collection of functions and attributes in the form of objects from HTML elements that can be described as DOM tree structures like this:
A document has several functions that can be used to access html elements and attributes. Here is the Javascript DOM method and event.
getElementById()
The getElementById() method is used to extract elements based on the id attribute.
Example:
We have a container div with id = foe
1 | <div id="foe"></div> |
To access the div element with id “foe”, use the getElementById() method:
1 | let foe = document.getElementById("foe"); |
The foe variable will be a DOM object from the element we choose.
1 | console.log(foe); |
getElementsByName()
the getElementsByName() method used to extract elements based on the name attribute.
Example:
1 | let foe = document.getElementsByName("foe") |
getElementsByClassName()
The getElementByClassName() method used to select elements based on class attributes.
Example :
1 | let foe = document.getElementsByClassName("foe") |
What if we have many elements with the same class?
The collection of selected elements becomes an array. The array will contain DOM objects from selected elements.
Example:
1 2 3 | <p class="foe">this is paragraph one</p> <p class="foe">this is paragraph two</p> <p class="foe">this is paragraph three</p> |
1 2 3 | let foe = document.getElementsByClassName("foe") console.log(foe) console.log(foe[1]) |
getElementsByTagName()
The getElementByTagName() method is used to retrieve or select elements based on the tag name.
Example:
1 2 3 4 | <p class="foe">this is paragraph one</p> <p class="foe">this is paragraph two</p> <p class="foe">this is paragraph three</p> let foe = document.getElementsByTagName("p") |
If an element with the same tag name is more than one, as well as getElementByClassName(), the collection of selected tag will be an array.
1 2 | console.log(foe.length); // result : 3 |
querySelector()
The querySelector () method used to get the first element from a collection of elements that are based on the class or tag name that is searched for.
Example:
1 2 3 4 | <p class="foe">first paragraph</p> <p class="foe">second paragraph</p> let foe = document.querySelector("p"); console.log(foe.innerHTML) |
querySelectorAll()
The querySelector() method used to get all elements based on the class or tag name that is searched for.
Example:
1 2 3 4 | <p class="foe">first paragraph</p> <p class="foe">second paragraph</p> let foe = document.querySelector("p"); console.log(foe.innerHTML) |
createElement()
the createElement () method used to create new HTML elements.
Example:
1 | let foe = document.createElement("div") |
with the code above, a new div element will be created, but it will not appear on the web page because it has not been added to the body of the document.
Add the following code to display on the html page
1 2 | foe.innerHTML = "Hello, i created from createElement method " document.body.append(foe); |
appendChild()
appendChild() method like append() method, The main difference is the appendChild() is a DOM function, meanwhile append() method is a JavaScript function.
innerHTML
innerHTML is a property. innerHTML used to change the contents of an element
Example:
1 | document.getElementById("foe").innerHTML = "You change" |
style
style is a property used to change the css of an element.
Examples of ways to use DOM style javascript:
1 | document.getElementById("foe").style.backgroundColor = "red"; |
setAttribute()
setAttribute() is a method used to add new attributes to an element
Example:
1 2 3 | <p id="foe">HELLO</p> let foe = document.getElementById("foe") foe.setAttribute("class","red"); |
getAttribute()
The getAttribute() method used to get the contents of an attribute on the element
Example getAttribute() Javascript:
1 2 3 | <p id="foe" class="red">HELLO</p> let foe = document.getElementById("foe") foe.getAttribue("class"); |
addEventListener()
addEventListener() is a method that functions to create events (click, change, blur, etc.) for DOM manipulation.
Example of using addEventListerner
1 2 3 4 5 | <button id="button1">Click me</button> <select id="select1"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> </select> |
1 2 3 4 5 6 7 | document.getElementById("button1").addEventListener('click',function(){ console.log("button1 clicked") }); document.getElementById("select1").addEventListener('change',function(){ let value = document.getElementById("select1").value; console.log("select1 value change to : "+value) }); |
I will not discuss all of the event types provided by Javascript, you can read them directly here https://developer.mozilla.org/en-US/docs/Web/API/Event/type
window.onload
window.onload is an event to execute javascript code after the website page has finished loading.
Example:
1 2 3 4 | function call_me(){ console.log("i called after load finish") } window.onload = call_me |
Conclusion
DOM Javascript is the main component of making interactive web.
Using DOM, Javascript can communicate with HTML elements via the API.
There are still many DOM Javascript events and methods that I did not discuss on this occasion, but among the many events and methods in the DOM API javascript, the list above is the one that is used most often.
Thus my tutorial about Javascript DOM HTML, may you need another Javascript tutorial, please read here. Hope useful 🙂
Leave a Reply