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.

1 Creating a model of a web page

The image below shows a simple HTML document and the DOM tree as it would be created by the majority of browsers. In the HTML document, the body element includes 3 HTML elements. In the DOM tree, the node for the body element contains 7 child nodes.

The image below displays the same HTML document of the previous example, this time HTML tags are written on a single line. The DOM tree is slightly different: the node for the body element contains 5 child nodes.

2 Accessing elements of a DOM tree

The DOM queries allow you to select an element or a collection of elements from the DOM tree.
DOM queries: methods that return a single elements
returned valuedocument method
Element document.getElementById('id')
Element document.querySelector('CSS selector')
DOM queries: methods that return one or more elements
returned valuedocument method
HTMLCollection document.getElementsByClassName('class name')
HTMLCollection document.getElementsByTagName('tag name')
NodeList document.querySelectorAll('CSS selector1 [, CSS selector2]')

The document.getElementsByClassName() method was first supported by IE9.
The document.querySelector() and document.querySelectorAll() methods were first supported by IE8.

Example: DOM Queries

Traversing the DOM

Using the Node properties below you can move from a node to a related one.

returned valueNode's properties
NodeList Node.childNodes
Node Node.parentNode
Node Node.previousSibling
Node Node.nextSibling
Node Node.firstChild
Node Node.lastChild

Example: DOM traversing with Node properties

3 Updating Nodes Content

Working with text content of elements:
returned value Node properties
string Node.textContent (IE9+)
string Node.nodeValue

Example: use the textContent property to select/update content of Element

Example: use the nodeValue property to select/update content of Text

Working with HTML content of elements:
  • using the innerHTML property
  • using the DOM manipulation methods

Example: use the innerHTML property to select/update HTML content

Example: use the DOM manipulation methods for updating HTML content

Working with content of Attribute nodes:
returned value Element properties
string Element.className
string Element.id
returned value Element methods
undefined Element.setAttribute('attrName','attrValue')
string Element.getAttribute('attrName')
boolean Element.hasAttribute('attrName')
undefined Element.removeAttribute('attrName')

Example: update attribute nodes attributes

No comments :

Post a Comment