A new look at javascript, emboldened with HTML, learn it out with SBerry wahoo!!

So DOM (Document Object Model) on which the HTML is based consists of elements, tags, attributes. Hence when the browser loads the page, it parses the HTML  and converts it into a DOM objects. These DOM objects will have many corresponding standard properties.

EG:
<input id="inputid" type="text" value="Embolden" >


contains many properties like accept, accessKey, align, alt, childNodes, className etc.
For element nodes, most standard HTML attributes automatically become properties of DOM objects. In addition, we can create custom properties, methods since the DOM objects are regular javascript objects.
inputid.mycustomprop={taste:"sweet", recipe_type:"long", receipe:"Gulab Jamun"};
console.log(inputid.mycustomprop.receipe); // logs "Gulab Jamun" in browser.
inputid.sayHello= function(){alert("Hello Gulab Jamun Eater");}
inputid.sayHello(); // alerts "Hello Gulab Jamun Eater

When Non standard attribute is specified for an element or tag then attributes are created on the DOM object and which are accessed using the getAttribute(name), setAttribute(name), hasAttribute(name), removeAttribute(name) methods.
EG:
< input id="inputid" type="text" value="Embolden" >


inputid.intent // undefined since intent is not a standard attribute, hence no property exist on the input element.
inputid.getAttribute("intent") // prints "PropertyAttributeIntent".

Summarizing:

DOM objects will have many corresponding standard properties along with properties created for the HTML attributes specified for that element.
However, the Mapping between the attributes and properties are not one to one.
When some non-standard attributes are specified then they are created as attributes for that element DOM Object and are accessed using the getAttribute, setAttribute, hasAttribute and removeAttribute methods.

Happy Learning 🙂