Hey!! Friends, welcome to our new article of javascript tutorial beginners. Here we will start from where we finished in the previous article. Previously, we talked about the Functions and Scope of javascript Tutorials for Beginners. Here we started the tutorial Dom with Javascript.
If you missed the previous article, then please check once Functions in Javascript 105.
Dom manipulation:
As a web developer, anyone frequently needs to manipulate the DOM. The object model that uses by browsers to specify the logical structure of web pages, and based on this structure to render the HTML elements on the screen.
HTML defines the default DOM structure. In many cases, we may want to manipulate this with JavaScript, usually in order to add extra functionalities to a site.
The HTML DOM (Document Object Model)
When any web page is loaded, the browser generates a Document Object Model of that page.
The HTML DOM model is constructed as a tree of Objects:
The HTML DOM Tree of Objects
With the object model, JavaScript makes all the potential it needs to create useful HTML:
- Window object − Top of the hierarchy. It is the maximum element of the object hierarchy.
- Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.
- Form object − Everything enclosed in the <form>…</form> tags sets the form object.
- Form control elements − The form object contains all the elements defined for that object, such as text fields, buttons, radio buttons, and checkboxes.
The HTML DOM methods are actions that we can perform (on HTML Elements).
The HTML DOM properties are values (of the HTML Elements) that we can set or change.
The getElementById Method
The most common way to access the HTML element is to use the id of the element.
In the given an example above the getElementById method used id="demo" to find the element.
The innerHTML Property
The very easy way to get the content of an element is by using the innerHTML property.
innerHTML property is useful for getting or replacing the HTML content elements.
The internal HTML property can be used to get or replace any HTML element, including <html> and <body>.
The HTML DOM Document Object
The way a documented content is accessed and modified in javascript is called the Document Object Model, or DOM. The javascript Objects are organized in a hierarchy. This hierarchical structure is applied to the organization of objects in a Web document.
- Window object − Top of the hierarchy. It is the utmost element of the object hierarchy.
- Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.
- Form object − Everything enclosed in the <form>…</form> tags sets the form object.
- Form control elements − The form object contains all the elements defined for that object, such as text fields, buttons, radio buttons, and checkboxes.
Finding HTML Elements
| Method | Description |
| 1. document.getElementById(id) | Finding an element by element id |
| 2.document.getElementsByTagName(name) | Find elements by tag name |
| 3.document.getElementsByClassName(name) | Find elements by class name |
Changing HTML Elements
| Property | Description | |
| 1. element.innerHTML = new html content | Change the inner HTML of an element | |
| 2. element.attribute = new value | Change the attribute value of an HTML element | |
| 3. element.style.property = new style | Change the style of an HTML element | |
| Method | Description | |
| 1. element.setAttribute(attribute, value) | Change the attribute value of an HTML element |
Adding and Deleting Elements
| Method | Description | |
| 1.document.createElement(element) | Create an HTML element | |
| 2.document.removeChild(element) | Remove an HTML element | |
| 3.document.appendChild(element) | Add an HTML element | |
| 4.document.replaceChild(new, old) | Replace an HTML element | |
| 5.document.write(text) | Write into the HTML output stream |
Finding HTML Elements by Class Name
If we want to find all HTML elements with the same class name, then use getElementsByClassName().
This given an example returns a list of all elements with class="intro".
For example:
var x = document.getElementsByClassName("intro");Summarizing DOM
So, to summarize what is DOM,
- The HTML DOM is an admitted guideline for accessing, updating, adding, or removing HTML elements.
- DOM provides a Structure representation of an HTML document.
- An HTML document is completely built using objects. DOM represents it in an objected-oriented way that can be managed using scripting languages like javascript.
- All the articles in the HTML report are hierarchically attached. The document object forms the root of all objects.
There are three kinds of objects:
- The Core object (aray,math,etc)
- User defined object(myobject,student,employee,etc)
- Host object(h1,document,p,etc)
Finding HTML Elements
| Method | Example |
| 1. Finding HTML elements by id | var myElement = document.getElementById(“intro”); |
| 2. Finding HTML elements by tag name | var x = document.getElementsByTagName(“p”); var x = document.getElementById(“main”); var y = x.getElementsByTagName(“p”); |
| 3. Finding HTML elements by class name | var x = document.getElementsByClassName(“intro”); |
| 4. Finding HTML elements by CSS selectors | var x = document.querySelectorAll(“p.intro”); |
| 5. Finding HTML elements by HTML object collections | var x = document.forms[“frm1”]; var text = “”; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + “<br>”; } document.getElementById(“demo”).innerHTML = text; |
Creating new HTML elements using HTML DOM
We can create HTML elements using Javascript. Consider the following HTML code.
<body>
<p>Some text</p>
</body>Now you require to create a <p> tag inside <body> using Javascript. How can you do that? Take a look at the mentioned code snippet.
var myParagraph = document.createElement("p"); // Create a <p> element
var myText = document.createTextNode("text added using JS");
// Create a text node that has the text for <p>
myParagraph.appendChild(myText); // Append the text to <p>
document.body.appendChild(myParagraph); // Append <p> to <body>we can see that Javascript makes use of three methods i.e. createElement(), createTextNode(), and apppendChild() to create the HTML element and append them in your HTML.
JavaScript HTML DOM Animation
A Basic Web Page
For Example:
<!DOCTYPE html>
<html>
<body>
<h1>This is my First JavaScript Animation</h1>
<div id="animation">here,my animation will go </div>
</body>
</html>Create an Animation Container
All animations should be related to a container element.
JavaScript DOM Styling
Styling Elements in DOM with JavaScript
We can also apply style on HTML elements to change the visual presentation of HTML documents dynamically using JavaScript. And we also can set almost all the styles for the elements like fonts, colours, margins, borders, background images, text alignment, width and height, position, and so on.
In the following part, we’ll explain the various methods of setting styles in JavaScript.
Setting Inline Styles on Elements
Inline-styles are connected directly to the specific HTML element using some style property. In JavaScript, the style property is used to get or set the inline style of an element.
The following example will set the colour and font properties of an element with id="intro"
For Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Add Inline Styles to an Element</title>
</head>
<body>
<p id="intro">This is an example of Inline Styles.</p>
<p>This is another example of Inline Styles.</p>
<button type="button" onclick="setStyle()">
Set intro paragraph styles</button>
<script>
function setStyle() {
// Selecting element
var elem = document.getElementById("intro");
// Appling styles on element
elem.style.color = "blue";
elem.style.fontSize = "18px";
elem.style.fontWeight = "bold";
}
</script>
</body>
</html>The Output:
This is an example of Inline Styles.
This is another example of Inline Styles.
FAQs in Dom with Javascript
Ans: True
Ans: As a Tree structure.
Ans: getElementsByClassName
Above all, we learned about The functions in javascript, Scope, and Closure, which are a very important topic of JavaScript. In the coming article, we will learn more about different topics.
So,Please stay with us on this journey 🙂
Very nice explanation. I think I’ll be an expert like you if I keep reading your posts 🙂
Nice
Nice content
Nice explanation
Nicely explained as always..keep it up dear
Great job
Informative content 👌👌
All the points are very beautifully explained!!
Great work 👏
Good one
Amazing ❤️
Wow great work