DOM
This presentation is the property of its rightful owner.
Sponsored Links
1 / 23

DOM PowerPoint PPT Presentation


  • 91 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

DOM

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


Dom

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


Dom

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

      • ….


  • Login