DOM (Document Object Model) - Parsing and Reading HTML and XML - 2012. 9 Youn-Hee Han LINK@KOREATECH http://link.koreatech.ac.kr
4/26/2017 What is DOM? The HTML DOM defines a standard for accessing and manipulating HTML documents. The DOM defines the objects and properties of all document elements, and the methods (interface) to access them. The DOM is a W3C (World Wide Web Consortium) standard. The DOM is separated into 3 different parts / levels Core DOM - standard model for any structured document XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents 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. LINK@KOREATECH
DOM Node In the DOM, everything in an HTML document is a node. 4/26/2017 DOM Node In the DOM, everything in an HTML document is a node. The entire document is a “document” node Every HTML element is an “element” node The text in the HTML elements are “text” nodes Every HTML attribute is an “attribute” node Comments are “comment” nodes <html> <head> <title>My Title</title> </head> <body> <a href="...">My Link</a> <h1>My Header</h1> </body> </html> The root node in the HTML above is <html>. The <html> node has two child nodes; <head> and <body>. The <head> node holds a <title> node. The <body> node holds a <a> and <h1> node. The <title> node holds a text node with the value “My Title". The <a> node holds a text node with “My Link” The <p> node holds a text node with “My Header” The <a> node holds an attribute node LINK@KOREATECH
Node Tree HTML DOM Node Tree 4/26/2017 Node Tree HTML DOM Node Tree All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created. <html> <head> <title>My Title</title> </head> <body> <a href="...">My Link</a> <h1>My Header</h1> </body> </html> LINK@KOREATECH
Node Parents, Children, and Siblings 4/26/2017 Node Parents, Children, and Siblings HTML DOM Node Tree Parent nodes have children. Children on the same level are called siblings Siblings are nodes with the same parent In a node tree, the top node is called the root Every node, except the root, has exactly one parent node A node can have any number of children A leaf is a node with no children LINK@KOREATECH
Programming Interface (1/2) 4/26/2017 Programming Interface (1/2) The programming interface of the DOM is defined by standard properties and methods. HTML DOM Properties x.innerHTML - the text value of x x.nodeName - the name of x x.nodeValue - the value of x x.parentNode - the parent node of x x.childNodes - the child nodes of x x.attributes - the attributes nodes of x LINK@KOREATECH
Programming Interface (2/2) 4/26/2017 Programming Interface (2/2) HTML DOM Methods x.getElementById(id) - get the element with a specified id x.getElementsByTagName(name) - get all elements with a specified tag name x.appendChild(node) - insert a child node to x x.removeChild(node) - remove a child node from x LINK@KOREATECH
DOM Method & Node Access Example 1 – innerHTML property <html> <body> <p id="intro">Hello World!</p> <script type="text/javascript"> txt=document.getElementById("intro").innerHTML; document.write("<p>The text from the intro paragraph: " + txt + "</p>"); </script> </body> </html> LINK@KOREATECH
DOM Method & Node Access Example 2 – getElementById method (1/2) <html> <body> <p id="intro">Hello World!</p> <script type="text/javascript"> txt=document.getElementById("intro").childNodes[0].nodeValue; document.write("<p>The text from the intro paragraph: " + txt + "</p>"); </script> </body> </html> LINK@KOREATECH
DOM Method & Node Access Example 3 – getElementById method (2/2) <html> <body> <p id="intro">Hello World!</p> <p>This example demonstrates the <b>getElementById</b> method!</p> <script type="text/javascript"> x=document.getElementById("intro"); document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>"); </script> </body> </html> LINK@KOREATECH
DOM Method & Node Access Example 4 – getElementByTagName method (1/3) <html> <body> <p>Hello World!</p> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>getElementsByTagName</b> method.</p> <script type="text/javascript"> x=document.getElementsByTagName("p"); document.write("Text of first paragraph: " + x[0].innerHTML + "<br />"); document.write("Text of second paragraph: " + x[1].innerHTML + "<br />"); document.write("Text of third paragraph: " + x[2].innerHTML + "<br />"); </script> </body> </html> LINK@KOREATECH
DOM Method & Node Access Example 5 – getElementByTagName method (2/3) <html> <body> <p>Hello World!</p> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>getElementsByTagName</b> method.</p> <script type="text/javascript"> x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++){ document.write(x[i].innerHTML); document.write("<br />"); } </script> </body> </html> LINK@KOREATECH
DOM Method & Node Access Example 6 – getElementByTagName method (3/3) <html> <body> <p>Hello World!</p> <div id="main"> <p>The DOM is very useful.</p> <p>This example demonstrates the <b>getElementsByTagName</b> method</p> </div> <script type="text/javascript"> x=document.getElementById("main").getElementsByTagName("p"); document.write("First paragraph inside the div: " + x[0].innerHTML); </script> </body> </html> LINK@KOREATECH
DOM Method & Node Access Each object has properties allowing us to access the lower level objects in the hierarchy. e.g., document.forms returns an array of forms in the document. access by position in array document.forms[0].elements[0].value Access by id/name in array document.forms["myForm"]["fname"].value Or just use id/name document.form1.text1.value LINK@KOREATECH
DOM Method & Node Access Example 7 – Node Access <html> <head> <script type="text/javascript"> function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } </script> </head> <body> <form name="myForm" action="demo_form.jsp" onsubmit="return validateForm()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html> 폼 전송을 하지 말것! LINK@KOREATECH
DOM Node Info. In the HTML DOM, each node is an object Objects have methods and properties that can be accessed and manipulated by JavaScript Three important node properties are nodeName nodeValue nodeType nodeName Property – It specifies the name of a node nodeName is read-only nodeName of an element node is the same as the tag name nodeName of an attribute node is the attribute name nodeName of a text node is always “#text” nodeName of the document node is always “#document” LINK@KOREATECH
DOM Node Info. nodeValue Property – It specifies the value of a node nodeValue for element nodes is undefined nodeValue for text nodes is the text itself nodeValue for attribute nodes is the attribute value nodeType Property – It specifies the type of node Element type NodeType Element 1 Attribute 2 Text 3 Comment 8 Document 9 LINK@KOREATECH
DOM Programming Example 8 – firstChild & nodeValue properties <html> <body> <p id="intro">Hello World!</p> <script type="text/javascript"> x=document.getElementById("intro"); document.write("<hr />"); document.write(x.nodeName + "<br />"); document.write(x.nodeValue + "<br />"); document.write(x.nodeType); document.write(x.firstChild.nodeName + "<br />"); document.write(x.firstChild.nodeValue + "<br />"); document.write(x.firstChild.nodeType); </script> </body> </html> LINK@KOREATECH
Attribute Accessing Example 9 – Accessing element attributes <html> <body> <img id="myimage" src="test.gif"> <script type="text/javascript"> var getAttrValue=document.getElementById("myimage").getAttribute("src") document.write(getAttrValue); </script> </body> </html> LINK@KOREATECH
Change HTML Element HTML elements can be changed using JavaScript, the HTML DOM and events HTML DOM and JavaScript can change the inner content and attributes of HTML elements <html> <head> <script type="text/javascript"> function ChangeStyle() { document.getElementById("p1").innerHTML="New text!"; document.getElementById("p1").style.color="blue"; document.getElementById("p1").style.fontFamily="Arial"; } </script> </head> <body> <p id="p1">Hello world!</p> <input type="button" onclick="ChangeStyle()" value="Change style" /> </body> </html> LINK@KOREATECH