JavaScript HTML DOM Document

The HTML DOM Document object is the owner of all other objects in your web page.

HTML DOM Document object

Document object represents your web page.

If you want to access any element in the HTML page, you always start by accessing the document object.

Below are some examples of how to use the document object to access and manipulate HTML.

Find HTML elements

Method Description
document.getElementById(id) Find elements by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name

Change HTML element

Method Description
element.innerHTML = new html content Change the element's inner HTML
element.attribute = new value Change the attribute value of HTML elements
element.setAttribute(attribute, value) Change the attribute value of HTML elements
element.style.property = new style Change the style of HTML elements

Add and remove elements

Method Description
document.createElement(element) Create HTML elements
document.removeChild(element) Remove HTML elements
document.appendChild(element) Add HTML elements
document.replaceChild(element) Replace HTML elements
document.write(text) Write to the HTML output stream

Add an event handler

Method Description
document.getElementById(id).onclick = function(){code} Add an event handler to the onclick event

Find HTML objects

First HTML DOM Level 1 (1998) defined 11 HTML objects, object collections, and properties. They are still valid in HTML5.

Later, in HTML DOM Level 3, more objects, collections, and properties were added.

Properties Description DOM
document.anchors Return all <a> elements with the name attribute 1
document.applets Return all <applet> elements(Not recommended in HTML5) 1
document.baseURI Return the absolute base URI of the document 3
document.body Return the <body> element 1
document.cookie Return the cookie of the document 1
document.doctype Return the doctype of the document 3
document.documentElement Return the <html> element 3
document.documentMode Return the mode used by the browser 3
document.documentURI Return the URI of the document 3
document.domain Return the domain name of the document server 1
document.domConfig Deprecated.Return the DOM configuration 3
document.embeds Return all <embed> elements 3
document.forms Returns all <form> elements 1
document.head Returns the <head> element 3
document.images Returns all <img> elements 1
document.implementation Returns the DOM implementation 3
document.inputEncoding Returns the character set (encoding) of the document 3
document.lastModified Returns the date and time of the document update 3
document.links Returns all <area> and <a> elements with the href attribute 1
document.readyState Returns the (loading) state of the document 3
document.referrer Returns the referenced URI (linked document) 1
document.scripts Returns all <script> elements 3
document.strictErrorChecking Returns whether strict error checking is enforced 3
document.title Returns the <title> element 1
document.URL Returns the complete URL of the document 1