JavaScript HTML DOM Objects
With HTML DOM, you can access and change all elements of an HTML document using JavaScript. DOM; It serves as an interface for structured languages such as HTML, SVG, and XML. With Dom, it is possible to access the document like a tree and change the structure and style of the document.
HTML DOM(Document Object Model)
When the browser loads a Web page, it also creates the DOM object. The loaded DOM provides a set of nodes and objects for the document. Events and triggers can also be added with nodes. In short, it is used to connect the programming language to the WEB page.
The DOM model creates objects in a tree structure as follows.
JavaScript has all the necessary powers to edit the HTML document using the Object Model. We can perform all operations on the document as follows.
JavaScript can modify all HTML elements on the page.
JavaScript can modify all HTML attributes on the page.
JavaScript can change all CSS styles on the page.
JavaScript can remove attributes from the existing HTML document.
JavaScript can add new HTML elements and attributes.
JavaScript can react to all HTML events on the page.
JavaScript can create new HTML events.
In this article you will learn:
Changing the content of HTML tags
Changing the style of HTML tags
How to react to DOM events
Creating and deleting HTML tags
What is HTML DOM?
As I mentioned above, HTML DOM is a standard object and programming interface.
As an object, the HTML tag has:
HTML tags are objects.
Features of HTML tags
Methods to access HTML tags
Events of all HTML tags You can operate on elements with HTML DOM methods.
You can read and change the values of elements with HTML DOM properties.
DOM Programming Interface
You can access the entire HTML DOM tree with JavaScript.
All HTML tags are created as objects in the DOM.
The programming interface provides methods and properties for each tag.
Property provides the opportunity to read and change the tag value (such as changing the content).
Method allows you to perform actions on the tag (such as adding new tags).
Example: In the example below, the text inside a tag whose id value is test has been changed.
In the example, the getElementById method shows the innerHTML property.
document.getElementById("test").innerHTML = "Hello JavaScript";
getElementById Method
It is one of the most common methods used to access an HTML tag. It uses the id attribute of the tag.
innerHTML Property
It is the easiest way to learn the content of an HTML tag. It is possible to get or change the content of the tag with innerHTML.
HTML DOM document Object
The document object represents the web page. To access any element within the page, you have to start with the document object. Some document methods used to edit HTML tags are shown below.
Choosing HTML Tags
document.getElementById(id): Gets the first record matching the id attribute.
document.getElementsByName(name): Returns all records matching the name attribute as an array.
document.getElementsByTagName(tagname): Returns all records matching the tag name as an array.
document.getElementsByClassName(className): Returns all records matching the class attribute as an array.
document.querySelector(selector): returns the first record matching the selector.
document.querySelectorAll(selector): return all records matching the selector as an array.
You can also access HTML objects as a list with the following document properties. It retrieves the objects in the HTML document as an array list.
Note:
body, head, documentElement, title return a single object. Others return an array of objects.
document.anchors ⇨ Used to access all links on the page.
document.body ⇨Used to access the Body object
document.documentElement ⇨Used to access the entire document starting from the HTML root.
document.embeds ⇨ is used to access attachments.
document.forms ⇨ Used to access the forms on the page.
document.head ⇨ is used to access the head tag.
document.images ⇨To access the images on the page
document.links ⇨ Used to access links on the page (objects with an href) document.scripts ⇨ Used to access the Script files loaded on the page.
document.title ⇨ Used to access the page title.
Example: Using document.getElementById
var object= document.getElementById("first");
console.log(objects);
Example: using document.getElementsByName
var objects= document.getElementsByName("author");
console.log(objects);
Example: using document.getElementsByTagName
var objects= document.getElementsByTagName("p");
console.log(objects);
//Use CTRL+SHIFT+I to open the Console.log screen.
Example: using document.getElementsByClassName
var objects= document.getElementsByClassName("box");
console.log(objects);
Example: Using document.querySelector
var objects= document.querySelector(".box");
console.log(object); //.Retrieves the first record matching the box. # is used for id, as in the CSS definition.
// Note: Use CTRL+SHIFT+I to open the Console.log screen.
Example: using document.querySelectorAll
var objects= document.querySelectorAll(".box");
console.log(object); //.Returns all records matching the box.
// Note: Use CTRL+SHIFT+I to open the Console.log screen.
tag.innerHTML: Used to read and change the inside of the tag.
tag.attribute: Used to change the attribute of the tag.
tag.setAttribute(attribute, value): Used to change the attribute of the tag.
tag.style.property: Used to change the style of the tag.
tag.classList: It is used to perform operations such as deleting, changing, adding, and learning the class list on the class attribute of tags.
Example: using tag.innerHTML
var object= document.getElementById("first");
// read the content of the tag
alert(object.innerHTML);
//change the content of the tag
object.innerHTML="Important: The content of the tag has changed!!!";
Example: using tag.attribute
//we chose one label
var selection= document.getElementById("hobi2");
selection.checked=true;
Example: using tag.attribute
var selection= document.getElementById("IDID");
selection.disabled="disabled";
Example: using label.setAttribute(attribute, value)
In the example, the forEach method is used to act on the selected objects.
.red{
background:red;
color:#fff;
}
//we selected all box objects as an array
var objects= document.querySelectorAll(".box");
//You can read array elements using foreach.
objects.forEach(function(object){
object.setAttribute("class","red");
});
Example: using tag.style.property
You can use this feature to change individual style properties or read the style value.
//we selected all box objects as an array
var tag= document.getElementById("first");
//change label style
label.style.color="#4bc334";
label.style.fontSize="36px";
label.style.fontStyle="italic";
//read tag style
alert(label.style.fontSize);
Example: using label.classList
Run the following examples line by line.
var label=document.getElementById("first");
label.classList.add("frame");
label.classList.add("red");
//If there is no hide class, it adds the hide class.
label.classList.toggle("hide");
//If the condition is met, if there is no hide class or if there are attachments, it will remove it.
var i=5;
label.classList.toggle("hide", i < 10 );
//Returns true if the frame exists.
alert(label.classList.contains("frame"));
// We can add and delete classes in bulk.
div.classList.add("frame","red");
div.classList.remove("frame","red");
document.createElement(element): Creating HTML tag
document.removeChild(element): Delete HTML tag
document.appendChild(element): Adding HTML tag
document.replaceChild(element): Replace HTML tag
Example: adding a new option to select
We created the object with createElement.
With setAttribute, a new number is entered into the value attribute.
We add the value “Beşiktaş” into the tag created with innerHTML.
We added the option value created into the select with appendChild.
var teamList=document.getElementById("team");
var team= document.createElement("option");
team.setAttribute("value","2");
takim.innerHTML="Beşiktaş";
teamList.appendChild(team);
There are two methods to add an event to an HTML tag.
Method 1: Events can be added to HTML tags with the addEventListener method.
Method 2: You can add an event to the HTML tag with the event property.
Example: In the example below, when the tag with the first id is clicked (onclick), the specified anonymous function will run and the screen will be displayed.It will give a warning.
var label=document.getElementById("first");
label.onclick=function(){
alert("clicked on the first paragraph");
}