Friday, January 15, 2016

The DOM API


Browsers come with a set of built-in objects that model data used and operations performed by your applications:
  • The Browser Object Model API (BOM) features Window object that models browser's windows and tabs.
  • The Document Object Model API (DOM) features Document object that models web pages displayed in browser's windows.

The DOM API specification serves two purposes:

  • how browser should make a model of HTML documents using objects:
    When a browser loads a web page, it creates a structure, a DOM tree, that is a live representation of the web page. The DOM tree is made of Node objects and each node represents an element that is part of the web page.
  • how JS programs can access this model for changing HTML documents:
    JavaScript program can access the DOM tree for modifying the HTML document. This does not change the HTML code, but only the DOM, the representation of the document.

Friday, January 1, 2016

HTML attributes and DOM Element properties

HTML Global Attributes

An HTML element consists of a tag and a set of attributes, an attribute being a pair name="value".

HTML Global attributes are attribute common to all HTML elements. They are divided in three subtypes: core attributes, event-handler attributes and xml attributes

HTML 4.1 Core Attributes
  • id: a unique identifier for the element
  • class: classifies similar elements, for semantic purposes or for presentation purposes.
  • style: adds presentational properties to the element
  • title: attaches textual explanation to the element
  • lang: defines the language of the element
  • dir: the reading direction
  • accesskey: indicates a keyboard shortcut key
  • tabindex: specifies the tab order index
HTML 5 Core Attributes
  • contenteditable: specifies whether a user can edit the content of the element
  • contextmenu: specifies a <menu> for the element
  • data-*: custom attribute for the element
  • draggable: specifies whether a user can drag the element
  • hidden: hides the element
  • spellcheck: specifies whether the element should be checked for spelling and grammar or not
  • translate: specifies whether content of the element is to be translated or not when page is localized

HTML Attributes as DOM Element Properties

In the DOM an HTMLElement object represents an element of an HTML document. The attributes of an element become properties of the corresponding DOM HTMLElement object.

For example, you may set up google analytics for your web site, in that case you have to include in the home page a script like the one below, where you create a <script> element and then you set the attributes type, async and src using the dot notation.

<script>
var _ga = document.createElement('script'); 
 _ga.type = 'text/javascript'; 
 _ga.async = true;
 _ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
<script>