DOM 2017 Fall Pusan National University KiJoune Li

PNU STEM DOM – Basic Concepts n Definition The W 3 C Document Object

PNU STEM DOM – Tree Structure <bookstore> <book category="cooking"> <title lang="en">Everyday Korean</title> <author>Giada De

PNU STEM DOM – Example <!DOCTYPE html> <html><body> <p id="demo"></p> <script> AJAX var xhttp

PNU DOM – Example <bookstore> Text node. STEM <book category="cooking"> <title lang="en">Everyday Korean</title> <author>Giada

PNU STEM DOM – Properties and Methods When x is a node object, n

PNU STEM XML DOM – Accessing DOM Node n Accessing Nodes Web Client Web

PNU STEM XML DOM – get. Elements. By. Tag. Name() n Given x element

PNU <!DOCTYPE html> <body> <p id="demo"></p> <script> var xhttp; xhttp = new XMLHttp. Request();

PNU <!DOCTYPE html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttp. Request(); xhttp.

PNU STEM <!DOCTYPE html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttp. Request();

PNU STEM XML DOM – Node Properties • • • node. Name node. Value

PNU STEM XML DOM – Changing Value of Element <bookstore> <book category="cooking"> <title lang="en">Everyday

PNU STEM XML DOM – Attribute Node <bookstore> <book category="cooking"> <title lang="en">Everyday Korean</title> <author>Giada

PNU STEM XML DOM – Get and Change n Get Node Value – already

Slides: 15

Download presentation

DOM 2017, Fall Pusan National University Ki-Joune Li

PNU STEM DOM – Basic Concepts n Definition The W 3 C 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. ¨ <h 1 id="demo">This is a Heading</h 1> <script> document. get. Element. By. Id("demo"). inner. HTML = "Hello World!"; </script> <h 1>This is a Heading</h 1> <script> document. get. Elements. By. Tag. Name("h 1")[0]. inner. HTML = "Hello World!"; </script> 2

PNU STEM 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 Mc. Govern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49. 99</price> </bookstore> 3

PNU STEM DOM – Example <!DOCTYPE html> <html><body> <p id="demo"></p> <script> AJAX var xhttp = new XMLHttp. Request(); xhttp. onreadystatechange=function() { if (this. ready. State == 4 && this. status == 200) { my. Function(this); } }; xhttp. open("GET", "books. xml", true); xhttp. send(); function my. Function(xml) { var xml. Doc = xml. response. XML; document. get. Element. By. Id("demo"). inner. HTML = // HTML DOM xml. Doc. get. Elements. By. Tag. Name("title")[0]. node. Value; // XML DOM } </script> </body></html> 4

PNU DOM – Example <bookstore> Text node. STEM <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 Mc. Govern</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> </bookstore> <!DOCTYPE html> <html><body> <p id="demo"></p> <script> var xhttp = new XMLHttp. Request(); xhttp. onreadystatechange=function() { if (this. ready. State == 4 && this. status == 200) { my. Function(this); } }; xhttp. open("GET", "books. xml", true); xhttp. send(); function my. Function(xml) { var xml. Doc = xml. response. XML; document. get. Element. By. Id("demo"). inner. HTML = // HTML DOM xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]. node. Value; // XML DOM } </script> </body></html> 5

PNU STEM DOM – Properties and Methods When x is a node object, n XML DOM Properties ¨ ¨ ¨ n <bookstore> <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30. 00</price> </book> </bookstore> x. node. Name - the name of x x. node. Value - the value of x x. node. Type - the type of x x. parent. Node - the parent node of x x. child. Nodes - the child nodes of x x. attributes - the attributes nodes of x XML DOM Method x. get. Elements. By. Tag. Name(name) - get all elements with a specified tag name ¨ x. append. Child(node) - insert a child node to x ¨ x. remove. Child(node) - remove a child node from x ¨ 6

PNU STEM XML DOM – Accessing DOM Node n Accessing Nodes Web Client Web Server Java. Script Object XML Decoding XML Document using DOM n Three ways 1. By using the get. Elements. By. Tag. Name() method 2. By looping through (traversing) the nodes tree. 3. By navigating the node tree, using the node relationships 7

PNU STEM XML DOM – get. Elements. By. Tag. Name() n Given x element ¨ n x. get. Elements. By. Tag. Name(“tagname"); Array as a node list x = xml. Doc. get. Elements. By. Tag. Name("title"); y= x[2]; 8

PNU <!DOCTYPE html> <body> <p id="demo"></p> <script> var xhttp; xhttp = new XMLHttp. Request(); xhttp. onreadystatechange = function() { if (this. ready. State == 4 && this. status == 200) { my. Function(this); } }; xhttp. open("GET", "books. xml", true); xhttp. send(); function my. Function(xml) { var x, i, txt, xml. Doc; xml. Doc = xml. response. XML; txt = ""; x = xml. Doc. get. Elements. By. Tag. Name("title"); for (i = 0; i < x. length; i++) { txt += x[i]. child. Nodes[0]. node. Value + " "; } document. get. Element. By. Id("demo"). inner. HTML = txt; } </script> </body> </html> STEM Other Example 9

PNU <!DOCTYPE html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttp. Request(); xhttp. onreadystatechange = function() { if (this. ready. State == 4 && this. status == 200) { my. Function(this); } }; xhttp. open("GET", "books. xml", true); xhttp. send(); STEM function my. Function(xml) { var x, y, i, xlen, xml. Doc, txt; xml. Doc = xml. response. XML; x = xml. Doc. get. Elements. By. Tag. Name("book")[0]; xlen = x. child. Nodes. length; y = x. first. Child; txt = ""; for (i = 0; i < xlen; i++) { if (y. node. Type == 1) { txt += i + " " + y. node. Name + " "; } y = y. next. Sibling; } document. get. Element. By. Id("demo"). inner. HTML = txt; } </script> </body></html> 10

PNU STEM <!DOCTYPE html> <body> <p id="demo"></p> <script> var xhttp = new XMLHttp. Request(); xhttp. onreadystatechange = function() { if (this. ready. State == 4 && this. status == 200) my. Function(this); }; xhttp. open("GET", "books. xml", true); xhttp. send(); function my. Function(xml) { var xml. Doc = xml. response. XML; var x = get_first. Child(xml. Doc. get. Elements. By. Tag. Name("book")[0]); document. get. Element. By. Id("demo"). inner. HTML = x. node. Name; } //check if the first node is an element node function get_first. Child(n) { var y = n. first. Child; while (y. node. Type != 1) { y = y. next. Sibling; } return y; } </script> </body></html> 11

PNU STEM XML DOM – Node Properties • • • node. Name node. Value node. Type • • • node. Name Node type Node. Type Value Element 1 Attribute 2 Text 3 Comment 8 Document 9 is read-only of an element node is the same as the tag name of an attribute node is the attribute name of a text node is always #text of the document node is always #document 12

PNU STEM 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 Mc. Govern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49. 99</price> </bookstore> var x = xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]; x. node. Value = "Easy Cooking"; 13

PNU STEM 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 Mc. Govern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49. 99</price> </bookstore> x = xml. Doc. get. Elements. By. Tag. Name("book")[0]. attributes; txt = x. get. Named. Item("category"). node. Value + " " + x. length; 14

PNU STEM XML DOM – Get and Change n Get Node Value – already studied ¨ Attribute Value txt = x. get. Attribute("lang"); ¨ n Change ¨ y = x. get. Attribute. Node("lang"); txt = y. node. Value Node Value xml. Doc. get. Elements. By. Tag. Name("title")[0]. child. Nodes[0]. node. Value="new content"; ¨ Attribute Value xml. Doc. get. Elements. By. Tag. Name("book")[0]. set. Attribute("category", "food"); y = x. get. Attribute. Node("lang"); y. node. Value ="new content"; n Remove, Create, Add, and Clone 15