JavaScript - List of DOM Methods and Properties

July 28, 2024

Categories: JavaScript Reference, JavaScript Resources, Reference

Quick Reference

This is a quick reference list of JavaScript DOM methods and properties with examples of how they are used.

JavaScript – DOM attributes.length Property
The attributes.length property returns the number of nodes in a NamedNodeMap.
JavaScript – DOM Attributes name Property
The Attributes name property returns the name of an attribute.
JavaScript – DOM Collection item() Method
The collection item() method returns the element at a specified index in an HTMLCollection, which is an array-like list of HTML elements.
JavaScript – DOM Collection length Property
The Collection length property returns the number of elements in an HTMLCollection, which is an array-like list of HTML elements.
JavaScript – DOM Collection namedItem() Method
The collection namedItem() method returns a named element from an HTMLCollection, which is an array-like list of HTML elements.
JavaScript – DOM document.activeElement Property
The document.activeElement property returns the HTML element that has focus.
JavaScript – DOM document.addEventListener() Method
The document.addEventListener() method attaches an event handler to a document.
JavaScript – DOM document.adoptNode() Method
The document.adoptNode() method adopts a node from another document.
JavaScript – DOM document.baseURI Property
The document.baseURI property returns the base URI of the document.
JavaScript – DOM document.body Property
The document.body property returns the document’s <body> element.
JavaScript – DOM document.characterSet Property
The document.characterSet property returns the character encoding for the document.
JavaScript – DOM document.close() Method
The document.close() method closes a document previously opened with the open() method.
JavaScript – DOM document.cookie Property
The document.cookie property returns a semicolon-separated list of key=value pairs (document cookies).
JavaScript – DOM document.createAttribute() Method
The document.createAttribute() method creates an attribute and returns the attribute as an Attr object.
JavaScript – DOM document.createComment() Method
The document.createComment() method creates a comment and returns the comment node.
JavaScript – DOM document.createDocumentFragment() Method
The document.createDocumentFragment() method creates a new document fragment that can be inserted into any document.
JavaScript – DOM document.createElement() Method
The document.createElement() method creates an element node.
JavaScript – DOM document.createEvent() Method
The document.createEvent() method creates an event object.
JavaScript – DOM document.createTextNode() Method
The document.createTextNode() method creates a text node.
JavaScript – DOM document.defaultView Property
The document.defaultView property returns the document’s window object.
JavaScript – DOM document.designMode Property
The document.designMode property sets or returns if the document is editable.
JavaScript – DOM document.doctype Property
The document.doctype property returns a document’s doctype object. And doctype.name returns the name of the doctype.
JavaScript – DOM document.documentElement Property
The document.documentElement property returns a document’s element object.
JavaScript – DOM document.documentURI Property
The document.documentURI property sets or returns a document’s location.
JavaScript – DOM document.domain Property
The document.domain property returns the domain name of the server the document was loaded from.
JavaScript – DOM document.embeds Property
The document.embeds property returns a collection of all <embed> elements in the document.
JavaScript – DOM document.forms Property
The document.forms property returns a collection of all <form> elements in a document.
JavaScript – DOM document.hasFocus() Method
The document.hasFocus() method returns “true” if the document, or any element in the document, has focus. Otherwise it returns “false”.
JavaScript – DOM document.head Property
The document.head property returns the <head> element of the document.
JavaScript – DOM document.images Property
The document.images property returns a collection of all <img> elements in a document.
JavaScript – DOM document.importNode() Method
The document.importNode() method imports a node from another document, and with the second parameter set to true, will also import child nodes.
JavaScript – DOM document.lastModified Property
The document.lastModified property returns the date and time the document was last modified.
JavaScript – DOM document.links Property
The document.links property returns a collection of all links (<a> and <area> elements) in the document.
JavaScript – DOM document.normalize() Method
The document.normalize() method removes empty text nodes, and joins adjacent text nodes.
JavaScript – DOM document.open() Method
The document.open() method opens a document for writing.
JavaScript – DOM document.readyState Property
The document.readyState property returns the loading status of the current document.
JavaScript – DOM document.referrer Property
The document.referrer property returns the URL of the document that loaded the current document.
JavaScript – DOM document.removeEventListener() Method
The document.removeEventListener() method removes an event handler from a document.
JavaScript – DOM document.scripts Property
The document.scripts property returns a collection of all <script> elements in the document.
JavaScript – DOM document.title Property
The document.title property sets or returns the title of the document.
JavaScript – DOM document.URL Property
The document.URL property returns the full URL of the document.
JavaScript – DOM document.write() Method
The document.write() method writes directly to an open HTML document.
JavaScript – DOM document.writeln() Method
The document.writeln() method writes directly to an open HTML document, with the addition of writing a newline character after each statement.
JavaScript – DOM Element addEventListener() Method
The Element addEventListener() method attaches an event handler to an element.
JavaScript – DOM Element appendChild() Method
The Element appendChild() method appends an element as the last child of a parent element.
JavaScript – DOM Element attributes Property
The Element attributes property returns a collection of attributes in an element.
JavaScript – DOM Element blur() Method
The Element blur() method removes focus from an element.
JavaScript – DOM Element childElementCount Property
The Element childElementCount property returns the number of child elements of an element.
JavaScript – DOM Element childNodes Property
The Element childNodes property returns a list of an elements’s child nodes.
JavaScript – DOM Element children Property
The Element children property returns a list of an element’s child elements.
JavaScript – DOM Element classList Property
The Element classList property returns the CSS classnames of an element.
JavaScript – DOM Element className Property
The Element className property sets or returns an element’s class attribute.
JavaScript – DOM Element click() Method
The Element click() method simulates a mouse-click on an element.
JavaScript – DOM Element clientHeight Property
The Element clientHeight property returns the viewable height of an element, including padding, but not the border, scrollbar or margin.
JavaScript – DOM Element clientLeft Property
The Element clientLeft property returns the width of the element’s left border not including the element’s left padding or left margin.
JavaScript – DOM Element clientTop Property
The Element clientTop property returns the width of the element’s top border not including the element’s top padding or top margin.
JavaScript – DOM Element clientWidth Property
The Element clientWidth property returns the viewable width of an element, including padding, but not the border, scrollbar or margin.
JavaScript – DOM Element cloneNode() Method
The Element cloneNode() method creates a copy of a node (and all its attributes and their values), and returns the clone.
JavaScript – DOM Element closest() Method
The Element closest() method searches up the DOM tree (the element and then its ancestors) for elements which matches a specified CSS selector.
JavaScript – DOM Element compareDocumentPosition() Method
The Element compareDocumentPosition() method compares two nodes, and returns an integer describing where they are positioned in the document.
JavaScript – DOM Element contains() Method
The Element contains() method returns “true” if a node is a descendant of a node, and returns “false” if it’s not.
JavaScript – DOM Element contentEditable Property
The Element contentEditable property sets or returns if the content of an element is editable.
JavaScript – DOM Element dir Property
The Element dir property sets or returns an elements’s dir attribute, which specifies the text-direction.
JavaScript – DOM Element focus() Method
The Element focus() method gives focus to an element if it can receive focus.
JavaScript – DOM Element firstChild Property
The Element firstChild property returns the first child node of a node.
JavaScript – DOM Element firstElementChild Property
The Element firstElementChild property returns the first child element of the specified element.
JavaScript – DOM Element getAttribute() Method
The Element getAttribute() method returns the value of an element’s attribute.
JavaScript – DOM Element getAttributeNode() Method
The Element getAttributeNode() method returns an element’s attribute.
JavaScript – DOM Element getBoundingClientRect() Method
The Element getBoundingClientRect() method returns the size of an element, and its position relative to the viewport.
JavaScript – DOM Element getElementsByClassName() Method
The Element getElementsByClassName() method returns a collection of child elements with a given class name.
JavaScript – DOM Element getElementsByTagName() Method
The Element getElementsByClassName() method returns a collection of child elements with a given tag name.
JavaScript – DOM Element hasAttribute() Method
The Element hasAttribute() method returns “true” if the attribute exists, and “false” if it does not exist.
JavaScript – DOM Element hasAttributes() Method
The Element hasAttributes() method returns “true” if a node has attributes, and “false” if it does not.
JavaScript – DOM Element hasChildNodes() Method
The Element hasChildNodes() method returns “true” if the specified node has any child nodes, and “false” if it does not have any child nodes.
JavaScript – DOM Element id Property
The Element id property sets or returns the value of an element’s id attribute.
JavaScript – DOM Element innerHTML Property
The Element innerHTML property sets or returns the HTML content of an element.
JavaScript – DOM Element innerText Property
The Element innerText property sets or returns the text content of an element.
JavaScript – DOM Element insertAdjacentElement() Method
The Element insertAdjacentElement() method inserts an element into a specified position.
JavaScript – DOM Element insertAdjacentHTML() Method
The Element insertAdjacentHTML() method inserts HTML code into a specified position.
JavaScript – DOM Element insertAdjacentText() Method
The Element insertAdjacentText() method inserts text into a specified position.
JavaScript – DOM Element insertBefore() Method
The Element insertBefore() method inserts a child node before an existing child node.
JavaScript – DOM Element isContentEditable Property
The Element isContentEditable property returns “true” if the content of an element is editable, and “false” if it is not editable.
JavaScript – DOM Element isDefaultNamespace() Method
The Element isDefaultNamespace() method returns “true” if the elements’s namespace is default, and “false” if it is not.
JavaScript – DOM Element isEqualNode() Method
The Element isEqualNode() returns true if two elements are equal.
JavaScript – DOM Element isSameNode() Method
The Element isSameNode() method checks if two nodes are the same node, returning “true” if the two nodes are the same node, and “false” if not.
JavaScript – DOM Element lang Property
The Element lang property returns the value of an element’s lang attribute.
JavaScript – DOM Element lastChild Property
The Element lastChild property returns the last child node of a node.
JavaScript – DOM Element lastElementChild Property
The Element lastElementChild property returns the last child element of an element.
JavaScript – DOM Element namespaceURI Property
The Element namespaceURI property returns the URI of an element’s namespace.
JavaScript – DOM Element matches() Method
The Element matches() method returns true if an element matches a specific CSS selector or selectors.
JavaScript – DOM Element nextElementSibling Property
The Element nextElementSibling property returns the next element in the same tree level.
JavaScript – DOM Element nextSibling Property
The Element nextSibling property returns the next node on the same tree level.
JavaScript – DOM Element nodeName Property
The Element nodeName property returns the name of a node.
JavaScript – DOM Element nodeType Property
The Element nodeType property returns the node type, as a number, of the specified node.
JavaScript – DOM Element nodeValue Property
The Element nodeValue property returns the value of a node. If the node is an element node, the nodeValue property will return null.
JavaScript – DOM Element normalize() Method
The Element normalize() method removes empty text nodes, and joins adjacent text nodes.
JavaScript – DOM Element offsetHeight Property
The Element offsetHeight property returns the viewable height of an element, including padding, border and scrollbar, but not the margin.
JavaScript – DOM Element offsetLeft Property
The Element offsetLeft property returns the left position relative to the parent.
JavaScript – DOM Element offsetParent Property
The Element offsetParent property returns the nearest ancestor that has a position other than static. It return “null” if set to display: none;.
JavaScript – DOM Element offsetWidth Property
The Element offsetWidth property returns the viewable width of an element, including padding, border and scrollbar, but not the margin.
JavaScript – DOM Element offsetTop Property
The Element offsetTop property returns the top position relative to the parent.
JavaScript – DOM Element outerHTML Property
The Element outerHTML property sets or returns the HTML element, including attributes, the start tag, and the end tag.
JavaScript – DOM Element outerText Property
The Element outerText property sets or returns the text content of the specified node.
JavaScript – DOM Element ownerDocument Property
The Element ownerDocument property returns the owner document of a node, as a Document object.
JavaScript – DOM Element parentElement Property
The Element parentElement property returns the parent element of the specified element.
JavaScript – DOM Element parentNode Property
The JavaScript Element parentNode property returns the parent node of an element or node.
JavaScript – DOM Element previousSibling Property
The Element previousSibling property returns the previous node on the same tree level.
JavaScript – DOM Element previousElementSibling Property
The Element previousElementSibling property returns the previous element in the same tree level.
JavaScript – DOM Element querySelector() Method
The Element querySelector() method returns the first child element that matches the specified CSS selector or selectors of an element.
JavaScript – DOM Element querySelectorAll() Method
The Element querySelectorAll() method returns an element’s child elements, as a static NodeList object, that match specified CSS selectors.
JavaScript – DOM Element remove() Method
The Element remove() method removes an element or node from the document.
JavaScript – DOM Element removeAttribute() Method
The Element removeAttribute() method removes an attribute from an element.
JavaScript – DOM Element removeAttributeNode() Method
The Element removeAttributeNode() method removes an attribute from an element.
JavaScript – DOM Element removeChild() Method
The Element removeChild() method removes an element’s child.
JavaScript – DOM Element removeEventListener() Method
The Element removeEventListener() method removes an event handler to an element.
JavaScript – DOM Element replaceChild() Method
The Element replaceChild() method replaces a child node with a new node.
JavaScript – DOM Element scrollHeight Property
The Element scrollHeight property returns the height of an element including padding, but excluding borders, scrollbars, or margins.
JavaScript – DOM Element scrollIntoView Property
The Element scrollIntoView() method scrolls an element into the visible area of the browser window.
JavaScript – DOM Element scrollLeft Property
The Element scrollLeft property sets or returns the number of pixels an element’s content is scrolled horizontally.
JavaScript – DOM Element scrollTop Property
The Element scrollTop property sets or returns the number of pixels an element’s content is scrolled vertically.
JavaScript – DOM Element scrollWidth Property
The Element scrollWidth property returns the width of an element including padding, but excluding borders, scrollbars, or margins.
JavaScript – DOM Element setAttribute() Method
The Element setAttribute() method sets a value for an attribute.
JavaScript – DOM Element setAttributeNode() Method
The Element setAttributeNode() method adds an attribute node to an element, replacing existing attribute nodes.
JavaScript – DOM Element style Property
The Element style property sets or returns the values of an element’s style attribute.
JavaScript – DOM Element tabIndex Property
The Element tabIndex property sets or returns the value of the tabindex attribute of an element.
JavaScript – DOM Element tagName Property
The Element tagName property returns the tag name of an element in UPPERCASE.
JavaScript – DOM Element textContent Property
The Element textContent property sets or returns the text content of the specified node and all its descendants.
JavaScript – DOM Element title Property
The Element title property sets or returns the value of an element’s title attribute.
JavaScript – DOM NodeList entries() Method
The NodeList entries() method returns an iterator with the key/value pairs from a NodeList, which is an array-like list of Node Objects.
JavaScript – DOM NodeList forEach() Method
The NodeList forEach() method executes a callback function for each node in a NodeList, which is an array-like list of Node Objects.
JavaScript – DOM NodeList item() Method
The NodeList item() method returns the node at a specified index in a NodeList, which is an array-like list of Node Objects.
JavaScript – DOM NodeList keys() Method
The NodeList keys() method returns an iterator with the keys from a NodeList, which is an array-like list of Node Objects.
JavaScript – DOM NodeList length Property
The NodeList length property returns the number of nodes in a NodeList, which is an array-like list of Node Objects.
JavaScript – DOM NodeList values() Method
The NodeList values() method returns an iterator with the values from a NodeList, which is an array-like list of Node Objects.
JavaScript – DOMTokenList add() Method
The DOMTokenList add() method adds one or more tokens to a DOMTokenList, which is a set of space-separated tokens that can be accessed by index.
JavaScript – DOMTokenList contains() Method
The DOMTokenList contains() method returns “true” if a DOMTokenList contains a class. If not, it will return “false”.
JavaScript – DOMTokenList entries() Method
The DOMTokenList entries() method returns an iterator with the key/value pairs from a DOMTokenList.
JavaScript – DOMTokenList forEach() Method
The DOMTokenList forEach() method executes a callback function for each token in a DOMTokenList.
JavaScript – DOMTokenList item() Method
The DOMTokenList item() method returns the token at a specified index in a DOMTokenList.
JavaScript – DOMTokenList keys() Method
The DOMTokenList keys() method returns an iterator with the keys from a DOMTokenList.
JavaScript – DOMTokenList length Property
The DOMTokenList length property returns the number of tokens in a DOMTokenList.
JavaScript – DOMTokenList remove() Method
The DOMTokenList remove() method removes tokens from the DOMTokenList, which is a set of space separated tokens that can be accessed by index.
JavaScript – DOMTokenList replace() Method
The DOMTokenList replace() method replaces a token in a DOMTokenList, which is a set of space separated tokens that can be accessed by index.
JavaScript – DOMTokenList supports() Method
The DOMTokenList supports() method returns “true” if a token in a DOMTokenList is one of the attribute’s supported tokens.
JavaScript – DOMTokenList toggle() Method
The DOMTokenList toggle() method toggles a token in a DOMTokenList on or off.
JavaScript – DOMTokenList value Property
The DOMTokenList value property returns a DOMTokenList as a string
JavaScript – DOMTokenList values() Method
The DOMTokenList values() method returns an iterator with the keys from a DOMTokenList.

JavaScript Notes:

When using JavaScript, single or double quotation marks are acceptable and work identically to one another; choose whichever you prefer, and stay consistent
JavaScript is a case-sensitive language; firstName is NOT the same as firstname
Arrays count starting from zero NOT one; so item 1 is position [0], item 2 is position [1], and item 3 is position [2] … and so on
JavaScript variables must begin with a letter, $, or _
JavaScript variables are case sensitive (x is not the same as X)

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.