HTML-DOM and CSS-DOM Mapping in JavaScript

Post Views: 4

HTML-DOM Mapping

Many object properties are simply direct mapping to the attributes of the HTML element. In other words, there is a mapping directly between HTML Syntax and the DOM.

Ex:-

Above title can be accessed in DOM by
document.getElementById(“myid”).title

P tag’s title attribute is mapped to DOM property title in the above example that is the reason we can access title in DOM that way.

HTML-DOM Mapping

The mapping is direct between HTML attributes and the DOM properties with the following considerations:-

The mapping is direct if the attribute is a single non-reserved word, so an element’s title attribute is accessed via the corresponding DOM object’s title property.
The mapping will change case as camelCase if the attribute has two word. Ex:- tabindex attribute will be represented tabIndex in the DOM.
If the HTML attribute name is reserved under JavaScript, the value will be modified to work. Ex:- class attribute will be represented className in DOM for attribute will be represented htmlFor in DOM
There are also some exception. Ex: – char attribute will be represented ch in DOM
For others and custom attributes, we have to use getAttribute() and setAttribute( ) Methods because they may not have direct mapping.

CSS-DOM Mapping

We can modify the CSS Properties by applying a mapping between the CSS property and the DOM object. The mapping is direct between CSS properties and the DOM properties with the following considerations:-

CSS properties have a single word, so their mapping is direct. Ex:- color in CSS will be represented as color in DOM too.
Hyphenated CSS properties are repsrented as a single word with camelCase in the DOM. Ex:- background-color in CSS will be represented as backgroundColor in DOM
CSS properties value with vendor prefixs. Ex:- -webkit-box-shadow in CSS will be represented as webkitBoxShadow in DOM.
There are some reserved words which can be exception in the above cases. Ex – float in CSS will be represented as cssFloat in DOM

Author
Recent Posts

rajeshkumar