Deeper DOM

What you will learn this week from w3schools is a VERY simplified view on HTML DOM used by Javascript. This post is for those who want to know somewhat more, have a better orientation in the HTML5 technologies trends.Object that you might be used to usually are special data structures supported in the memory after instantiation. In other words, they are “real” physical structures. HTML objects are a figment of imagination brought to life by browser interpretation of simple flat texts (like the one you can create in your Notepad). The ability of modern browsers creating such virtual objects with their properties and methods allowing to work with these properties and other elements creates a new world of virtualization.

This allows really modern programming against browsers (especially in HTML5-based development). APIs (Application Programming Interfaces) allow to standardize JS operations on DOM, like:

document.createElement("h1");

This allows standard and simple way of performing various operations on HTML text and its object interpretations. The growing number of special methods of HTML processing create a growing number of APIs instead of inventing programming methods of doing same things again and again. For example HTML5 DOM includes standardized methods allowing to handle:

• Contacts - The HTML5 specification mentions that the Contacts API allows to have a common contacts repository in the browser which can be access by any web application.
• Selection - The selection API supports selecting items in DOM (supports CSS3 type of selectors), to be used along with jQUERY.
• Offline apps - This API allows marking pages to be available in Offline mode. This is useful if a resource requires dynamic processing.
• Indexed database - This API is meant for a database of records holding simple values (including hierarchical objects). Every record has a key and a value. An indexed database is supposed to be implemented using b-trees. Web SQL DB is no longer being pursued as part of HTML5 specification.
• File API - The File APIs are used by the browser to provide secure access to the file system.
• Etc.

 Given the dynamism and growing expansion of HTML-based development it has include two functions: create standards to support globally acceptable and “re-combinable” applications and allow for the evolving nature as any language has. Therefore the two main organizations W3C and WHATWG (in ots living satndard) correspondingly split these functions.

The modern evolution of the HTML DOM goes in the direction supporting the emerging needs of effective (allowing for the latest enhancements in programming methods, operations, and interfaces) and efficient (simplifying) programming (mainly Javascript-but other languages are possible - on HTML and styles, but also on device resources like memory, sensors, etc.). For example, since the regular HTML DOM tree lacks encapsulation (one of the key features in using object-orieneted programming)  there are spreading to life such exotic things as Web Components allowing for it that also include so-called Shadow DOM.

PHP can do the same what JS does on the client – but on the server side thus nicely supplementing client or server side implementation options. For example finding an element in DOM can use the domdocument class of Php like th efollowing:

// a new dom object

$dom = new domDocument;

// load the html into the object

$dom->loadHTML($html);

// discard white space

$dom->preserveWhiteSpace = false;

//get element by id

$some_div = $dom->getElementById('someID');

if(!some_div)

{

    die("Element not found");

}

echo "element found";