DOM is the short-term Document Object Model. JavaScript dom consists of HTML document, HTML elements, and the html page structure. We can change html documents and element styles with the help of JavaScript and manipulation.
Dom methods in JavaScript with examples
JavaScript dom is central in the concept of javascript programming. It is very important to learn javascript dom to become a javascript developer. If a javascript developer doesn't have a concept of javascript dom manipulation then he is not a javascript developer.
If you are a beginner or a student and you don't have a concept of javascript dom manipulation, then don't worry this article is for you.
In today's article, you will learn about JavaScript and manipulation. I will tell you about javascript dom manipulation in such an easy way that you have any confusion about javascript dom manipulation after reading this article till the end.
What is JavaScript DOM?
The word DOM means Document Object Model. JavaScript dom is implemented with HTML structure.
JavaScript Dom consists of three HTML terms first is Document which represents the whole HTML document. The second is Object(O), which represents all elements like title tag, link tag, p tag, etc. The third is the HTML Model(M) which represents the structure of the pages.
JavaScript Dom is also called HTML terms because it consists of three HTML terms, Document, Object, and Model.
JavaScript DOM manipulation is also called HTML DOM Tree(HDT) because javascript DOM is always implemented with HTML codes to HTML documents.
In javascript whenever we work with Dom we do just two things whether we get or set the value of an element with the help of javascript dom.
We can set or get any element value by getting the element ID or element class. We can also get the element value by getting the element tag name.
Whenever we edit a form through JavaScript or add an animation to any web page, we will do all this work only with the JavaScript get or set method.
JavaScript DOM Manipulaiton
- DOM Targeting Method
- DOM Set & Get Method
- DOM Selector
- Element Styling Through DOM
DOM Targeting Method
The DOM target method is easy but important in javascript DOM manipulation. To set or get any element value we need to use a javascript targeting method.
To change the the value or style of an element we need to get those elements by element tag name, element ID, or element class name.
For example, if we get an element by id then we write code in javascript "document.getElementbyId("your-id")". If we get an element by class then we write code in javascript "document.getElementsByClassName("your-class")". If we want to get an element through the element tag name then we write "document.getElementsByTagName(tag-name)".
Below is a method to get an element by class name:
var codingpea;
codingpea = document.getElementsByClassName("your-class");
console.log(codingpea);
DOM Set & Get Method
DOM set and get method is the second main used method in javascript dom manipulation. With the help of the DOM set and get the method we can get any HTML, any text, or any element attribute. Attributes are element class or element id.
Below is a code example to get inner html through element id:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CodingPea</title>
</head>
<body>
<h1 class="your-class">Heading</h1>
<p id="your-id">there is some content</p>
</body>
<script>
var codingpea ;
codingpea = document.getElementById("your-id").innerText;
console.log(codingpea);
</script>
</html>
Below is a code example to set the value of by element id:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CodingPea</title>
</head>
<body>
<h1 class="your-class">Heading</h1>
<p id="your-id">there is some content</p>
</body>
<script>
var codingpea ;
document.getElementById("your-id").innerText = "CodingPea";
codingpea = document.getElementById("your-id").innerHTML;
console.log(codingpea);
</script>
</html>
DOM Selector
DOM Selector is the short term of javascript dom set and gets method. With the help of this method, we can get element value without writing "document.getElementbyId("your-id")" or another code of line. In simple words, the dom sector is the shortcut of the dom set and get methods and it is the advanced term of the dom set and get method.
DOM Selector is also used to target html objects. It is a simple way to target any html element. There are two types of dom selectors in javascript. The first dom selector is querySelector and the second is querySelectorAll.
Element Styling Through DOM
This dom method is used to add some extra style to web pages. This dom method works like a CSS so that is why this method is also called javascript CSS. With the help of this dom method, we can change the style of any element.
Post a Comment