Download presentation
Presentation is loading. Please wait.
1
DOM (Document Object Model) - Parsing and Reading HTML and XML -
Youn-Hee Han
2
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.
3
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
4
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>
5
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
6
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
7
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
8
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>
9
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>
10
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>
11
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>
12
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>
13
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>
14
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
15
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> 폼 전송을 하지 말것!
16
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”
17
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
18
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>
19
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>
20
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>
Similar presentations
