JS: Document Object Model (DOM)

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• DOM stands for Document Object Model, DOM stands for Document Object Model,

and allows programmers generic access and allows programmers generic access to:to:– adding, deleting, and manipulating - of all adding, deleting, and manipulating - of all

styles, attributes, and elements in a document. styles, attributes, and elements in a document. – It can be accessed via any language available It can be accessed via any language available

in the browser, including Java, in the browser, including Java, JavaScript/ECMAScript/JScript, and VBScript JavaScript/ECMAScript/JScript, and VBScript (MSIE only). (MSIE only).

– The DOM is supported most completely The DOM is supported most completely starting in IE 5 and Gecko (NS6 and upwards, starting in IE 5 and Gecko (NS6 and upwards, such as Firefox.)such as Firefox.)

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• Every tag, attribute, style, and piece of Every tag, attribute, style, and piece of

text is available to be accessed and text is available to be accessed and manipulated via the DOM -- the manipulated via the DOM -- the possibilities are endless:possibilities are endless:– adding and removing tags, adding and removing tags, – attributes and styles, attributes and styles, – animating existing elements, animating existing elements, – and hiding/ showing elements on a page. and hiding/ showing elements on a page.

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• The DOM is constantly being revised by The DOM is constantly being revised by

the the W3C, with browsers at the same time , with browsers at the same time constantly trying to support the latest constantly trying to support the latest recommended version of the DOM. recommended version of the DOM.

• Before we get started, you need to know a Before we get started, you need to know a few terms that we will use:few terms that we will use:– Node:Node: A reference to an element, its A reference to an element, its

attributes, or text from the document.attributes, or text from the document.– Element:Element: A representation of a <TAG>. A representation of a <TAG>.– Attribute:Attribute: A property of an element. HREF is A property of an element. HREF is

an attribute of <A>, for example.an attribute of <A>, for example.

http://www.w3.org/

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• The DOM represent an HTML documents as a tree The DOM represent an HTML documents as a tree

of objects.of objects.• The tree representation of an HTML document The tree representation of an HTML document

contains nodes representing HTML tags or contains nodes representing HTML tags or elements, such as <body> and , and nodes elements, such as <body> and , and nodes representing strings of text. representing strings of text.

• An HTML document may also contain nodes An HTML document may also contain nodes representing HTML comments.representing HTML comments.

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• Consider the following simple HTML document: Consider the following simple HTML document:

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• The tree representation of the previous HTML The tree representation of the previous HTML

document:document:

JS: Document Object Model JS: Document Object Model (DOM)(DOM)

• The node relationships of the previous DOM The node relationships of the previous DOM tree:tree:– HTML is an ancestor for HTML is an ancestor for head, h1, i, … head, h1, i, …

etcetc– head and body are siblinghead and body are sibling– h1 and p are children of bodyh1 and p are children of body– head is parent of titlehead is parent of title– ““this is a” is the first children of pthis is a” is the first children of p– head is the firstChild of htmlhead is the firstChild of html

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• The DOM says that:The DOM says that:

– The entire document is a The entire document is a document nodedocument node – Every HTML tag is an Every HTML tag is an element nodeelement node – The texts contained in the HTML elements are The texts contained in the HTML elements are

text nodes text nodes – Every HTML attribute is an Every HTML attribute is an attribute nodeattribute node – Comments are Comments are comment nodescomment nodes

JS: Document Object Model JS: Document Object Model (DOM)(DOM)Activity 11:1Activity 11:1• Basic Node PropertiesBasic Node Properties (DOM) (DOM)

– nodeNamenodeName is the name of the node (not the ID). is the name of the node (not the ID). • The name is the tag name for HTML tag nodes, The name is the tag name for HTML tag nodes,

• #document for the document node, and #document for the document node, and

• #text for text nodes.#text for text nodes.

– nodeTypenodeType is a number describing the node's type: is a number describing the node's type: • 11 for HTML tags, for HTML tags,

• 33 for text nodes, and for text nodes, and

• 99 for the document. for the document.

– nodeValuenodeValue is the text contained within a text node. is the text contained within a text node.– idid is the value of the ID attribute for the node. is the value of the ID attribute for the node.

JS: Document Object Model JS: Document Object Model (DOM)(DOM)Activity 11:2Activity 11:2• Relationship PropertiesRelationship Properties

– firstChildfirstChild is the first child node for the current is the first child node for the current node.node.

– lastChildlastChild is the last child object for the current is the last child object for the current node.node.

– childNodeschildNodes is an array of all the child nodes under is an array of all the child nodes under a node.a node.

– previousSiblingpreviousSibling is the sibling before the current is the sibling before the current node.node.

– nextSiblingnextSibling is the sibling after the current node. is the sibling after the current node.– parentNodeparentNode is the object that contains the current is the object that contains the current

node. node.

JS: Document Object Model JS: Document Object Model (DOM)(DOM)Activity 11:3 – node editingActivity 11:3 – node editing• Node MethodsNode Methods

– appendChild(node)appendChild(node) adds a new child node to the adds a new child node to the node after all its existing children.node after all its existing children.

– insertBefore(node, oldnode)insertBefore(node, oldnode) inserts a new node inserts a new node before the specified existing child node.before the specified existing child node.

– replaceChild(node, oldnode)replaceChild(node, oldnode) replaces the replaces the specified old child node with a new node.specified old child node with a new node.

– removeChild(node)removeChild(node) removes an existing child removes an existing child node.node.

– hasChildNodes()hasChildNodes() returns a Boolean value of true returns a Boolean value of true if the node has one or more children, or false if it if the node has one or more children, or false if it has none.has none.

– cloneNode()cloneNode() returns a copy of the current node. returns a copy of the current node.

JS: Document Object Model JS: Document Object Model (DOM)(DOM)innerHTMLinnerHTML• innerHTMLinnerHTML sets or gets all of the markup and sets or gets all of the markup and

content within a given element.content within a given element.• var var markupmarkup = element.innerHTML; = element.innerHTML;

element.innerHTML = element.innerHTML = markupmarkup;; • Creating Some text Creating Some text

– Var p = document.createElement(“p”);Var p = document.createElement(“p”);– p.innerHTML = “Some text”; //able to include p.innerHTML = “Some text”; //able to include

html taghtml tag– p.innerHTML = “Some text”;p.innerHTML = “Some text”;

– Also the same (drawback – cannot put html tag)Also the same (drawback – cannot put html tag)• Var p = document.createElement(“p”);Var p = document.createElement(“p”);• var textNode = document.createTextNode(" Some text");var textNode = document.createTextNode(" Some text");• p.appendChild(textNode);p.appendChild(textNode);

JS: Document Object Model JS: Document Object Model (DOM)(DOM)innerHTML – notesinnerHTML – notes• Not actually a part of the W3C DOM specification,Not actually a part of the W3C DOM specification,

• However can provides a simple way to However can provides a simple way to completely replace the contents of an element or completely replace the contents of an element or textNode and also table cell contenttextNode and also table cell content– document.body.innerHTML = ""; document.body.innerHTML = ""; – // Replaces body content with an empty string.// Replaces body content with an empty string.

• Supported both IE and Mozilla/ChromeSupported both IE and Mozilla/Chrome

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• DOM Methods and PropertiesDOM Methods and Properties

– document.getElementById(ID)document.getElementById(ID) returns the returns the element with the specified ID attribute.element with the specified ID attribute.

– document.getElementsByTagName(tag)document.getElementsByTagName(tag) returns an array of the elements with the returns an array of the elements with the specified tag name. You can use the asterisk specified tag name. You can use the asterisk (*) as a wildcard to return an array containing (*) as a wildcard to return an array containing all of the nodes in the document.all of the nodes in the document.

JS: Document Object Model JS: Document Object Model (DOM)(DOM)• DOM Methods and PropertiesDOM Methods and Properties

– document.createElement(tag)document.createElement(tag) creates a new creates a new element with the specified tag name.element with the specified tag name.

– document.createTextNode(text)document.createTextNode(text) creates a creates a new text node containing the specified text.new text node containing the specified text.

– document.documentElementdocument.documentElement is an object that is an object that represents the document itself, and can be represents the document itself, and can be used to find information about the document.used to find information about the document.

JS: DOM – Creating HTML doc.JS: DOM – Creating HTML doc.Activity 11:4Activity 11:4

• Get the body referenceGet the body reference– var body = var body =

document.getElementsByTagName(“BODY").item(0);document.getElementsByTagName(“BODY").item(0);• Create the tag and complete the tag properties, Create the tag and complete the tag properties,

children… etcchildren… etc– var pElement = document.createElement("p");var pElement = document.createElement("p");– pElement.innerHTML = "Hello Class, Welcome to pElement.innerHTML = "Hello Class, Welcome to

DOM world!“DOM world!“– OrOr

• var textNode = document.createTextNode("Hello Class, var textNode = document.createTextNode("Hello Class, Welcome to DOM world!");Welcome to DOM world!");

• pElement.appendChild(textNode);pElement.appendChild(textNode);

• Add the tag to bodyAdd the tag to body– body.appendChild(pElement);body.appendChild(pElement);

JS: DOM – Adding or modifying JS: DOM – Adding or modifying HTML element propertiesHTML element properties

• MethodsMethods– getAttribute(“attribute_name”)getAttribute(“attribute_name”)

•Same method:Same method:– getAttributeNode(“attribute_name”)getAttributeNode(“attribute_name”)

•Retrieve the node representation of the Retrieve the node representation of the named attribute from the current node. named attribute from the current node.

– setAttribute(“attribute_name”, setAttribute(“attribute_name”, “attribute_value”)“attribute_value”)•Adds a new attribute or changes the value of Adds a new attribute or changes the value of

an existing attribute on the specified element. an existing attribute on the specified element. – hasAttribute((“attribute_name”)hasAttribute((“attribute_name”)

•Return booleanReturn boolean– removeAttribute(“attribute_name”)removeAttribute(“attribute_name”)

JS: DOM – Adding or modifying HTML JS: DOM – Adding or modifying HTML element propertieselement propertiesActivity 11:5Activity 11:5

• Create the elementCreate the element– var linkElement = document.createElement("a");var linkElement = document.createElement("a");

• Set the element contentSet the element content– linkElement.innerHTML = "Click me to go to google!";linkElement.innerHTML = "Click me to go to google!";

• Set element propertySet element property– linkElement.setAttribute("href", linkElement.setAttribute("href",

"http://www.google.com");"http://www.google.com");

• To change attribute value:To change attribute value:– Get the elementGet the element– Use setAttribute with a new valueUse setAttribute with a new value

JS: DOM – Creating HTML tableJS: DOM – Creating HTML tableActivity 11:6Activity 11:6

• Create tableCreate table– var tbl = document.createElement("table");var tbl = document.createElement("table");

• Create table bodyCreate table body– var tblBody = document.createElement("tbody");var tblBody = document.createElement("tbody");

• Create row(tr) and cells(td)Create row(tr) and cells(td)– First create row: var row = First create row: var row =

document.createElement("tr");document.createElement("tr");– Then create col: var cell = Then create col: var cell =

document.createElement("td");document.createElement("td");•Create cell content:Create cell content:

– var cellText = document.createTextNode("cell var cellText = document.createTextNode("cell content"); content");

– cell.appendChild(cellText);cell.appendChild(cellText);– Add cell (td) to row: Add cell (td) to row:

•row.appendChild(cell);row.appendChild(cell);

JS: DOM – Creating HTML table JS: DOM – Creating HTML table – cont.– cont.

• Add row(tr) to table body(tbody)Add row(tr) to table body(tbody)– tblBody.appendChild(row);tblBody.appendChild(row);

• Add table body(tbody) to table(table)Add table body(tbody) to table(table)– tbl.appendChild(tblBody);tbl.appendChild(tblBody);

• Creating cell content using innerHTMLCreating cell content using innerHTML– var cell = document.createElement("td");var cell = document.createElement("td");– cell.innerHTML = "cell content";cell.innerHTML = "cell content";

JS: Document Object Model (DOM)

Documents

Transcript of JS: Document Object Model (DOM)