DOM Document
The HTML DOM document object serves as the root owner of all other objects within your web page. Once the page is loaded, a document object is created, acting as the root element that represents all other objects on the page. Using the document object, we can dynamically create elements and add dynamic content to them.
window.document
Is same as
document
Manipulating the HTML element by using a document object model(DOM)
Below are some examples of how to use the document object to access and manipulate HTML.
Finding HTML Elements
|
Method |
Description |
|
document.getElementById(id) |
returns the element having the given element id |
|
document.getElementsByName(name) |
returns all the elements with the given name value. |
|
document.getElementsByTagName(Tagname) |
returns an element having the given tag name |
|
document.getElementsByClassName(name) |
returns an element having the given class name |
Changing HTML Elements
|
Property |
Description |
|
element.innerHTML = newhtmlcontent |
Changes the inner HTML content of an element. |
|
element.attribute = newValue |
Changes the attribute value of an HTML element |
|
element.style.property = newStyle |
Changes the style of an HTML element |
|
Method |
Description |
|
element.setAttribute(attribute, value) |
Changes the attribute value of an HTML element |
Adding and Deleting Elements
|
Method |
Description |
|
document.createElement(element) |
Will Create an HTML element |
|
document.removeChild(element) |
Will remove an HTML element |
|
document.appendChild(element) |
Will add an HTML element |
|
document.replaceChild(new, old) |
Will replace an HTML element |
|
document.write(text) |
Writes into the HTML output stream |
Finding HTML Objects
The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.
Later, in HTML DOM Level 3, more objects, collections, and properties were added. Below is the list of all those.
|
Property |
Description |
DOM |
|
document.anchors |
Returns all <a> elements that have a name attribute |
1 |
|
document.applets |
Returns all <applet> elements (Deprecated in HTML5) |
1 |
|
document.baseURI |
Returns the absolute base URI of the document |
3 |
|
document.body |
Returns the <body> element |
1 |
|
document.cookie |
Returns the document's cookie |
1 |
|
document.doctype |
Returns the document's doctype |
3 |
|
document.documentElement |
Returns the <html> element |
3 |
|
document.documentMode |
Returns the mode used by the browser |
3 |
|
document.documentURI |
Returns the URI of the document |
3 |
|
document.domain |
Returns the domain name of the document server |
1 |
|
document.domConfig |
Obsolete. Returns the DOM configuration |
3 |
|
document.embeds |
Returns all <embed> elements |
3 |
|
document.forms |
Returns all <form> elements |
1 |
|
document.head |
Returns the <head> element |
3 |
|
document.images |
Returns all <img> elements |
1 |
|
document.implementation |
Returns the DOM implementation |
3 |
|
document.inputEncoding |
Returns the document's encoding (character set) |
3 |
|
document.lastModified |
Returns the date and time the document was updated |
3 |
|
document.links |
Returns all <area> and <a> elements that have a href attribute |
1 |
|
document.readyState |
Returns the (loading) status of the document |
3 |
|
document.referrer |
Returns the URI of the referrer (the linking document) |
1 |
|
document.scripts |
Returns all <script> elements |
3 |
|
document.strictErrorChecking |
Returns if error checking is enforced |
3 |
|
document.title |
Returns the <title> element |
1 |
|
document.URL |
Returns the complete URL of the document |
1 |
Accessing field value using the document object
In the following example, we retrieve the value of an input text entered by the user. We use document.myform.name.value to get the value of the "name" field.
Here, document represents the root element that represents the HTML document, myform is the name of the form, name is the attribute name of the input text, and value is the property that returns the value of the input text.
Input:-
Output:-
