HTML-DOM and CSS-DOM Mapping in JavaScript

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

Tagged : / / / /

Some new terms of TFSC

  • Repository— The data store containing all files and folders in the TFSC database.
  • Mapping— An association of a repository path with a local working folder on the client computer.
  • Working folder— A directory on the client computer containing a local copy of some subset of the files and folders in a repository.
  • Workspace— A definition of an individual user’s copy of the files from the repository. The workspace contains a reference to the repository and a series of mappings that associate a repository path with a working folder on the user’s computer.
  • Change set— A set of modifications to one or more files/folders that is atomically applied to the repository at check-in.
  • Shelve— The operation of archiving all modifications in the current change set and replacing those files with original copies. The shelved files can be retrieved at a later time for development to be continued. This is my favorite feature.
Tagged : / / / / / / /