The HTML DOM document object is the main object that contains and controls all other objects on your web page.
The document object represents your web page.
To access any element on an HTML page, you always begin by referencing the document object.
Here are some examples of how you can use the document object to interact with and modify HTML.
|
Method |
Description |
|
document.getElementById(id) |
Locate an element by its ID. |
|
document.getElementsByTagName(name) |
Locate elements by their tag name. |
|
document.getElementsByClassName(name) |
Locate elements by their class name. |
|
Property |
Description |
|
element.innerHTML = new html content |
Modify the inner HTML content of an element. |
|
element.attribute = new value |
Update the attribute value of an HTML element. |
|
element.style.property = new style |
Modify the style of an HTML element. |
|
Method |
Description |
|
element.setAttribute(attribute, value) |
Alter the value of an attribute in an HTML element. |
|
Method |
Description |
|
document.createElement(element) |
Create a new HTML element. |
|
document.removeChild(element) |
Delete an HTML element. |
|
document.appendChild(element) |
Insert a new HTML element. |
|
document.replaceChild(new, old) |
Swap out an HTML element. |
|
document.write(text) |
Output content to the HTML document. |
|
Method |
Description |
|
document.getElementById(id).onclick = function(){code} |
Attaching an event handler to an onclick event. |
The initial HTML DOM Level 1 (1998) defined 11 HTML objects, object collections, and properties, which remain valid in HTML5. Later, HTML DOM Level 3 introduced additional objects, collections, and properties.
|
Property |
Description |
DOM |
|
document.anchors |
Retrieves all <a> elements that have a name attribute. |
1 |
|
document.applets |
Deprecated |
1 |
|
document.baseURI |
Retrieves the absolute base URL of the document. |
3 |
|
document.body |
Returns the <body> element of the document. |
1 |
|
document.cookie |
Retrieves the document’s cookies. |
1 |
|
document.doctype |
Retrieves the document’s doctype. |
3 |
|
document.documentElement |
Returns the <html> element of the document. |
3 |
|
document.documentMode |
Retrieves the rendering mode used by the browser. |
3 |
|
document.documentURI |
Retrieves the URL of the document. |
3 |
|
document.domain |
Retrieves the domain name of the server hosting the document. |
1 |
|
document.domConfig |
Obsolete. |
3 |
|
document.embeds |
Retrieves all <embed> elements. |
3 |
|
document.forms |
Retrieves all <form> elements. |
1 |
|
document.head |
Retrieves the <head> element of the document. |
3 |
|
document.images |
Retrieves all <img> elements. |
1 |
|
document.implementation |
Retrieves the DOM implementation. |
3 |
|
document.inputEncoding |
Retrieves the character encoding (charset) of the document. |
3 |
|
document.lastModified |
Retrieves the date and time when the document was last modified. |
3 |
|
document.links |
Retrieves all <area> and <a> elements that have an href attribute. |
1 |
|
document.readyState |
Retrieves the loading status of the document. |
3 |
|
document.referrer |
Retrieves the URL of the referring document (the document that linked to the current one). |
1 |
|
document.scripts |
Retrieves all <script> elements. |
3 |
|
document.strictErrorChecking |
Retrieves whether error checking is enabled. |
3 |
|
document.title |
Retrieves the <title> element of the document. |
1 |
|
document.URL |
Retrieves the full URL of the document. |
1 |