JavaScript Introduction | Document Object Model | Document Object

Tags:

Document Object

The Document object represents the web page itself. When you want to access HTML elements that exist on a web page, you must always start from the Document object.

Document Methods

The Document object provides various methods that help with operations related to HTML elements.

  • Selecting HTML elements
  • Creating HTML elements
  • Adding HTML event handlers
  • Selecting HTML objects

Selecting HTML Elements

The methods provided for selecting HTML elements are as follows.

Method Description
document.getElementsByTagName(tagName) Selects all elements with the given tag name.
document.getElementById(id) Selects the element with the given id.
document.getElementsByClassName(className) Selects all elements that belong to the given class.
document.getElementByName(nameAttributeValue) Selects all elements that have the given name attribute value.
document.querySelectorAll(selector) Selects all elements matched by the given selector.

Among these, browser support for the document.querySelectorAll() method varies. The major web browser versions that support document.querySelectorAll() are as follows.

Method ie chrome firefox safari opera
document.querySelectorAll() 9.0 1.0 3.5 3.2 10.0

Creating HTML Elements

The methods provided for creating new HTML elements are as follows.

Method Description
document.createElement(HTML element) Creates the specified HTML element.
document.write(text) Outputs text through the HTML output stream.

Adding HTML Event Handlers

The method provided for adding an event handler to an HTML element is as follows.

Method Description
document.getElementById(id).onclick = function(){ code to execute } Adds event handler code to be connected to a mouse click event.

Selecting HTML Objects

HTML DOM Level 1 was defined in 2017 and continues to be used in HTML5. Later, in 2004, HTML DOM Level 3 was newly defined and is used together with Level 1.

By using the object collections provided by the HTML DOM, HTML objects can be selected easily.

Object Collection Description DOM Level
document.anchors Returns all <a> elements with a name attribute. 1
document.applets Returns all applet elements. (Removed from HTML5) 1
document.body Returns the <body> element. 1
document.cookie Returns the cookie of the HTML document. 1
document.domain Returns the domain name of the server where the HTML document is located. 1
document.forms Returns all <form> elements. 1
document.images Returns all <img> elements. 1
document.links Returns all <area> and <a> elements with an href attribute. 1
document.referrer Returns the URI of the linked document. 1
document.title Returns the <title> element. 1
document.URL Returns the full URL of the HTML document. 1
document.baseURI Returns the absolute base URI of the HTML document. 3
document.doctype Returns the document type of the HTML document. 3
document.documentElement Returns the <html> element. 3
document.documentMode Returns the mode used by the web browser. 3
document.documentURI Returns the URI of the HTML document. 3
document.domConfig Returns the HTML DOM configuration. (No longer used) 3
document.embeds Returns all <embed> elements. 3
document.head Returns the <head> element. 3
document.implementation Returns the HTML DOM implementation. 3
document.inputEncoding Returns the character encoding format of the HTML document. 3
document.lastModified Returns the date and time when the HTML document was last modified. 3
document.readyState Returns the loading status of the HTML document. 3
document.scripts Returns all <script> elements. 3
document.strictErrorChecking Returns whether strict error checking is enabled. 3