document object in javascript : what it is?

Posted under javascript sample code On By mohammed.mutawe

document object in JavaScript

Talking about document object in JavaScript may be a little long in this lesson, perhaps it is a good time to start providing some JavaScript references that few know, including Dom, which is access to the Document property in JavaScript.

You will be able to use and collect that information that is available on your page with the browser. The JavaScript language gives you many features and also ways that will make a change in different and various ways.

 

Why document object?

Accessing the dynamics of pages through JavaScript is considered absolute freedom in controlling the sources of this page. If we want to define a document object in JavaScript, you will find that it is an HTML object whose information is collected, accessed and influenced by JavaScript, which is in fact an HTML code with unique addresses that is Assign it to one of the JavaScript objects, then work on changing some of its properties directly when the page is launched or when a specific button is clicked.

The access to the structure of page tags has brought about a fundamental change in web pages thanks to the JavaScript language, which provided you with a good ability to control the structure of HTML data and the markup language CSS as well.

How to use DOM?

Using the DOM in JavaScript is related to the tags you want to work on, and since web pages are full of multiple tags and under different names, our first code should be as follows:

<body>
 <h1>My First Page</h1>
 <paragraph alt="myPara">Welcome to our first paragraph!</paragraph>
</body>

As you can notice here, I created the first HTML page naturally, and all we want here is a few tags to get the idea well and easy to implement at the beginning, and the H1 and Paragraph tags are both considered elements of JavaScript and the texts inside are considered Child Node.

Note here that alt is an Attribute of the Paragraph tag that denotes an alternate text and can also be accessed by calling the Attribute property of the same document object in JavaScript.

You can get direct connection to tags via the DOM in JavaScript. This is done via getElementById or getElementByTagName, which are object-oriented functions of the same language, because JavaScript supports object oriented just like other programming languages.

The DOM property in JavaScript enables you to build objects by:

  • Element Creation.
  • Text Node Creation.

The addition of elements in JavaScript is translated to createElement() and the texts via createTextNode() which is the secret that I will tell you about, as I rely on these two functions in building the Notification interfaces and the conversation system on my website. In the databases, go to the server page and return the instantaneous results via temporary dummy elements.

If you want to delve into the topic a lot, look at social networking sites such as Facebook, LinkedIn and Instagram, and you will see that all of these sites have built their interfaces using document object in JavaScript , However I have a lot to say in this blog just review the lessons and you will not lose anything.

 

Color Property

There are a lot of Property that we can use when adding elements and controlling private tags in HTML and CSS as well. For example, if we want to control the color of the element via JavaScript, we use functions such as fgColor and bgColor, and suppose we want to modify some of the previous tags as follows:

<body>
 <h1>My First document object in javascript</h1>
 <paragraph id="testing">Welcome to our first paragraph!</paragraph>
 
 <button onclick="createFirstDOM()">Click Me</button>
</body>

<script>
function createFirstDOM()
{
     document.getElementById("testing").style.color = "#2b2d2d";
     document.getElementById("testing").style.fontSize = "30px";
     
     alert("I will resize Paragraph again");
}
  
</script>

 

Don’t think that things are starting to get complicated, all I have done here is access the HTML tag through the Javascript DOM, but I was able to control the CSS features through document.getElementById, which is the basics of the DOM in JavaScript.

 

Element Creation

Now that I have explained access to colors in the browser, I will move to a stage of medium difficulty, which is adding an element that was not previously declared in the HTML tags, and then I will place it in the middle of the screen when I click on Click Me. Perhaps the following example is the true meaning of document object in JavaScript:

<body>
 <h1>By Using Element Creation</h1>
 
 <button onclick="createFirstDOM()">Click Me</button>
 
 <span id="ConnectChild"></span>
 
</body>

<script>
function createFirstDOM()
{
     var title = document.createElement("DIV");       
         var text = document.createTextNode("Welcome to our first paragraph!");

        title.appendChild(text);
        
        
   document.getElementById("ConnectChild").innerHTML = title.innerHTML;
}
  
</script>

 

I know that this code is difficult for beginners, I did a simple trick in the browser which is to create an element from nothing and if you want to know what I did well I will tell you.

I defined a variable title and added the DIV element, which is a tag from HTML, but it is added by a capital letter when dealing with JavaScript, and as I said earlier, adding any text via Node is done with the createTextNode function.

But the browser will not be able to see this element and in order to achieve this we have to use the appendChild function to implement and show the DIV tag in the DOM way. Access identifiers or IDs.

Summary

Everyone may wonder about the reasons for using document object in javascript, and some say it is not necessary to create accessible elements for HTML pages, but there are events that the user does that the HTML page cannot know in advance because it is a structural descriptive language and not a logical language.

Another important issue is that if you use some of the features of the page, JavaScript will help you, and if you do not use it, the browser will maintain your page speed without being affected by the hidden data capsule.

Sometimes developers find it difficult to explain their ideas about the technologies they have created and developed in programming languages, but the most important question remains, how long did it take them to build a giant language like JavaScript that has a lot to offer in the future of web browsers.

 

References

  •  Partially referenced with Third Edition JavaScript Book.

Leave a comment

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