HTML DOM (Document Object Model) is a programming interface that represents the elements of an HTML document in a tree-like structure.
- Allows developers to change content and layout using JavaScript.
- Enables dynamic updates and user interaction on websites.
- Facilitates the addition, removal, or modification of HTML elements.
<html>
<head>
<script>
function changeText() {
document.getElementById("demo").textContent = "Hello, World!";
}
script>
head>
<body>
<p id="demo">Original Textp>
<button onclick="changeText()">Change Textbutton>
body>
html>
HTML DOM Attribute Object:
Methods:
Methods | Description |
|---|---|
| getNamedItem() | Return the attribute node from the NamedNodeMap object. |
| item() | Return the node to the specified index. |
| removeNamedItem() | Remove the node with the specified name in a named node object. |
Properties:
Properties | Description |
| isId | Returns a true if the Element has an attribute type of ID, otherwise, it returns a false |
| length | Get the number of items in a NodeList object. |
| specified | It returns true if the element has a specified attribute, otherwise, it returns a false |
| value | Return the value of any attribute. |
Console Object Methods:
Methods | Description |
|---|---|
| assert( ) | Write a message for user on the console only if the expression evaluates to false |
| clear() | Clear the console and writes some message |
| count() | Write the number of times the console.count() method is called. |
| error() | Display an error message on the console |
| group() | Create a group of messages in the console |
| groupCollapsed() | Create a collapsed group of messages in the console. |
| groupEnd() | To indicate the end of a group of messages in the console |
| info() | Writing a message in the console. |
| log() | It is used for writing a message in the console. |
| table() | It is used for writing data in tabular form in the console view. |
| time() | It is used to start a timer in the console view. |
| timeEnd() | It is used to end a timer started by the console.time() method. |
| trace() | It is used to display the trace which represents how the code ended up at a certain point. |
| warn() | It is used to write a warning message in the console. |
Document Object Properties:
Properties | Description |
|---|---|
| activeElement | Return the currently active elements in the HTML document. |
| baseURI | Return the base Uniform Resource Identifier (URI) of the document. |
| body | It only returns the content present in the Tag. |
| cookie | cookies are used by websites to keep track of user-specific information. |
| characterSet | Return the character encoding for the document at the time of parsing. |
| defaultView | It is used to return the document Window Object |
| designMode | It is used to specify whether the document is editable or not. |
| doctype | Return the doctype of any HTML document. |
| documentElement | Return the documentElement as an Element Object |
| documentMode | Detect the document mode used by the browser to render the current page. |
| domain | Return the domain name of the website server that is loaded or running in the current document. |
| fullscreenElement | Return the element that is currently in fullscreen. |
| head | Return the first occurrence of the head if multiple heads in the document |
| images Collection | Return the collection of |
| implementation | Returns the DOMImplementation object associated with the current document. |
| inputEncoding | Returns the character encoding used for parsing the document. |
| lastModified | Return the date and time of the current document that was last modified. |
| readyState | Return the loading status of the current document. This property is used for read-only. |
| referrer | Return the URI of the page that linked to the current page. |
| strictErrorChecking | Returns whether strict error checking can be enforced on a document or not. |
| title | It is used to sets the value of the title in the document. |
| URL | Return a string that contains the complete URL of the current document. |
Methods | Description |
|---|---|
| addEventListener() | Attaches an event handler to the specified element. |
| adoptNode() | It is used to adopt a node from another document. |
| close() | It is used to close the output stream. |
| createAttribute() | It is used to create an attribute with the specified name and returns the attribute object. |
| createComment() | Create a comment node with some specified text. |
| createDocumentFragment() | A new document fragment that can be inserted into any document can be created using the offscreen node. |
| createElement() | The document.createElement() is a method used to create the HTML element. |
| createEvent() | Creates an event object of the specified type. |
| createTextNode() | Create a TextNode which contains element node and a text node. |
| execCommand() | Execute a command specified by the user on the editable selected section. |
| fullscreenEnabled() | Check the document can be viewed in full screen mode or not. |
| getElementById() | Returns an element with a specified value. |
| getElementsByClassName() | Returns a collection of elements with a specified class name(s). |
| getElementsByName() | Returns collection of all elements of particular document by name. |
| getElementsByTagName() | Returns the collection of all the elements in the document with the given tag name. |
| hasFocus() | Indicating whether an element or document has the focus or not. |
| importNode() | Copy of a node from another document and imports it to the current document. |
| normalize() | The normalize() method does not require any parameter. |
| normalizeDocument() | Normalize an HTML document by remove any empty text nodes if exists. |
| open() | The open() method allows you to write on a document. |
| querySelector() | Return the first element that matches a specified CSS selector(s) in the document. |
| removeEventListener() | Remove an event handler associated with the addEventListener() method |
| renameNode() | It is used to rename the nodes. |
| write() | It is used to write some content or JavaScript code in a Document. |
| writeln() | It is used to write a document with additional property of newline character after each statement. |
Collection | Description |
|---|---|
| anchors | Return the collection of all element in a HTML document. |
| applets | Return a collection of all possible elements available in the HTML |
| embeds | Return the collection of all embedded elements. |
| forms | Return the collection of all |
| links | Return the collection of all and elements with “href” attribute in a HTML document. |
| scripts | Return the collection of all |