JavaScript DOM Nodes

The abbreviation of DOM is Document Object Model. It is a platform and language independent model to represent the HTML or XML documents. It defines the logical structure of the documents and the way in which they can be accessed and manipulated by an application program.

In the DOM, all parts of the document, such as elements, attributes, text, etc. are organized in a hierarchical tree-like structure; similar to a family tree in real life that consists of parents and children. In DOM terminology these individual parts of the document are known as nodes.

Using JavaScript DOM you can do following things.

• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page

In the following example h1 is sibling of ul. li is child element of ul.

Example of Code

<h1>Heading</h1>
<ul>
    <li>first li</li>
    <li>second li</li>
</ul>

Output