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
Latest posts by rajeshkumar (see all)