slide1
Download
Skip this Video
Download Presentation
DOM

Loading in 2 Seconds...

play fullscreen
1 / 23

DOM - PowerPoint PPT Presentation


  • 138 Views
  • Uploaded on

DOM. Document Object Model. What is the DOM ?. A browser is a software program As such, it has objects in memory, representing the various elements of the HTML page These objects are organized in a tree data structure  the Document Object Model. HTML vs DOM.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' DOM' - graiden-burt


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

DOM

Document Object Model

what is the dom
What is the DOM ?
  • A browser is a software program
  • As such, it has objects in memory, representing the various elements of the HTML page
  • These objects are organized in a tree data structure  the Document Object Model
html vs dom
HTML vs DOM
  • HTML code translates into a tree
  • Each HTML element is a Node in the tree
  • Nodes can be different: they can represent HTML elements, attributes of HTML elements, text values
  • Important Nodes: Element Nodes, Text Nodes, and Attribute Nodes
slide4
DOM
  • We can navigate the DOM to impact the HTML page
  • We can traverse the tree, access a Node, modify the Node, delete the Node, insert a new Node
dom getelementbyid
DOM - getElementById
  • One way to access a Node is to use the getElementById method; the API is:
  • Element getElementById( DOMString id )
  • We call it with the document object
  • var element = document.getElementById( “CT376” );
  • The above code retrieves (if there is one) the “first” element in the tree that has the id CT376
dom innerhtml
DOM - innerHTML
  • An Element Node, as a Javascript object, has a property named innerHTML, that represents the contents of the HTML element
  • If we have a H1 element with id CT376
  • var h1Element = document.getElementById( “CT376” );
  • h1Element.innerHTML = “CHANGED!!”;
  • We just changed the H1 element
dom innerhtml1
DOM - innerHTML
  • We can display a running clock
  • Have a div element with an id
  • Retrieve it via its id
  • Use setInterval to run a function every second
  • Inside that function, set the contents of the div element to the current date and time (which we can get via the Date class)
dom getelementsbytagname
DOM - getElementsByTagName
  • We can access all the element with the same tag using the getElementsByTagName method (note the s after Element); the API is:
  • NodeList getElementsByTagName( DOMString tagName )
  • It takes one parameter, a String (representing the type of HTML element we want to retrieve)
  • We call it with the document object
  • var pars = document.getElementsByTagName( “p” );
  • The above code retrieves all the paragraphs
dom getelementsbytagname1
DOM - getElementsByTagName
  • var pars = document.getElementsByTagName( “p” );
  • We can loop through a NodeList like we loop through an array  Loop through pars to access them/change them
  • for( var i = 0; i < pars.length; i++ )
  • pars[i].innerHTML = “Changed “ + i;
dom getelementsbyclassname
DOM - getElementsByClassName
  • We can access all the element with the same class using the getElementsByClassName method (note the s after Element)
  • It takes one parameter, a String (representing the class name of the elements we want to retrieve)
  • We call it with the document object
  • var elements = document.getElementsByClassName( “important” );
  • The above code retrieves all the elements that specify important as their class
dom getelementsbyclassname1
DOM - getElementsByClassName
  • var importantElements = document.getElementsByClassName( “important” );
  • Loop through pars to access them/change them
  • for( var i = 0; i < importantElements .length; i++ )
  • importantElements[i].innerHTML = “Changed “ + i;
dom node properties
DOM – Node properties
  • In addition to innerHTML, we also have the following properties:
  • nodeName (read-only), nodeValue, nodeType (read-only)
  • parentNode, firstChild, lastChild, childNodes
  • previousSibling, nextSibling
  • attributes
dom nodename property
DOM – nodeName property
  • It is a read-only property (cannot change it)
  • For an element Node  tag name
  • For an attribute Node  attribute name
  • For a text Node  #text (always)
  • For the document Node  #document
dom nodevalue property
DOM – nodeValue property
  • Read/write property (we can change it)
  • For an element Node  undefined
  • For an attribute Node  attribute value
  • For a textNode  the text itself
dom nodetype property
DOM – nodeType property
  • Read-only property (we cannot change it)
  • For an element Node  1
  • For an attribute Node  2
  • For a text Node  3
  • For a comment Node  8
  • For the document Node  9
dom hierarchy
DOM – hierarchy
  • parentNode: the parent Node of this Node
  • firstChild: the left-most child of this Node
  • lastChild: the right-most child of this Node
  • childNodes: the children of this Node
  • previousSibling: the left sibling of this Node
  • nextSibling: the right sibling of this Node
  • attributes: the attributes of this Node
dom hierarchy1
DOM – hierarchy
  • The data type of the property childNodes is NodeList
  • The data type of the property attributes is NamedNodeMap
  • We can loop through them as if they were arrays
dom hierarchy2
DOM – Hierarchy
  • We can reconstruct the tree by retrieving nodes and checking their parent, siblings, children
dom traversing the tree
DOM – Traversing the Tree
  • Recursive function to traverse the tree
  • To traverse a tree rooted at Node nd
  • If nd is null, do nothing
  • If nd is not null
    • Output value of nd, ..
    • Loop through all children of nd
      • Traverse each child of nd
dom traversing the tree1
DOM – Traversing the Tree
  • function traverse( nd )
  • {
  • if( nd != null )
  • {
  • alert( nd + “, value: “ + nd.nodeValue );
  • var temp = nd.firstChild;
  • while( temp != null )
  • {
  • traverse( temp );
  • temp = temp.nextSibling;
  • }
  • }
  • }
dom interface hierarchy
DOM – Interface Hierarchy
  • Node is at the top of the Interface Hierarchy
  • Node
    • Document
    • DocumentFragment
    • Element
    • CharacterData
    • Attr
    • Entity
    • ….
dom interface hierarchy1
DOM – Interface Hierarchy
  • Node is at the top of the Interface Hierarchy
  • Node
    • Document
    • DocumentFragment
    • Element
    • CharacterData
    • Attr
    • Entity
    • ….
dom interface hierarchy2
DOM – Interface Hierarchy
  • Element
    • HTMLElement
      • HTMLHtmlElement
      • HTMLHeadElement
      • HTMLTitleElement
      • HTMLBodyElement
      • HTMLHeadingElement
      • HTMLParagraphElement
      • HTMLTableElement
      • ….
ad