DOMNodeState Object

A DOMNodeState object is a server-side representation of a DOM node. It shares many methods and properties with its client-side counterpart.

Execute a Selector query asynchronously to obtain a DOMNodeState object. Selector promises also expose the node state API:

const element = Selector('#my-element');

const state = await element();
console.log(state.textContent); // > ABC
// or
console.log(await element.textContent); // > ABC

See the Examine DOM Elements recipe for more information.

Methods and Properties

Node methods and properties

All DOMNodeState objects expose the following API:

Properties

Property Type Description Corresponding client-side entity
childElementCount Number The number of child elements. -
childNodeCount Number The number of child nodes. Node.childNodes.length
hasChildElements Boolean true if the node has child elements. -
hasChildNodes Boolean true if the node has child nodes. Node.hasChildNodes
nodeType Number The node type Node.nodeType.
textContent String The text content of the node and its descendants. Node.textContent.

Methods

Method Type Description
hasClass(className) Boolean true if the class name matches the argument.

Element methods and properties

Only element-based DOMNodeState objects expose the following API:

Properties

Property Type Description Corresponding client-side entity
attributes Object An object with element attributes ({name: value, ... }). Element.attributes()
boundingClientRect Object Element size and position Element.getBoundingClientRect()
checked Boolean The status of a checkbox element or radio input. If the element is neither, undefined. HTMLInputElement.checked
classNames Array of String Element class list. Element.classList
clientHeight Number The inner height of the element in pixels. Element.clientHeight
clientLeft Number The width of the element’s left border in pixels. Element.clientLeft.
clientTop Number The width of the element’s top border in pixels. Element.clientTop.
clientWidth Number The inner width of the element in pixels. Element.clientWidth.
focused Boolean true if the element is focused -
id String The value of the element’s id property Element.id.
innerText String The value of the element’s innerText attribute. See the corresponding HTML spec. Element.innerText
namespaceURI String The namespace URI of the element. null if the element does not belong to a namespace. Element.namespaceURI.
offsetHeight Number The height of the element including padding and borders. HTMLElement.offsetHeight
offsetLeft Number The distance between the element’s outer border and the left border of its offsetParent (exceptions apply). HTMLElement.offsetLeft.
offsetTop Number The distance between the element’s outer border and the top border of its offsetParent. HTMLElement.offsetTop.
offsetWidth Number The width of the element including padding and borders. HTMLElement.offsetWidth.
selected Boolean For <option> elements: selection status (boolean). For other elements: undefined. HTMLOptionElement.selected.
selectedIndex Number For <select> elements: the index of the first selected <option>. For other elements: undefined. HTMLSelectElement.selectedIndex.
scrollHeight Number Content height, including content that you need to scroll into view. Element.scrollHeight.
scrollLeft Number The width of the area you can reveal if you scroll left (in pixels). Element.scrollLeft.
scrollTop Number The height of the area you can reveal if you scroll up (in pixels). Element.scrollTop.
scrollWidth Number Element content width or element width, whichever is greater (in pixels). Element.scrollWidth.
style Object An object with the element’s de facto CSS properties ({ property: value, ... }). Alternative to the getStyleProperty method. Window.getComputedStyle()
tagName String Element name Element.tagName.
value String Value of input elements. For other elements, undefined. HTMLInputElement.value
visible Boolean true if the element meets our visibility criteria.

Methods

Method Type Description Corresponding client-side entity
getStyleProperty(propertyName) Object Returns the computed value of a specific CSS property. Call the .style method to fetch all the properties instead. -
getAttribute(attributeName) String Returns the value of a specific element attribute. Call the .attributes method to fetch all the attributes instead. Element.getAttribute)()
getBoundingClientRectProperty(propertyName) Number Returns the value of the propertyName property from the boundingClientRect object. -
hasAttribute(attributeName) Boolean true if the element has the specified attribute. The attribute’s value is irrelevant. Element.hasAttribute()