Showing Page:
Thursday, April 07, 2022 Document Object Model (DOM)
Document Object Model (DOM)
Your name
Axia College of University of Phoenix
Showing Page:
Thursday, April 07, 2022 Document Object Model (DOM)
The Document Object Model (DOM) is an independent (language and platform) interface
for HTML and XML documents which allow programs and scripts to define the logical structure
of documents for dynamically access, update and manipulate. By using the DOM, programmers
can build/create documents; navigate their structure and editing in the elements and content of
the document also possible with this.
In this paper I choose two DOM objects Document Object and Image Object to
describing their methods and properties which are used to change the webpage dynamically.
According to the article [1], the object model contains the various methods and properties
which are used to create new Webpages and makes the changes in these Webpages dynamically.
These are so powerful that we can change the title property dynamically after a Web page is
rendered. This means we can change the title of the document which is implemented under
<head> section of every webpage.
The Document object’s methods are as follows: close()- this method is used to close the
window or frame opened by the; getElementById()- the very first element
which have the specified id can be access by this method; getElementsByName()- document
Showing Page:
Thursday, April 07, 2022 Document Object Model (DOM)
elements are accessed by their name through this method; getElementsByTagName()- specified
tag name is used in method to access the element; open()- used to create/generate the new
window or frame; write(text)- text contents can be written on the document by this; writeln(text)-
Same as write(), but adds a newline character after each statement.
The Document properties are as follows: anchors, forms, images and links - returns an
array of all available anchors, forms, images and links respectively in the current document ;
cookie- all name/value pairs of cookies in the document returned by this property;
documentMode - Returns the render mode used by the browser to render the document; domain-
Returns the server domain name that loaded the document; lastModified - Returns last modified
the date and time of the document; readyState- loading status of the document returned by this;
referrer- URL of the document that loaded currently is retrieved by this property; title- title of
the document as specified under <head> section can be set or returned by this; URL - full URL
of the currently opened document in web browser can be retrieved by this.
The Image object represents an image created using the <img> element [1]. The Image
object allows one to create new dynamic image and can change the properties of these images
dynamically. Simple animations can be made by manipulating the properties and using different
methods. The most important property of the Image object is the scr property, which allows
JavaScript to change an image dynamically [1].
For creating a simple animations the setTimeout () method and setInterval () methods are
used to swap out different images and swapping though the frames in a series of images. The
Showing Page:
Thursday, April 07, 2022 Document Object Model (DOM)
startInterval () method can be used to start the series of images while the clearInterval () method
is used to stop them.
The Image object contains the following properties: align the alignment of an image in
relation to the surrounding text can be set or return; alt used to set or return the image’s
alternate text; border border width in pixels can be set or returned by this; height image
height in pixels can set or returned; hspace Sets or returns the number of pixels in the
horizontal space to the left and right of the image; isMap used indicates whether the image is a
server-side image map or not (true/false); longDesc image’s long description can be
manipulated; name Sets or returns the image name; src URL of the displayed image can be
set or returned; useMap client-side image map is possible by this; vspace Sets or returns the
amount of vertical space above and below the image in pixels; width Sets or returns the image
width in.
The Document Object Model represents elements on a Web page that can be used to
create and manipulate the webpage dynamically. The Document object and Image object have a
set of their own properties and methods used to accomplish these dynamic changes in a Web
Showing Page:
Thursday, April 07, 2022 Document Object Model (DOM)
[1] Gosselin, D. (2008). JavaScript (4th ed.). Boston: Thomson Course Technology. Retrieved:
December 13, 2010 Retrieved: December 14, 2010

Unformatted Attachment Preview

Name: Description: ...
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.