- 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;.
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.