Document object represents your page.
If you want to access any element in an HTML page, you always start from accessing the document object.
Here are some examples of how to use the document object to access and manipulate the HTML.
Find HTML elements
| method | description |
|---|---|
| document.getElementById(id) | To find an element by element id |
| document.getElementsByTagName(name) | To find elements by tag name |
| document.getElementsByClassName(name) | To find elements by class name |
Change HTML elements
| method | description |
|---|---|
| element.innerHTML = new html content | Changing the inner HTML elements |
| element.attribute = new value | Changing the attribute value of HTML elements |
| element.setAttribute(attribute, value) | Changing the attribute value of HTML elements |
| element.style.property = new style | Change the style of HTML elements |
Add and remove elements
| method | description |
|---|---|
| document.createElement(element) | Creating an HTML element |
| document.removeChild(element) | Delete HTML elements |
| document.appendChild(element) | Add HTML elements |
| document.replaceChild(element) | Replace HTML elements |
| document.write(text) | Write HTML output stream |
Add an event handler
| method | description |
|---|---|
| document.getElementById(id).onclick = function(){code} | Add an event handler to the onclick event |
Find HTML Object
The first HTML DOM Level 1 (1998), 11 defines a HTML object, a collection of objects and attributes. They are still valid in HTML5.
Later, in the HTML DOM Level 3, adding more objects, collections and properties.
| Attributes | description | JUDGMENT |
|---|---|---|
| document.anchors | <a> returns all the elements have name attributes. | 1 |
| document.applets | Returns all <applet> element (HTML5 is not recommended) | 1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Back <body> element | 1 |
| document.cookie | Return the document cookie | 1 |
| document.doctype | Return the document doctype | 3 |
| document.documentElement | Back <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 server's document | 1 |
| document.domConfig | Discarded. Returns the DOM configuration | 3 |
| document.embeds | Returns all <embed> element | 3 |
| document.forms | Returns all <form> element | 1 |
| document.head | Back <head> element | 3 |
| document.images | Returns all <img> element | 1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Return the document encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all <area> and <a> element has an href attribute | 1 |
| document.readyState | The return of the document (load) state | 3 |
| document.referrer | Returns the URI (linked document) referenced | 1 |
| document.scripts | Returns all <script> element | 3 |
| document.strictErrorChecking | Whether to return enforced error checking | 3 |
| document.title | Back <title> element | 1 |
| document.URL | Return the full URL of the document | 1 |
Source: www.sysoft.net.cn, plus v: 15844800162 depth exchange