JavaScript HTML DOM Document

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 = 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!

Leave a Reply

Your email address will not be published. Required fields are marked *