Web Programming TutorialsLearn DOM Nodes and Properties in JavaScript

Learn DOM Nodes and Properties in JavaScript

DOM stands for Document Object Model. When an HTML file is loaded into browser it become a webpage and then browser create DOM of that webpage. By using DOM, JavaScript can do anything with webpage and converts the webpage into dynamic HTML. In JavaScript, The Document Object Model looks like a tree of objects shown below.

1
In this tree, the highest tag called the top node.

What JavaScript can do with DOM in our HTML document?

  • JavaScript can change any text from any HTML tag.
  • JavaScript can change HTML elements and its attributes as well.
  • JavaScript can remove any HTML element and can add new HTML elements as well.
  • JavaScript can be effective for HTML events.
  • JavaScript has the full authority to change, remove and add new CSS styles.
  • It actually implements new styles from itself.
  • JavaScript considered every HTML element as an object. So it works with HTML in the way of objects.
  • All of the DOM consist of Element as an object and its nodes.
  • Simply JavaScript interaction with HTML tags, attributes and CSS styles is called DOM.

Note: DOM is case sensitive! So be careful! Place small letter where you find some small letters, and place capital letter where you find capital letters in the examples below.

Why

Sometimes we need to change things in our website according to the users need. We also want to print or get some JavaScript results to an HTML element.
For example, we made a function which can add 2 values and to get the result in a stylish way. So we can directly print our results to an HTML element by using the DOM. Here is a working example:

<div id=”div1”></div>
<script>
	var val1  = 4;
	var val2 = 6;
	var ans  = val1 + val2;
	document.getElementById(“div1”).innerHTML = ans;
</script>

In the above example, I’ve made 2 variable with some values. In the next variable, I’m getting total sum of that 2 variables. And in the last line of code, I’m accessing to an HTML element by using DOM and applying a method .innerHTML to that HTML element which is show below.

document.getElementById(“div1”).innerHTML = ans;

Every JavaScript programmer knows about the writing method in JavaScript because it’s a common thing to write anything on the page using JavaScript.

document.write();

Above method is also a part of DOM. Document is the object which is considered writing to the whole web page and write(); is a method to write on the document.

window.alert();

Above method is a another method in JavaScript to create an alert box to the browser window. This method uses window object and effects on the whole window not just the document. Mean it can hang complete browser window. Maybe you notice that you even can’t refresh your page if an alert has got active.

Changing text

For changing simple text from HTML through JavaScript, we have to use innerHTML method as we discussed before. But we can use it in different ways. We can select the HTML element by using its tag name, It ID or with its class name. Let me explain how!

<div id=”div1”></div>
<div class=”div2”></div>
<p></p>
<script>
	document.getElementById(“div1”).innerHTML = “This is the JavaScript updated text 1”;
	document.getElementsByClassName(“div2”).innerHTML = “This text written by JavaScript with its class name”;
	document.getElementsByTagName(“p”).innerHTML = “We are using tag name method here”;
</script>

First, we just made three HTML elements, the first element has an ID, and the second element has a class and the third element has just its tag name and nothing.

To select an HTML element by using its id:

document.getElementById(“div1”);

To select an HTML element by using its class name:

document.getElementsByClassName(“div2”);

To select an HTML element by directly using its tag name:

document.getElementsByTagName(“p”);

We can also store these informations in JavaScript variables:

var get_div1 = document.getElementById(“div1”);
var get_div2 = document.getElementById(“div2”);
var get_tag_data = document.getElementByTagName(“p”);

These variables are completely usable.

var get_div1 = document.getElementById(“div1”);
get_div1.innerHTML = “This is the new text”;

We’ve done the same thing here in the above example as we did in some previous examples. But what is new is just we actually declared a variable and assigned the HTML object with that variable and then perform actions by using innerHTML method.
Instead of updating, we can remove text from any tag as well. Just leave the innerHTML’s property empty:

var get_div1 = document.getElementById(“div1”);
get_div1.innerHTML = “”;

Changing attribute value:
To change the attribute value of any HTML element without variable:

<img id=”image1” src=”image1.jpg”>
<script>
document.getElementById(“image1”).src = “newImage.jpg”;
</script>

I used an image to show how to change an attribute’s value by using DOM method but we can change any attribute at all as per the requirement:

<table id=”table1” border=”1”>
<tr>
<td>some text</td>
</tr>
</table>
<script>
document.getElementById(“table1”).border = “2”;
</script>

In the above example I changed the border attribute from the table tab which has table1 id.

Changing CSS value:
You have to do a plenty of things if you want to enjoy CSS with DOM.
The property for CSS is called .style.property = new style in DOM.

<div id=”div1”>Hello world!</div>
<script>		
var get_div1 = document.getElementById(“div1”);
get_div1.style.color = “red”;
get_div1.style.backgroundColor = “blue”;
get_div1.style.margin = “10px”;
</script>

Note: CSS properties which has two-words like background-color, margin-top, box-shadow must be written in camel style without hyphen like backgroundColor, marginTop, boxShadow etc…

Camel style writing is a special style to write and code something in any language. Camel style text must consist of two or more words. It can be used when we are declaring a variable, array, function or something like this. But it’s necessary to use camel style here in Dom with style property. Because this is the only way declared in JavaScript.

Thus we have finished learning on DOM Nodes and Properties in JavaScript, You can post your queries regarding this topics in comments sections below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -