The document object represents your web page and provides the easiest way to access any element in an HTML page.
Here are a few examples of how to access and modify HTML using the document object.
Finding HTML Elements
| Method | Description |
| document.getElementById(id) | Find an element by element id |
| document.getElementsByTagName(name) | Find elements by tag name |
| document.getElementsByClassName(name) | Find elements by class name |
Changing HTML Elements
| Property | Description |
| element.innerHTML = Set new content | Change the inner HTML of an element |
| element.attribute = Set new value | Change the attribute value of an HTML element |
| element.style.property = Set new style | Change the style of an HTML element |
Adding and Deleting Elements
| Method | Description |
| document.createElement(element) | Create an HTML element |
| document.removeChild(element) | Remove an HTML element |
| document.appendChild(element) | Add an HTML element |
| document.replaceChild(new, old) | Replace an HTML element |
| document.write(text) | Write into the HTML output stream |
Adding Events Handlers
| Method | Description |
| document.getElementById(id).onclick = function(){code} | Create a function to run on click |
Other HTML Objects
| Property | Description |
|---|---|
| document.anchors | Returns all <a> elements that have a name attribute |
| document.applets | Deprecated |
| document.baseURI | Returns the absolute base URI of the document |
| document.body | Returns the <body> element |
| document.cookie | Returns the document’s cookie |
| document.doctype | Returns the document’s doctype |
| document.documentElement | Returns the <html> element |
| document.documentMode | Returns the mode used by the browser |
| document.documentURI | Returns the URI of the document |
| document.domain | Returns the domain name of the document server |
| document.domConfig | Obsolete |
| document.embeds | Returns all <embed> elements |
| document.forms | Returns all <form> elements |
| document.head | Returns the <head> element |
| document.images | Returns all <img> elements |
| document.implementation | Returns the DOM implementation |
| document.inputEncoding | Returns the document’s encoding (character set) |
| document.lastModified | Returns the date and time the document was updated |
| document.links | Returns all <area> and <a> elements that have a href attribute |
| document.readyState | Returns the (loading) status of the document |
| document.referrer | Returns the URI of the referrer (the linking document) |
| document.scripts | Returns all <script> elements |
| document.strictErrorChecking | Returns if error checking is enforced |
| document.title | Returns the <title> element |
| document.URL | Returns the complete URL of the document |
You can also discover a lot about Javascript by exploring different topics.
Note: We welcome your feedback at Easy Coding School. Please don’t hesitate to share your suggestions or any issues you might have with the article!