Dom with Javascript 106 – Web Development

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.

What’s inside:
Dom manipulation
The HTML DOM
Summarizing DOM
JavaScript DOM Styling
FAQs:

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

dom with javascript
Dom with Javascript.

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

MethodDescription
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
Dom with Javascript.

Changing HTML Elements

PropertyDescription 
1. element.innerHTML =  new html contentChange the inner HTML of an element 
2. element.attribute = new valueChange the attribute value of an HTML element 
3. element.style.property = new styleChange the style of an HTML element 
MethodDescription 
1. element.setAttribute(attribute, value)Change the attribute value of an HTML element 
Dom with Javascript.

Adding and Deleting Elements

MethodDescription 
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
Dom with Javascript.
dom with javascript
Dom with Javascript.

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

MethodExample
1. Finding HTML elements by idvar myElement = document.getElementById(“intro”);
2. Finding HTML elements by tag namevar x = document.getElementsByTagName(“p”); var x = document.getElementById(“main”);
var y = x.getElementsByTagName(“p”);
3. Finding HTML elements by class namevar x = document.getElementsByClassName(“intro”);
4. Finding HTML elements by CSS selectorsvar x = document.querySelectorAll(“p.intro”);
5. Finding HTML elements by HTML object collectionsvar 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;
Dom with Javascript.

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:

JavaScript Add Inline Styles to an Element

This is an example of Inline Styles.

This is another example of Inline Styles.

FAQs in Dom with Javascript

By modifying the DOM, the contents on the page also gets modified.

Ans: True

Document object is part of ____________ object.

Ans: As a Tree structure.

Which statement accesses HTML classes?

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 🙂

14 thoughts on “Dom with Javascript 106 – Web Development

Leave a Reply

Your email address will not be published. Required fields are marked *