Understanding DOM

Image result for DOM — Document Object Model (DOM)

In this section, you will understand DOM. While understanding DOM, remember it is cross-platform. Also, this is a language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure. Moreover, the objects can be manipulated programmatically and any visible changes occurring. As a result, these can be reflected in the display of the document.

Understanding DOM History

JavaScript was released by Netscape Communications in 1995. Certainly, JavaScript and JScript let web developers create web pages with client-side interactivity. Moreover, the limited facilities for detecting user-generated events and modifying the HTML document in the first generation of these languages eventually became known as “DOM Level 0” or “Legacy DOM.”

Since JScript was based on JavaScript, the DHTML DOM extensions were developed in parallel by each browser maker and remained incompatible. These versions of the DOM became known as the “Intermediate DOM.”

Understanding DOM

To render a document such as an HTML page. Moreover, most web browsers use an internal model similar to DOM. The nodes of every document are organized in a tree structure, called the DOM tree. Similarly, the topmost node is known as “Document object”. However, when an HTML page renders in browsers. Further, the browser downloads the HTML into local memory. After this, it automatically parses it to display the page on the screen.

On the other hand, if a web page loads. Then, the browser creates a Document Object Model of the page. In addition, this is an object-oriented representation of an HTML document. Moreover, this acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages:

Firstly, JavaScript can add, change, and remove all of the HTML elements and attributes in the page.
Secondly, JavaScript can change all of the CSS styles on the page.
Thirdly, JavaScript can react to all of the existing events in the page.
Lastly, JavaScript can create new events within the page.

Above all, DOM supports navigation in any direction (e.g., parent and previous sibling). Further, allows for arbitrary modifications, an implementation must at least buffer.

Example

<h1 id=”demo”>This is a Heading</h1>

document.getElementById(“demo”).innerHTML = “Hello World!”;

document.getElementsByTagName(“h1”)[0].innerHTML = “Hello World!”;

</script>

Layout engines: Understanding DOM

Web browsers rely on layout engines to parse HTML into a DOM. Some layout engines, such as Trident/MSHTML, are associated primarily or exclusively with a particular browsers. However, the different layout engines implement the DOM standards to varying degrees of compliance.

For example, the standard DOM specifies that the getElementsByTagName method in the code below must return a list of all the <P> elements in the document:

var paragraphs = document.getElementsByTagName(“P”);

// paragraphs[0] is the first <p> element

// paragraphs[1] is the second <p> element, etc.

alert(paragraphs[0].nodeName);

All of the properties, methods, and events available for manipulating and creating web pages into objects. Moreover, this documentation provides an object-by-object reference to the DOM implemented in Gecko-based browsers.

Understanding DOM and JavaScript

The example above is in JavaScript, but it uses the DOM to access the document and its elements. However, the DOM is not a programming language. In addition, every element in a document is part of the document object model. So, they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.

Accessing the DOM

Different browsers have different implementations of the DOM. Moreover, these implementations exhibit varying degrees of conformance to the actual DOM standard. But, every web browser uses some document object model to make web pages accessible to a script.

This following JavaScript will display an alert when the document is loaded (and when the whole DOM is available for use).

DOM Programming Interface

HTML DOM methods are actions you can perform (on HTML Elements). Certainly, HTML DOM properties are values that you can set or change. Moreover, the HTML DOM is accessible with JavaScript (and with other programming languages). In addition, all HTML elements are also known as objects. The programming interface is the properties and methods of each object. A property is a value that you can get or set. A method is an action you can do (like add or deleting an HTML element).

Interface and Objects

Many objects borrow from several different interfaces. The table object, for instance, implements a special HTML Table Element Interface. Further, this includes methods such as create caption and insertRow. But since it’s also an HTML element, table implements the Element interface. Since an HTML element is a node in the tree of nodes that make up the object model for an HTML or XML page. Moreover, the table object also implements the more basic Node interface, from which Element derives.

Document and window objects are the objects whose interfaces you generally use most often in DOM programming. However, the elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object.

The following is a brief list of common APIs in web and XML page scripting using the DOM.