2017, Fall Pusan National University Ki-Joune Li DOM 2017, Fall Pusan National University Ki-Joune Li
DOM – Basic Concepts Definition 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. HTML DOM or XML DOM tree-structure. <h1 id="demo">This is a Heading</h1> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> <h1>This is a Heading</h1> <h1>This is a Heading</h1> <script> document.getElementsByTagName("h1")[0].innerHTML = "Hello World!"; </script>
DOM – Tree Structure <bookstore> <book category="cooking"> <title lang="en">Everyday Korean</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web"> <title lang="en">Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore>
DOM – Example <!DOCTYPE html> <html><body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange=function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; document.getElementById("demo").innerHTML = // HTML DOM xmlDoc.getElementsByTagName("title")[0].nodeValue; // XML DOM } </script> </body></html> AJAX
<bookstore> <book category="cooking"> <title lang="en">Everyday Korean</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web"> <title lang="en">Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> <book category="web" cover="paperback"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore> Text node DOM – Example <!DOCTYPE html> <html><body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange=function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; document.getElementById("demo").innerHTML = // HTML DOM xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; // XML DOM } </script> </body></html>
DOM – Properties and Methods When x is a node object, XML DOM Properties x.nodeName - the name of x x.nodeValue - the value of x x.nodeType - the type of x x.parentNode - the parent node of x x.childNodes - the child nodes of x x.attributes - the attributes nodes of x XML DOM Method 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 <bookstore> <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> </bookstore>
XML DOM – Accessing DOM Node Accessing Nodes Three ways 1. By using the getElementsByTagName() method 2. By looping through (traversing) the nodes tree. 3. By navigating the node tree, using the node relationships Web Client Web Server JavaScript Object XML Decoding XML Document using DOM
XML DOM – getElementsByTagName() Given x element x.getElementsByTagName(“tagname"); Array as a node list x = xmlDoc.getElementsByTagName("title"); y= x[2];
Other Example <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, i, txt, xmlDoc; xmlDoc = xml.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("title"); for (i = 0; i < x.length; i++) { txt += x[i].childNodes[0].nodeValue + "<br>"; document.getElementById("demo").innerHTML = txt; </script> </body> </html> Other Example
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, y, i, xlen, xmlDoc, txt; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("book")[0]; xlen = x.childNodes.length; y = x.firstChild; txt = ""; for (i = 0; i < xlen; i++) { if (y.nodeType == 1) { txt += i + " " + y.nodeName + "<br>";} y = y.nextSibling; document.getElementById("demo").innerHTML = txt; </script> </body></html>
<!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) myFunction(this); }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]); document.getElementById("demo").innerHTML = x.nodeName; } //check if the first node is an element node function get_firstChild(n) { var y = n.firstChild; while (y.nodeType != 1) { y = y.nextSibling; } return y; } </script> </body></html>
XML DOM – Node Properties nodeName nodeValue nodeType Node type NodeType Value Element 1 Attribute 2 Text 3 Comment 8 Document 9 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
XML DOM – Changing Value of Element <bookstore> <book category="cooking"> <title lang="en">Everyday Korean</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web"> <title lang="en">Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore> var x = xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue = "Easy Cooking";
XML DOM – Attribute Node <bookstore> <book category="cooking"> <title lang="en">Everyday Korean</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web"> <title lang="en">Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore> x = xmlDoc.getElementsByTagName("book")[0].attributes; txt = x.getNamedItem("category").nodeValue + " " + x.length;
XML DOM – Get and Change Get Change Remove, Create, Add, and Clone Node Value – already studied Attribute Value Change Node Value Remove, Create, Add, and Clone txt = x.getAttribute("lang"); y = x.getAttributeNode("lang"); txt = y.nodeValue xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue="new content"; xmlDoc.getElementsByTagName("book")[0].setAttribute("category","food"); y = x.getAttributeNode("lang"); y.nodeValue ="new content";