List of All HTML DOM Document Object Properties and Methods
John on December 22, 2020
The DOM or Document Object Model is the API that becomes available when an HTML page loads in a browser. This object model contains more than 50 methods and properties which can be accessed using the document keyword in JavaScript.
One example of utilising the DOM API is to get the title of an HTML document using the document.title property:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
</body>
</html>
console.log(document.title);
Test
The DOM has powerful functionalities that will allow you to access how the user is interacting with the page among many other things.
Here is a full list of all the current Document Model Objects:
| Method / Property | Description |
|---|---|
| activeElement | Gets the element that is currently focused on. |
| addEventListener() | Sets an event listener. |
| adoptNode() | Adopt node from another document. |
| anchors | Get all the anchor (a) elements in the document. |
| applets | Get all the applet (applet) elements in the document. |
| baseURI | Get the document base URI |
| body | Get the body element and all the elements inside it. |
| close() | Close the stream opened by document.open(). |
| cookie | Get cookies set in the document. |
| characterSet | Get the document character encoding. |
| createAttribute() | Create an attribute with a specific name. |
| createComment() | Create an HTML comment. |
| createDocumentFragment() | Create a document fragment node. |
| createElement() | Create an element node. |
| createEvent() | Create an event. |
| createTextNode() | Create a text node. |
| defaultView | Get the document window object, null is returned if there is none. |
| designMode | Make the document editable or not. |
| doctype | Get the full doctype declaration. |
| documentElement | Get the html element and all the elements inside it. |
| documentMode | Make the document editable. |
| documentURI | Get the URI of the document. |
| domain | Get the DNS of the document. |
| embeds | Get all the embed elements in the document. |
| execCommand() | Run a clipboard operation on the element in focus. |
| forms | Get all the form elements in the document. |
| fullscreenElement | Get the current element displayed in fullscreen mode. |
| fullscreenEnabled() | Get boolean of whether the document can be viewed in fullscreen mode. |
| getElementById() | Get an element by its ID. |
| getElementsByClassName() | Get all elements with a class. |
| getElementsByName() | Get all elements with a specific name attribute. |
| getElementsByTagName() | Get all elements with a specified tag name. |
| hasFocus() | Returns boolean true or false if the document has focus. |
| head | Get the head element and its contents. |
| images | Get all the img elements in the document. |
| implementation | Get the DOMImplementation object for the document. |
| importNode() | Import a node from another document. |
| inputEncoding | Get the character encoding for the document. |
| lastModified | Get the last modified date of the document. |
| links | Get all the anchor (a) and area elements that have href attributes. |
| normalize() | Remove empty text and join adjacent nodes. |
| normalizeDocument() | Same behaviour as normalize() |
| open() | Open a stream to gather information from the document.write() method. |
| querySelector() | Get the first element that matches a CSS selector. |
| querySelectorAll() | Get a list of all the nodes that match a CSS selector. |
| readyState | Get the loading status of the document. |
| referrer | Get the document that loaded this document. |
| removeEventListener() | Remove an event handler than was added with addEventListener(). |
| renameNode() | Rename a node. |
| scripts | Get all the script elements. |
| strictErrorChecking | Set error checking to strict. |
| title | Get the contents of the HTML title element. |
| URL | Get the full URL of the document. |
| write() | Write HTML or JavaScript to the document. |
| writeln() | Same as write() except it adds a newline after every statement. |
Conclusion
This list of all HTML DOM properties and methods should give you a good idea of what information can be done with Document Objects.
document
list
