Find HTML DOM Elements in JavaScript
In this post, we will introduce several ways to find HTML DOM elements in JavaScript.
querySelector methods
Document or Element methods
querySelectorAll(selectors)
- Parameters: the selectors parameter is a valid CSS selector string.
- Return Value: returns a static (not live)
NodeList
representing a list of the document’s elements that match the specified group of selectors, or an emptyNodeList
in case of no matches.
querySelector(selectors)
- Parameters: the selectors parameter is a valid CSS selector string.
- Return Value: return an
Element
object representing the first element in the document that matches the specified set of CSS selectors, ornull
is returned if there are no matches.
Find by id
1 | document.querySelector("#test") |
Find by HTML tag
1 | document.querySelectorAll("p") |
Find by class names
1 | document.querySelectorAll("div.className1") |
Find by attributes
1 | // match elements contain a attribute |
and
1 | document.querySelectorAll("div.className1.className2"); |
1 | document.querySelectorAll("div[attr1='value1'][attr2='value2']"); |
or
1 | document.querySelectorAll("div.className1, div.className2"); |
Find descendants, children, siblings
1 | // descendants |
For more information about CSS selectors, you can see the CSS selectors documentation.
Traversing match elements
1 | const matchedElements = document.querySelectorAll("div"); |
Filter elements
1 | const matchedElements = document.querySelectorAll("div"); |
1 | const matchedElements = document.querySelectorAll("div"); |
getElementsBy methods
Document or Element methods
getElementById(id)
- Return value: An
Element
object describing the DOM element object matching the specified ID, ornull
if no matching element was found in the document.
getElementsByClassName(className)
- Parameters:
className
a string representing the class name(s) to match; multiple class names are separated by whitespace. - Return value: A live
HTMLCollection
of found elements.
getElementsByName(nameAttrValue)
- Parameters:
nameAttrValue
the value of thename
attribute of the element(s) we are looking for. - Return value: A live
NodeList
collection, meaning it automatically updates as new elements with the samename
are added to, or removed from, the document.
getElementsByTagName(elementName)
- Parameters:
elementName
a string representing the name of the elements. The special string*
represents all elements. - Return value: A live
HTMLCollection
of found elements.
Traverse elements
1 | const testElements = document.getElementsByClassName('test'); |
Filter elements
1 | const matchedElements = document.getElementsByTagName("div"); |
1 | const matchedElements = document.getElementsByTagName("div"); |
The closest method
closest(selector)
looks for the nearest ancestor that matches the CSS-selector.
Summary
Method | Searches by | Call on an element | Live |
---|---|---|---|
querySelector |
CSS-selector | Yes | - |
querySelectorAll |
CSS-selector | Yes | - |
getElementById |
id |
- | - |
getElementsByName |
name |
- | Yes |
getElementsByTagName |
tag or '*' |
Yes | Yes |
getElementsByClassName |
class | Yes | Yes |
References
[1] Searching: getElement*, querySelector*
[2] Document.querySelector() - mdn
[3] Document.querySelectorAll() - mdn