DOM is a platform- and language-neutral interface for accessing and manipulating documents. It is a fully object-oriented representation of the web page. DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods.The code written in JavaScript or any other scripting language uses the DOM to access the web page and its elements.
In other words the page content is stored in DOM and JavaScript may be used to access and manipulate the content using DOM.
Remember: DOM is a W3C (World Wide Web Consortium) standard.It is not a programming language.
In other words the page content is stored in DOM and JavaScript may be used to access and manipulate the content using DOM.
Remember: DOM is a W3C (World Wide Web Consortium) standard.It is not a programming language.
- The window object serves as the global object, you access it by just typing "window". It’s within this object that all of your JavaScript code is executed. Like all objects it has properties and methods.
- The DOM creates a hierarcy corresponding to the structure of each web document. This hierarchy is made up of nodes. There are several different types of DOM nodes, the most important are ‘Element’, ‘Text’ and ‘Document’.
- An ‘Element’ node represents an element within a page. So if you have a paragraph element (‘<p>’) then it can be accessed through the DOM as a node.
- A ‘Text’ node represents all text (within elements) within a page. So if your paragraph has a bit of text in it can be directly accessed through the DOM.
- The ‘Document’ node represents the entire document. (It’s the root-node of the DOM hierarchy/tree). Also note that element attributes are DOM nodes themselves
The DOM API is used to access and traverse the HTML and XML documents.
Accessing the DOM nodes
Anything which is present within a document we can access using JavaScript and the DOM API.
- Access by using the ‘getElementById’ DOM method.
- The ‘getElementsByTagName’ method returns a live node collection/list. It’s similar to an array in that it has a length property. One important thing to note is these collections are "live" – if you add a new element to the DOM then the collection will update itself. Since it’s an array-like object we can access each node via an index, from 0 to the total length of the collection (minus 1)
Traversing the DOM
The term "traverse" is used to describe the action of traveling through the DOM, finding nodes. Knowing the exact structure of the DOM tree, you can walk through it in search of the element you want to influence.
e.g- use x.parentNode to take the parent node of x and do something with it.
The DOM API gives us plenty of node properties which we can use to move up and down through all the nodes within a document.
These properties are inherent of all nodes and enable you to access related/close nodes:
- Node.childNodes: You can use this to access all direct child nodes of a single element. It will be an array-like object, which you can loop through. Nodes within this array will include all the different node types including text nodes and other element nodes.
- Node.firstChild: This is the same as accessing the first item in the ‘childNodes’ array (‘Element.childNodes[0]‘). It’s just a shortcut.
- Node.lastChild: This is the same as accessing the last item in the ‘childNodes’ array (‘Element.childNodes[Element.childNodes.length-1]‘). It’s just a shortcut.
- Node.parentNode: This gives you access to the parent node of your current node. There will only ever be one parent node. In order to access the grandparent you would simply use ‘Node.parentNode.parentNode’ etc.
- Node.nextSibling: This gives you access to the next node on the same level within the DOM tree.
- Node.previousSibling: This gives you access to the last node on the same level within the DOM tree.
Manipulating the DOM
Manipulating DOM means to dynamically add or delete nodes to the DOM.
To create a new tag we use the createElement() method of document. To give the new tag attributes, we use its setAttribute() method.
var link = document.createElement('a');
link.setAttribute('href', 'mypage.htm');
link.setAttribute('href', 'mypage.htm');
The above example would create a link pointing to "mypage.htm" (<a HREF="mypage.htm">).
Once the node you wish to add has been created, you must locate where you wish to append it in the document tree.
We can use either ID to locate the node e.g:
Once the node you wish to add has been created, you must locate where you wish to append it in the document tree.
We can use either ID to locate the node e.g:
document.getElementById("myDiv") ;
Appending a node to the document:
var txt = document.createTextNode(" This text was added to the DIV.");
document.getElementById('myDiv').appendChild(txt);
document.getElementById('myDiv').appendChild(txt);