DOM Element Id as global variable

Hey Developers,

I have created a detailed explanation video about how global variables are created when the dom elements are having id attribute.

Introduction

• Javascript is a client and server side programming language which basically makes the webpages as dynamic.
• In Javascript, HTML DOM elements can be accessed by an object called document.
• Javascript variables will be created to access the dom elements by their id, tagname, classname, css selectors by using the respective methods inside the document object, which is accessible in Javascript.
• Instead of creating the variables, the html element can also be accessed if it has id attribute.

Explanation

• The value of the id attribute for all elements are made available as properties of the global window object. Since window is the global object in the browser, it is accessible as a global variable.
• Website I refered - https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/

Final thoughts

• The advantage of this technique is If you are having more number of dom elements, then you need to create as much as variables. But, you can directly access the dom elements by without creating any external variables.
• The convention for accessing dom elements is only by creating variables.

• One more factor is you can rename the variable and create any number of variable for the single dom element with the different variable name.

  • Thank You.

Support Me

• Youtube - Vuelancer

• Github - Vuelancer

• Scrimba

• Vuelancer - Patreon