The HTML DOM document object serves as the root of the HTML DOM tree, owning all other objects within your web page. To access any HTML element, you always start with the document object.

Using the Document Object

Here are some common ways to use the document object to access and manipulate HTML elements:

Finding HTML Elements

You can find HTML elements using various methods:

document.getElementById(id): Finds an element by its ID.
document.getElementsByTagName(name): Finds elements by their tag name.
document.getElementsByClassName(name): Finds elements by their class name.

Changing HTML Elements

You can change HTML elements using properties and methods:

Properties:some text
- element.innerHTML = new HTML content: Changes the inner HTML of an element.
- element.attribute = new value: Changes the value of an element's attribute.
- element.style.property = new style: Changes the style of an element.
Methods:some text
- element.setAttribute(attribute, value): Changes the value of an element's attribute.

Adding and Deleting Elements

You can add or remove HTML elements using these methods:

document.createElement(element): Creates a new HTML element.
document.removeChild(element): Removes an HTML element.
document.appendChild(element): Adds a new HTML element.
document.replaceChild(new, old): Replaces an existing HTML element with a new one.
document.write(text): Writes text into the HTML output stream.

Adding Event Handlers

You can add event handlers to HTML elements:

document.getElementById(id).onclick = function(){code}: Adds an event handler for the onclick event.

Finding HTML Objects

The HTML DOM Level 1 (1998) defined 11 HTML objects, collections, and properties, which are still valid in HTML5. The HTML DOM Level 3 added more objects, collections, and properties.

Common Document Properties

Here are some commonly used document properties:

document.anchors: Returns all <a> elements with a name attribute (Level 1).
document.applets: Deprecated (Level 1).
document.baseURI: Returns the absolute base URI of the document (Level 3).
document.body: Returns the <body> element (Level 1).
document.cookie: Returns the document's cookies (Level 1).
document.doctype: Returns the document's doctype (Level 3).
document.documentElement: Returns the <html> element (Level 3).
document.documentMode: Returns the mode used by the browser (Level 3).
document.documentURI: Returns the URI of the document (Level 3).
document.domain: Returns the domain name of the document's server (Level 1).
document.domConfig: Obsolete (Level 3).
document.embeds: Returns all <embed> elements (Level 3).
document.forms: Returns all <form> elements (Level 1).
document.head: Returns the <head> element (Level 3).
document.images: Returns all <img> elements (Level 1).
document.implementation: Returns the DOM implementation (Level 3).
document.inputEncoding: Returns the document's encoding (character set) (Level 3).
document.lastModified: Returns the date and time the document was last updated (Level 3).
document.links: Returns all <area> and <a> elements with an href attribute (Level 1).
document.readyState: Returns the loading status of the document (Level 3).
document.referrer: Returns the URI of the referrer (the linking document) (Level 1).
document.scripts: Returns all <script> elements (Level 3).
document.strictErrorChecking: Indicates if error checking is enforced (Level 3).
document.title: Returns the title element (Level 1).
document.URL: Returns the complete URL of the document (Level 1).

Code Example: Changing HTML Content

Here's an example of how you can use the document object to change the content of an HTML element:

<!DOCTYPE html>
<html><body>‍
<p id="demo">
</p>‍
<script>document.getElementById("demo").innerHTML = "Hello World!";</script>‍
</body>
</html>

‍

In this example, getElementById is used to find the element with the ID "demo," and innerHTML is used to change its content to "Hello World!".

‍

Take a look into your desired course