- Categories: JavaScript Reference, JavaScript Resources, Reference
Quick Reference
This is a quick reference list of JavaScript DOM Elements methods and properties with examples of how they are used.
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.
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.
Why 1SMARTchicken?
See More →
Thanks for your support!
JavaScript Books
All are affiliate links. Thank you for your support!
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)
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.