@wordpress/dom
Advanced tools
@wordpress/dom is a utility package for manipulating and interacting with the DOM (Document Object Model) in WordPress projects. It provides a set of functions to handle common DOM operations, making it easier to work with elements, attributes, and events in a WordPress environment.
Focus Management
This feature allows developers to manage focus within the DOM, such as focusing the first tabbable element within a container. This is particularly useful for accessibility and ensuring a smooth user experience.
const { focus } = require('@wordpress/dom');
// Example: Focus the first tabbable element within a container
focus.focusTabbable(containerElement);Element Manipulation
Provides utility functions to manipulate DOM elements, such as removing an element from the DOM. This simplifies common tasks that would otherwise require more verbose native DOM methods.
const { remove } = require('@wordpress/dom');
// Example: Remove an element from the DOM
remove(elementToRemove);Attribute Management
Allows for easy management of element attributes, such as toggling an attribute's presence or value. This is useful for dynamically updating the DOM based on user interactions or application state.
const { toggleAttribute } = require('@wordpress/dom');
// Example: Toggle an attribute on an element
toggleAttribute(element, 'aria-hidden', true);jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. Compared to @wordpress/dom, jQuery is more general-purpose and widely used outside of WordPress-specific projects.
dom-helpers is a tiny modular DOM library that provides a set of utilities for DOM manipulation. It is similar to @wordpress/dom in that it offers functions for common DOM tasks, but it is not specifically tailored for WordPress environments.
Vanilla JS DOM is a collection of utility functions for DOM manipulation using vanilla JavaScript. It provides similar functionalities to @wordpress/dom but is designed to be a lightweight alternative without any dependencies, suitable for projects that do not require the full WordPress ecosystem.
DOM utilities module for WordPress.
Install the module
npm install @wordpress/dom --save
# computeCaretRect
Get the rectangle for the selection in a container.
Returns
?DOMRect: The rectangle.# documentHasSelection
Check wether the current document has a selection. This checks both for focus in an input field and general text selection.
Returns
boolean: True if there is selection, false if not.# focus
Object grouping focusable and tabbable utils
under the keys with the same name.
# getOffsetParent
Returns the closest positioned element, or null under any of the conditions of the offsetParent specification. Unlike offsetParent, this function is not limited to HTMLElement and accepts any Node (e.g. Node.TEXT_NODE).
Related
Parameters
Node: Node from which to find offset parent.Returns
?Node: Offset parent.# getRectangleFromRange
Get the rectangle of a given Range.
Parameters
Range: The range.Returns
DOMRect: The rectangle.# getScrollContainer
Given a DOM node, finds the closest scrollable container node.
Parameters
Element: Node from which to start.Returns
?Element: Scrollable container node, if found.# insertAfter
Given two DOM nodes, inserts the former in the DOM as the next sibling of the latter.
Parameters
Element: Node to be inserted.Element: Node after which to perform the insertion.Returns
void:# isEntirelySelected
Check whether the contents of the element have been entirely selected. Returns true if there is no possibility of selection.
Parameters
Element: The element to check.Returns
boolean: True if entirely selected, false if not.# isHorizontalEdge
Check whether the selection is horizontally at the edge of the container.
Parameters
Element: Focusable element.boolean: Set to true to check left, false for right.Returns
boolean: True if at the horizontal edge, false if not.# isNumberInput
Check whether the given element is an input field of type number and has a valueAsNumber
Parameters
HTMLElement: The HTML element.Returns
boolean: True if the element is input and holds a number.# isTextField
Check whether the given element is a text field, where text field is defined by the ability to select within the input, or that it is contenteditable.
See: https://html.spec.whatwg.org/#textFieldSelection
Parameters
HTMLElement: The HTML element.Returns
boolean: True if the element is an text field, false if not.# isVerticalEdge
Check whether the selection is vertically at the edge of the container.
Parameters
Element: Focusable element.boolean: Set to true to check top, false for bottom.Returns
boolean: True if at the vertical edge, false if not.# placeCaretAtHorizontalEdge
Places the caret at start or end of a given element.
Parameters
Element: Focusable element.boolean: True for end, false for start.# placeCaretAtVerticalEdge
Places the caret at the top or bottom of a given element.
Parameters
Element: Focusable element.boolean: True for bottom, false for top.[DOMRect]: The rectangle to position the caret with.[boolean]: True to allow scrolling, false to disallow.# remove
Given a DOM node, removes it from the DOM.
Parameters
Element: Node to be removed.Returns
void:# replace
Given two DOM nodes, replaces the former with the latter in the DOM.
Parameters
Element: Node to be removed.Element: Node to be inserted in its place.Returns
void:# replaceTag
Replaces the given node with a new node with the given tag name.
Parameters
Element: The node to replacestring: The new tag name.Returns
Element: The new node.# unwrap
Unwrap the given node. This means any child nodes are moved to the parent.
Parameters
Node: The node to unwrap.Returns
void:# wrap
Wraps the given node with a new node with the given tag name.
Parameters
Element: The node to insert.Element: The node to wrap.
FAQs
DOM utilities module for WordPress.
The npm package @wordpress/dom receives a total of 55,938 weekly downloads. As such, @wordpress/dom popularity was classified as popular.
We found that @wordpress/dom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.