- It actually implements new styles from itself.
- All of the DOM consist of Element as an object and its nodes.
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.
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;
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.
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:
To select an HTML element by using its class name:
To select an HTML element by directly using its tag name:
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…