DOM Document Object Model (DOM) SoftUni Team Technical Trainers Software University .
JS: Document Object Model (DOM) DOM stands for Document Object Model, and allows programmers generic...
19
JS: Document Object Model JS: Document Object Model (DOM) (DOM) • DOM stands for Document Object Model, and DOM stands for Document Object Model, and allows programmers generic access to: allows programmers generic access 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 in It can be accessed via any language available in the browser, including Java, the browser, including Java, JavaScript/ECMAScript/JScript, and VBScript (MSIE JavaScript/ECMAScript/JScript, and VBScript (MSIE only). only). – The DOM is supported most completely starting in The DOM is supported most completely starting in IE 5 and Gecko (NS6 and upwards, such as Firefox.) IE 5 and Gecko (NS6 and upwards, such as Firefox.) • 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 possibilities manipulated via the DOM -- the possibilities are endless: 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.
-
Upload
melvyn-randall -
Category
Documents
-
view
215 -
download
0
Transcript of JS: Document Object Model (DOM) DOM stands for Document Object Model, and allows programmers generic...
JS: Document Object Model JS: Document Object Model (DOM)(DOM)• DOM stands for Document Object Model, and DOM stands for Document Object Model, and
allows programmers generic access to:allows programmers generic access to:– adding, deleting, and manipulating - of all styles, adding, deleting, and manipulating - of all styles,
attributes, and elements in a document. attributes, and elements in a document. – It can be accessed via any language available in the It can be accessed via any language available in the
browser, including Java, JavaScript/ECMAScript/JScript, browser, including Java, JavaScript/ECMAScript/JScript, and VBScript (MSIE only). and VBScript (MSIE only).
– The DOM is supported most completely starting in IE 5 The DOM is supported most completely starting in IE 5 and Gecko (NS6 and upwards, such as Firefox.)and Gecko (NS6 and upwards, such as Firefox.)
• Every tag, attribute, style, and piece of text is Every tag, attribute, style, and piece of text is available to be accessed and manipulated via the available to be accessed and manipulated via the DOM -- the possibilities are endless:DOM -- the 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 The DOM is constantly being revised by the W3CW3C, ,
with browsers at the same time constantly trying with browsers at the same time constantly trying to support the latest recommended version of the to support the latest recommended version of the DOM. DOM.
• As of IE6 and Firefox 1.0, As of IE6 and Firefox 1.0, DOM 2DOM 2 best best encompasses what the two browsers currently encompasses what the two browsers currently support. support.
• DOM 3DOM 3 is the next major version in the works. is the next major version in the works.• Before we get started, you need to know a few Before we get started, you need to know a few
terms that we will use:terms that we will use:– Node:Node: A reference to an element, its attributes, or text A reference to an element, its attributes, or text
from the document.from the document.– Element:Element: A representation of a <TAG>. A representation of a <TAG>.– Attribute:Attribute: A property of an element. HREF is an A property of an element. HREF is an
attribute of <A>, for example.attribute of <A>, for example.
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 <p>, and nodes elements, such as <body> and <p>, 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 10:1Activity 10: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 10:2Activity 10: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 is an array of all the child nodes under a node.under 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 is the object that contains the
current node. 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 <p>Some text</p> Creating <p>Some text</p>
– 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 <em>text</em>”;p.innerHTML = “Some <em>text</em>”;
– 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 IE6 and MozillaSupported both IE6 and Mozilla
JS: Document Object Model JS: Document Object Model (DOM)(DOM)Activity 10:3 – node editingActivity 10: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)• DOM Methods and PropertiesDOM Methods and Properties
– document.getElementById(ID)document.getElementById(ID) returns the element returns the element with the specified ID attribute.with the specified ID attribute.
– document.getElementsByTagName(tag)document.getElementsByTagName(tag) returns an returns an array of the elements with the specified tag name. array of the elements with the specified tag name. You can use the asterisk (*) as a wildcard to return You can use the asterisk (*) as a wildcard to return an array containing all of the nodes in the document.an array containing all of the nodes in the document.
– document.createElement(tag)document.createElement(tag) creates a new element creates a new element with the specified tag name.with the specified tag name.
– document.createTextNode(text)document.createTextNode(text) creates a new text creates a new text node containing the specified text.node containing the specified text.
– document.documentElementdocument.documentElement is an object that is an object that represents the document itself, and can be used to represents the document itself, and can be used to find information about the document.find information about the document.
JS: DOM – Creating HTML doc.JS: DOM – Creating HTML doc.Activity 10:4Activity 10: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
<b>DOM world!</b>“<b>DOM world!</b>“– 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 10:5Activity 10: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 – Adding or modifying JS: DOM – Adding or modifying inline CSS [Activity 10:6]inline CSS [Activity 10:6]
• Using the STYLE propertiesUsing the STYLE properties• Only useful for setting style on one specific element.Only useful for setting style on one specific element.• However, it is not useful for learning about the However, it is not useful for learning about the
element's style in general, element's style in general, • since it represents only the CSS declarations set in the since it represents only the CSS declarations set in the
element's inline style attribute, element's inline style attribute, • not those that come from style rules elsewhere, such as not those that come from style rules elsewhere, such as
– style rules in the <head> section, or style rules in the <head> section, or – external style sheets.external style sheets.
• Get the element, eg:Get the element, eg: – var div = document.getElementById("div1");var div = document.getElementById("div1");
• Set the styleSet the style– div.style.marginTop = ".25in";div.style.marginTop = ".25in";
• Style reference accepted by W3C:Style reference accepted by W3C:– http://developer.mozilla.org/en/docs/DOM:CSShttp://developer.mozilla.org/en/docs/DOM:CSS
JS: DOM – Creating HTML tableJS: DOM – Creating HTML tableActivity 10:7Activity 10:7
• 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 = document.createElement("tr");First create row: var row = document.createElement("tr");– Then create col: var cell = document.createElement("td");Then create col: var cell = document.createElement("td");
• Create cell content:Create cell content:– var cellText = document.createTextNode("cell content"); var cellText = document.createTextNode("cell content"); – cell.appendChild(cellText);cell.appendChild(cellText);
– Add cell (td) to row: Add cell (td) to row: • row.appendChild(cell);row.appendChild(cell);
• 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);
JS: DOM – Creating HTML table JS: DOM – Creating HTML table – cont.– cont.
• 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";
![[MS-DOM2H]: Internet Explorer Document Object Model (DOM ... · This document describes the level of support provided by Microsoft web browsers for the Document Object Model (DOM)](https://static.fdocuments.in/doc/165x107/5f478f61763a916b9b6765a8/ms-dom2h-internet-explorer-document-object-model-dom-this-document-describes.jpg)
