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!
Frequently Asked Questions
What is JavaScript HTML DOM Document?
JavaScript HTML DOM Document is an important web development topic. This guide explains the concept in a beginner-friendly way with practical notes and examples.
Why should beginners learn JavaScript HTML DOM Document?
Beginners should learn this topic because it improves their understanding of coding fundamentals, project structure, debugging, and real-world development workflows.
How can I practice JavaScript HTML DOM Document?
The best way to practice is to read the concept, write small examples, test the output, debug mistakes, and apply the topic inside a real project.