1. Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I HTML DOM part I Jongwook Woo, PhD jwoo5@calstatela.edu California State University, Los Angeles Computer Information System Department

2. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Content nDOM Home nDOM Intro nDOM Nodes nDOM Node Tree nDOM Methods

3. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML DOM ndefines a standard way for accessing and manipulating HTML documents. nThe DOM presents an HTML document as a tree-structure.

4. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System What is DOM? nThe DOM is a W3C (World Wide Web Consortium) standard. mdefines a standard for accessing documents like HTML and XML: mallows programs and scripts to dynamically access –and update the content, structure, and style of a document nThe DOM is separated into 3 different parts / levels: mCore DOM - standard model for any structured document mXML DOM - standard model for XML documents mHTML DOM - standard model for HTML documents nThe DOM defines mthe objects and properties of all document elements, –and the methods (interface) to access them.

5. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System What is DOM? nThe HTML DOM ma standard for how to get, change, add, or delete HTML elements nDOM Nodes meverything in an HTML document is a node. ma document node –The entire document is man element node –Every HTML element is mtext nodes –The text in the HTML elements are man attribute node –Every HTML attribute is mcomment nodes –Comments are

6. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Example DOM Tutorial DOM Lesson one Hello world! nThe root node in the HTML above is. mThe node has two child nodes; and. mThe node holds a node. mThe node holds a and node.

7. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Text Nodes nText is Always Stored in Text Nodes mNo element node to contain text. mIn this example: – DOM Tutorial, –the element node, holds a text node with the value "DOM Tutorial". –"DOM Tutorial" is not the value of the element!

8. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML DOM Node Tree nThe DOM presents an HTML document as a tree-structure.

9. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML DOM Node Tree (Cont’d) nNode Parents, Children, and Siblings mThe nodes have a hierarchical relationship to each other. mThe terms parent, child, and sibling are used to describe the relationships. –Parent nodes have children. nthe root mIn a node tree, the top node is called mEvery node, except the root, has exactly one parent node nA node can have any number of children mA leaf is a node with no children nSiblings are nodes with the same parent mChildren on the same level are called siblings (brothers or sisters).

10. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Tree Example DOM Tutorial DOM Lesson one Hello world! nThe node has no parent node; it is the root node mThe parent node of the and nodes is the node –The parent node of the "Hello world!" text node is the node nThe node has two child nodes; and mThe node has one child node; the node –The node also has one child node; the text node "DOM Tutorial" mThe and nodes are siblings, and both child nodes of

11. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System DOM Node Tree Example (Cont’d) DOM Tutorial DOM Lesson one Hello world! nFirst Child - Last Child mthe element is the first child of the element, mand the element is the last child of the element –the element is the first child of the element, –and the element is the last child of the element

12. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Properties and Methods ndefine the programming interface of the HTML DOM. nThe nodes of DOM can be accessed mwith JavaScript or other programming languages. nProperties mreferred to as something that is (i.e. the name of a node). nMethods mreferred to as something that is done (i.e. remove a node). nHTML DOM Properties: x is a node object (HTML element) mx.innerHTML - the text value of x mx.nodeName - the name of x mx.nodeValue - the value of x mx.parentNode - the parent node of x mx.childNodes - the child nodes of x mx.attributes - the attributes nodes of x

13. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML DOM Methods nSome DOM methods: x is a node object mx.getElementById(id) - get the element with a specified id mx.getElementsByTagName(name) - get all elements with a specified tag name mx.appendChild(node) - insert a child node to x mx.removeChild(node) - remove a child node from x nThe innerHTML Property mThe easiest way to get or modify the content of an element minnerHTML is not a part of the W3C DOM specification. –However, it is supported by all major browsers. museful for returning or replacing the content of HTML elements (including and ),

14. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML DOM Example nThe following code gets the innerHTML (text) from the element with id="intro": Hello World! txt=document.getElementById("intro").innerHTML; document.write(" The text from the intro paragraph: " + txt + " "); n getElementById is a method, mwhile innerHTML is a property.

15. Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Childe Node Example nchildNodes and nodeValue properties mto get the content of an element. mThe following code gets the value of the element with id="intro": Hello World! txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(" The text from the intro paragraph: " + txt + " ");