4. HTML DOM Introduction What is the DOM? "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.
5.
6.
7.
8.
9. HTML DOM Node Tree (Document Tree) All the nodes in a node tree have relationships to each other. The tree structure is called a node-tree. Node:- Parents, Children, and Siblings
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21. getElementsByTagName() <html> <body> <p id="intro">W3Schools example</p> <div id="main"> <p id="main1">The DOM is very useful</p> <p id="main2">This example demonstrates how to use the <b>getElementsByTagName</b> method</p> </div> <script type="text/javascript"> x=document.getElementById("main").getElementsByTagName("p"); document.write("First paragraph inside the main div: " + x[0].childNodes[0].nodeValue); </script> </body> </html>
22.
23.
24.
25.
26. Node Property Everything in a document can be considered a node, including the document itself. Properties Of Node Interface: • nodeName : Returns name of element. • nodeValue: Returns value of element. • nodeType :Returns type of node whether element or document etc. • parentNode: Contains the parent node (for nodes that can have parents). • childNodes: Contains a node list containing the children (for nodes that can have children). • firstChild : Contains the first child of this node.
27.
28.
29. Node Property appendChild(newchild): Appends newChild as the last child of this node createTextNode = This property used to create new text node. e.g. createTextNode(a); createElement = This property usedt to create element e.g. createElement('tr');
30. Node List The nodeList object represents a node and its child nodes as a node tree. Property of Nodelist: length: Returns an unsigned long integer indicating the number of nodes in the NodeList . Method of Nodelist: item(index): This method takes an index as its argument and returns the node at that index position.
31. Properties of Document: doctype: Returns <!DOCTYPE information of document. implementation: Returns implementation node. documentElement: Returns root element of the document.