JavaScript can also access the HTML Document Object Model (DOM) similar to other programming languages. All HTML elements are defined as “objects” in the DOM, where each object has some set of methods and properties. The HTML DOM property is a value that can be retrieved or changed, and the HTML DOM method is an action that you can perform for HTML elements, for instance, deleting HTML elements.
This write-up will discuss HTML DOM Methods and Properties. Moreover, we will also provide separate lists of the most useful HTML DOM methods and properties in JavaScript. So, let’s start!
HTML DOM Methods
The “actions” you perform on HTML elements are called HTML DOM Methods. You can use the HTML DOM methods as a JavaScript beginner for generating the required results without putting in too much effort and writing a bunch of code. The HTML DOM methods can assist you in simplifying the task.
In the below-given table, we have compiled some of the HTML DOM Methods that can be utilized on all HTML elements:
| HTML DOM Methods | Description |
| addEventListener() | The “addEventListener()” HTML DOM method is utilized for attaching an event handler to a particular element. |
| appendChild() | The “appendChild()” method is used to add a new child node for an element. |
| blur() | The “blur()” method is used to eliminate focus from an HTML element. |
| click() | The “click()” method puts on a mouse-click on an HTML element. |
| cloneNode() | The “cloneNode()” method is utilized to clone an element. |
| closest() | The “closest()” HTML DOM method is utilized for searching the DOM tree for the closest element, which matches with a specified CSS selector. |
| compareDocumentPosition() | The “compareDocumentPosition()” HTML DOM method is utilized for comparing the document position of any two HTMLelements. |
| exitFullscreen() | The “existFullscreen()” property cancels an element in a fullscreen mode. |
| focus() | The “focus()” HTML DOM method for assigning focus to an HTML element. |
| getAttribute() | The “getAttribute()” HTML DOM method displays an element’s attribute value. |
| getAttributeNode() | The “getAttributeNode()” HTML DOM method displays the specified attribute node. |
| getBoundingClientRect() | The “getBoundingClientRect()” HTML DOM method outputs the position and size of an element related to the viewport. |
| getElementsByClassName() | The “getElementByClassName()” HTML DOM method displays the list of child elements of a particular class. |
| getElementsByTagName() | The “getElementsByTagName()” HTML DOM method displays the list of child elements of a particular tag. |
| hasAttribute() | The “hasAttribute()” HTML DOM method outputs true if an element has the added attribute, otherwise, this method returns false. |
| hasChildNodes() | The “hasChildNodes()” HTML DOM method outputs true if a particular element has any child nodes, otherwise, this method returns false. |
| insertAdjacentElement() | The “insertAdjacentElement()” HTML DOM method is utilized for inserting a HTML element at a particular position related to the active element. |
| insertAdjacentHTML() | The “insertAdjacentHTML()” HTML DOM method is utilized for inserting an HTML formatted text at a particular position related to the active element. |
| insertAdjacentText() | The “insertAdjacentText()” HTML DOM method is utilized for inserting text at a particular position related to the active element. |
| insertBefore() | The “insertBefore()” HTML method is used for inserting a new child node before an existing child node. |
| isDefaultNamespace() | The “isDefaultNamespace()” HTML DOM method outputs true if a particular namespaceURI is set as default, otherwise, this method outputs false. |
| isEqualNode() | The “isEqualNode()” method is used for checking if two HTML elements are equal or not. |
| isSameNode() | The “isSameNode()” HTML DOM method is utilized for verifying if two HTML elements are the same node or not. |
| isSupported() | The “isSupported()” HTML DOM method outputs true if a particular feature is supported for the HTML element. |
| matches() | The “matches()” method outputs a Boolean value indicating whether a specific CSS selector matches an element or not. |
| normalize() | The “normalize()” HTML DOM method is utilized for joining adjacent text nodes and for eliminating empty text nodes from a HTML element. |
| querySelector() | The “querySelector()” HTML DOM method is utilized to output the first child element that gets matched with a particular CSS selector of an HTML element. |
| querySelectorAll() | The “querySelectorAll()” method returns all child elements that match a specified CSS selector of an element. |
| remove() | The “remove()” HTML DOM method is utilized for removing a particular HTML element from DOM. |
| removeAttribute() | The “removeAttribute()” HTML DOM method is utilized for removing a particular attribute from a HTML element. |
| removeAttributeNode() | The “removeAttributeNode()” HTML DOM method eliminates the added attribute node and shows it as output. |
| removeChild() | The “removeChild()” HTML DOM method is utilized for removing a particular a child node from an HTML element. |
| removeEventListener() | The “removeEventListener()” HTML DOM method is utilized for removing an attached event handler. |
| replaceChild() | The “replaceChild()” HTML DOM method is used for replacing a child node from an HTML element. |
| requestFullscreen() | The “requestFullscreen()” HTML DOM method is utilized for showing the HTML element in fullscreen mode. |
| scrollIntoView() | The “scrollIntoView()” HTML DOM method is utilized for scrolling a particular HTML element into the browser’s visible area. |
| setAttribute() | The “setAttribute()” HTML DOM method is utilized for setting the attributes to the added value. |
| setAttributeNode() | The “setAttributeNode()” HTML DOM method is utilized for changing or displaying the specified attribute node. |
| toString() | The “toString()” HTML DOM method is utilized for converting an element to a string. |
HTML DOM Properties
The values you can set or change the HTML elements are called HTML DOM Properties. The HTML properties are defined by DOM, which can be easily modified by using the pre-defined HTML DOM Properties.
Now, check out the below-given table; we have compiled some of the HTML DOM Properties that can be utilized on all HTML elements:
| HTML DOM Properties | Description |
| accessKey | The “accessKey” sets or returns the accesskey HTML DOM property. |
| attributes | The “attributes” HTML DOM property outputs a NamedNodeMap of the attribute of an HTML element. |
| activeElement | The “activeElement” property gets the element that is currently active. |
| childElementCount | The “childElementCount” HTML DOM property is utilized for displaying the total number of an HTML element’s child elements. |
| childNodes | The “childNodes” HTML DOM property outputs the child nodes of an HTML element. |
| classList | The “classList” HTML DOM property returns an element’s class name. |
| className | The “className” HTML DOM property is utilized for changing or displaying the HTML class name value. |
| clientHeight | The “clientHeight” HTML DOM property outputs the HTML element’s height. |
| clientLeft | The “clientLeft” HTML DOM property is utilized for displaying the left border’s width of an HTML element. |
| clientTop | The “clientTop” HTML DOM property is utilized for displaying the top border’s width of an HTML element. |
| clientWidth | The “clientWidth” property returns or outputs the width of an element, which includes padding. |
| contentEditable | The “contentEditable” HTML DOM property sets or returns whether an element’s content is editable or not. |
| dir | The “dir” HTML DOM property is utilized for changing or displaying an element’s dir value. |
| firstChild | The “firstChild” HTML DOM property is utilized for displaying the first child node of an HTML element. |
| firstElementChild | The “firstElementChild” HTML DOM property is utilized for displaying the first child element of an HTML element. |
| id | The “id” HTML DOM property is utilized for changing and displaying an element’s id attribute value. |
| innerHTML | The “innerHTML” HTML DOM property is utilized for changing and displaying the element’s content. |
| innerText | The “innerText” HTML DOM property is utilized for changing and displaying the node’s text content and its descendants. |
| isContentEditable | The “isContentEditable” HTML DOM property is utilized for checking if an element’s content is editable or not. |
| lang | The “lang” HTML DOM property is utilized for setting the lang attribute’s value of an HTML element. |
| lastChild | The “lastChild” property returns an elements’ last child node. |
| lastElementChild | The “lastElementChild” HTML DOM property is utilized to display an element’s last child element. |
| namespaceURI | The “namespaceURL” HTML DOM property is utilized to output the namespace URI of an HTML element. |
| nextSibling | The “nextSibling” HTML DOM property is utilized for displaying the next node in a tree level. |
| nextElementSibling | The “nextElementSibling” HTML DOM property is utilized for displaying the next HTML element in a tree level. |
| nodeName | The “nodeName”HTML DOM property outputs the node name. |
| nodeType | The “nodeType” HTML DOM property is utilized for displaying the node type. |
| nodeValue | The “nodeValue” HTML DOM property is utilized for displaying or changing the node value. |
| ownerDocument | The “ownerDocument” property sets or returns the root element or document object for an element. |
| parentNode | The “parentNode” HTML DOM property is utilized for displaying the parent node of an element. |
| parentElement | The “parentElement” HTML DOM property is utilized for displaying the HTML element’s parent element. |
| previousSibling | The “previousSibling” HTML DOM property is utilized for displaying the HTML element’s previous sibling. |
| previousElementSibling | The “previousElementSibling” HTML DOM property is utilized for displaying the sibling of the previous HTML element. |
| scrollHeight | The “scrollHeight” HTML DOM property is utilized for displaying the height of an HTML element. |
| style | The “style” HTML DOM property is utilized for changing or displaying the attribute’s value of an HTML element. |
| tabIndex | The “tabIndex” HTML DOM property is utilized for changing or displaying the attribute’s tab index value of an HTML element. |
| tagName | The “tagName” HTML DOM property is utilized for displaying an element’s tag name. |
| textContent | The “textContent” HTML DOM property is utilized for changing or displaying a node’s textual content. |
| title | The “title” is utilized for changing or displaying the title attribute’s value of the HTML element. |
| scripts | The “scripts” property is used to get all the script elements. |
| strictErrorChecking | The “strictErrorChecking” property is utilized for setting the error checking to strict mode. |
| URL | The “URL” HTML DOM property is utilized for getting the full URL of an HTML document. |
Conclusion
An HTML element defined as an object has some DOM properties and methods. HTML DOM methods specify the action you want to perform on the HTML element, whereas the HTML DOM properties are the values you want to get or set for a particular object or HTML element. This write-up discussed HTML DOM Methods and Properties. Moreover, we also provided separate lists of the most useful HTML DOM methods and properties in JavaScript.
