Document Object Model
Copyright © 1999 – 2022 Ellis Horowitz DOM 1

What is DOM

• The Document Object Model (DOM) is a programming interface for XML documents.
– It defines the way an XML document can be accessed and manipulated
– this includes HTML documents
• The XML DOM is designed to be used with any
programming language and any operating system. • The DOM represents an XML file as a tree
– The documentElement is the top-level of the tree. This element has one or many childNodes that represent the branches of the tree.
Copyright © 1999 – 2022 Ellis Horowitz DOM 2

Version History
• DOMLevel1concentratesonHTMLandXMLdocumentmodels.Itcontains
functionality for document navigation and manipulation. See: – http://www.w3.org/DOM/
• DOMLevel2addsastylesheetobjectmodeltoDOMLevel1,defines functionality for manipulating the style information attached to a document, and defines an event model and provides support for XML namespaces. The DOM Level 2 specification is a set of 6 released W3C Recommendations, see:
– https://www.w3.org/DOM/DOMTR#dom2
• DOMLevel3consistsof3differentspecifications(Recommendations)
– DOM Level 3 Core, Load and Save, Validation, http://www.w3.org/TR/DOM-Level-3/
• DOMLevel4(akaDOM4)consistsof1specification(Recommendation) – W3C DOM4, http://www.w3.org/TR/domcore/
• Consolidates previous specifications, and moves some to HTML5
• SeeAllDOMTechnicalReportsat:
– https://www.w3.org/DOM/DOMTR
• NowDOMspecificationisDOMLivingStandard(WHATWG),see:
– https://dom.spec.whatwg.org
Copyright © 1999 – 2022 Ellis Horowitz DOM 3

HTML or XML files viewed as a tree – order.xml

S Spade

123 main st

Brooklyn
10012

order.xml

Attributes

DOM represents documents as a hierarchy of node objects Some types of nodes have children
Copyright © 1999 – 2022 Ellis Horowitz DOM 4
id quantity

Some Useful DOM Functions • document is the root element
• document.getElementById(“sample”)
– Returns the one location defined by id=sample, e.g.
document.getElementById(“sample”).style.color=”rgb(“FF”,“00″,“00″); assigns color red to the text
• document.getElementsByTagName(“font”) – returns ALL font elements, e.g.
arrayOfDocFonts = document.getElementsByTagName(“font”);
• innerHTML
– assigns a new value to text defined by id=counter2 document.getElementById(“counter2”).innerHTML = “Number of clicks = 1”;
• style.left, style.color properties
– one can also assign values to CSS properties, e.g.
document.getElementById(‘counter1’).style.left = ‘500px’; • the following slides have more examples
Copyright © 1999 – 2022 Ellis Horowitz DOM 5

Example 1: Using DOM Functions to Alter a Page – Fading Text

John slowly faded into view

Go to: http://csci571.com/examples.html#dom
Copyright © 1999 – 2022 Ellis Horowitz DOM 6

Browser Output
See http://csci571.com/examples/dom/ex1.html
Copyright © 1999 – 2022 Ellis Horowitz DOM 7

Example 2: Extracting Elements by Tag Name

Font1

Font2

Font3

Font4

Browser Output
Copyright © 1999 – 2022 Ellis Horowitz DOM 9

innerHTML Property
• TheinnerHTMLpropertyofanelementwasfirstintroducedasnon-
standard extension by Microsoft in Internet Explorer
• Mozilla-andGecko-basedbrowsers(Firefox),WebKitaswellasIE
decided to support it, even though it was not part of the standard
• innerHTMLiswidelyusedinAjax-basedsites(seelaterinthecourse)
• Elementsthatdonothavebothanopeningandclosingtagcannothavean innerHTML property.
• TheinnerHTMLpropertytakesastringthatspecifiesavalidcombination of text and elements.
• WhentheinnerHTMLpropertyisset,thegivenstringcompletelyreplaces the existing content of the object. If the string contains HTML tags, the string is parsed and formatted as it is placed into the document
• Example1:changesthecolorofthecounter:

Number of clicks = 0

• ThislinesetstheinnerHTMLbyreplacingtheentiretextasfollows:
document.getElementById(“counter2”).innerHTML = “ Number of clicks = ” + hits2 + ““;
• innerHTMLhasbeenaddedtotheHTML5specification,DOMParsingand Serialization specification (sec.7.1, Attributes):
https://www.w3.org/TR/DOM-Parsing/#widl-Element-innerHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
Copyright © 1999 – 2022 Ellis Horowitz DOM 10

Example 3: Setting innerHTML
• Example:updateacounterbyclickingabutton

Number of clicks = 0

Example 5:Reversing the Nodes of a Document Reverse

paragraph #1

paragraph #2

paragraph #3

XMLHTTPRequest Object
• The XMLHttpRequest object is used to exchange data with a server
• With an XMLHttpRequest object you can:
– Update a web page without reloading the page
– Request data from a server after page has loaded – Receive data from a server after page has loaded – Send data to a server in the background
• All modern browsers (IE7+, Edge, Firefox, Chrome, Safari, etc.) have a built-in XMLHttpRequest object.
• “Synchronous” XMLHttpRequest is in process of being removed from web platform (will take many years). Developer Tools will provide warning or error.
• See XMLHttpRequest Editor’s Draft at: https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html • See XMLHttpRequest Living Standard: https://xhr.spec.whatwg.org
Copyright © 1999 - 2022 Ellis Horowitz DOM 22

Loading XML file into the Parser (1)

(^^)/Hi

Example 8: DOM and CSS Properties – Changing
Background Image
setBackgroundImage