Chrome DevTools

DOM Domain

This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object that has an id. This id can be used to get additional information on the Node, resolve it into the JavaScript object wrapper, etc. It is important that client receives DOM events only for the nodes that are known to the client. Backend keeps track of the nodes that were sent to the client and never sends the same node twice. It is client's responsibility to collect information about the nodes that were sent to the client. Note that iframe owner elements will return corresponding document elements as their child nodes.

Methods

Events

Types

Methods

Chrome DevTools

DOM.describeNode #

Describes node given its id, does not require domain to be enabled. Does not start tracking any objects, can be used for automation.

Parameters

nodeId
Optional
NodeId

Identifier of the node.

backendNodeId
Optional
BackendNodeId

Identifier of the backend node.

objectId
Optional
Runtime.RemoteObjectId

JavaScript object id of the node wrapper.

depth
Optional
integer

The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0.

pierce
Optional
boolean

Whether or not iframes and shadow roots should be traversed when returning the subtree (default is false).

Return object

node
Node

Node description.


Chrome DevTools

DOM.disable #

Disables DOM agent for the given page.


Chrome DevTools

DOM.enable #

Enables DOM agent for the given page.

Parameters

includeWhitespace
Optional
string

Whether to include whitespaces in the children array of returned Nodes.

Allowed values: none, all

Experimental

Chrome DevTools

DOM.focus #

Focuses the given element.

Parameters

nodeId
Optional
NodeId

Identifier of the node.

backendNodeId
Optional
BackendNodeId

Identifier of the backend node.

objectId
Optional
Runtime.RemoteObjectId

JavaScript object id of the node wrapper.


Chrome DevTools

DOM.getAttributes #

Returns attributes for the specified node.

Parameters

nodeId
NodeId

Id of the node to retrieve attributes for.

Return object

attributes
array[ string ]

An interleaved array of node attribute names and values.


Chrome DevTools

DOM.getBoxModel #

Returns boxes for the given node.

Parameters

nodeId
Optional
NodeId

Identifier of the node.

backendNodeId
Optional
BackendNodeId

Identifier of the backend node.

objectId
Optional
Runtime.RemoteObjectId

JavaScript object id of the node wrapper.

Return object

model
BoxModel

Box model for the node.


Chrome DevTools

DOM.getDocument #

Returns the root DOM node (and optionally the subtree) to the caller. Implicitly enables the DOM domain events for the current target.

Parameters

depth
Optional
integer

The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0.

pierce
Optional
boolean

Whether or not iframes and shadow roots should be traversed when returning the subtree (default is false).

Return object

root
Node

Resulting node.


Chrome DevTools

DOM.getNodeForLocation #

Returns node id at given location. Depending on whether DOM domain is enabled, nodeId is either returned or not.

Parameters

x
integer

X coordinate.

y
integer

Y coordinate.

includeUserAgentShadowDOM
Optional
boolean

False to skip to the nearest non-UA shadow root ancestor (default: false).

ignorePointerEventsNone
Optional
boolean

Whether to ignore pointer-events: none on elements and hit test them.

Return object

backendNodeId
BackendNodeId

Resulting node.

frameId
Page.FrameId

Frame this node belongs to.

nodeId
Optional
NodeId

Id of the node at given coordinates, only when enabled and requested document.


Chrome DevTools

DOM.getOuterHTML #

Returns node's HTML markup.

Parameters

nodeId
Optional
NodeId

Identifier of the node.

backendNodeId
Optional
BackendNodeId

Identifier of the backend node.

objectId
Optional
Runtime.RemoteObjectId

JavaScript object id of the node wrapper.

Return object

outerHTML
string

Outer HTML markup.


Chrome DevTools

DOM.hideHighlight #

Hides any highlight.


Chrome DevTools

DOM.highlightNode #

Highlights DOM node.


Chrome DevTools

DOM.highlightRect #

Highlights given rectangle.


Chrome DevTools

DOM.moveTo #

Moves node into the new container, places it before the given anchor.

Parameters

nodeId
NodeId

Id of the node to move.

targetNodeId
NodeId

Id of the element to drop the moved node into.

insertBeforeNodeId
Optional
NodeId

Drop node before this one (if absent, the moved node becomes the last child of targetNodeId).

Return object

nodeId
NodeId

New id of the moved node.


Chrome DevTools

DOM.querySelector #

Executes querySelector on a given node.

Parameters

nodeId
NodeId

Id of the node to query upon.

selector
string

Selector string.

Return object

nodeId
NodeId

Query selector result.


Chrome DevTools

DOM.querySelectorAll #

Executes querySelectorAll on a given node.

Parameters

nodeId
NodeId

Id of the node to query upon.

selector
string

Selector string.

Return object

nodeIds
array[ NodeId ]

Query selector result.


Chrome DevTools

DOM.removeAttribute #

Removes attribute with given name from an element with given id.

Parameters

nodeId
NodeId

Id of the element to remove attribute from.

name
string

Name of the attribute to remove.


Chrome DevTools

DOM.removeNode #

Removes node with given id.

Parameters

nodeId
NodeId

Id of the node to remove.


Chrome DevTools

DOM.requestChildNodes #

Requests that children of the node with given id are returned to the caller in form of setChildNodes events where not only immediate children are retrieved, but all children down to the specified depth.

Parameters

nodeId
NodeId

Id of the node to get children for.

depth
Optional
integer

The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0.

pierce
Optional
boolean

Whether or not iframes and shadow roots should be traversed when returning the sub-tree (default is false).


Chrome DevTools

DOM.requestNode #

Requests that the node is sent to the caller given the JavaScript node object reference. All nodes that form the path from the node to the root are also sent to the client as a series of setChildNodes notifications.

Parameters

objectId
Runtime.RemoteObjectId

JavaScript object id to convert into node.

Return object

nodeId
NodeId

Node id for given object.


Chrome DevTools

DOM.resolveNode #

Resolves the JavaScript node object for a given NodeId or BackendNodeId.

Parameters

nodeId
Optional
NodeId

Id of the node to resolve.

backendNodeId
Optional
DOM.BackendNodeId

Backend identifier of the node to resolve.

objectGroup
Optional
string

Symbolic group name that can be used to release multiple objects.

executionContextId
Optional
Runtime.ExecutionContextId

Execution context in which to resolve the node.

Return object

object
Runtime.RemoteObject

JavaScript object wrapper for given node.


Chrome DevTools

DOM.scrollIntoViewIfNeeded #

Scrolls the specified rect of the given node into view if not already visible. Note: exactly one between nodeId, backendNodeId and objectId should be passed to identify the node.

Parameters

nodeId
Optional
NodeId

Identifier of the node.

backendNodeId
Optional
BackendNodeId

Identifier of the backend node.

objectId
Optional
Runtime.RemoteObjectId

JavaScript object id of the node wrapper.

rect
Optional
Rect

The rect to be scrolled into view, relative to the node's border box, in CSS pixels. When omitted, center of the node will be used, similar to Element.scrollIntoView.


Chrome DevTools

DOM.setAttributesAsText #

Sets attributes on element with given id. This method is useful when user edits some existing attribute value and types in several attribute name/value pairs.

Parameters

nodeId
NodeId

Id of the element to set attributes for.

text
string

Text with a number of attributes. Will parse this text using HTML parser.

name
Optional
string

Attribute name to replace with new attributes derived from text in case text parsed successfully.


Chrome DevTools

DOM.setAttributeValue #

Sets attribute for an element with given id.

Parameters

nodeId
NodeId

Id of the element to set attribute for.

name
string

Attribute name.

value
string

Attribute value.


Chrome DevTools

DOM.setFileInputFiles #

Sets files for the given file input element.

Parameters

files
array[ string ]

Array of file paths to set.

nodeId
Optional
NodeId

Identifier of the node.

backendNodeId
Optional
BackendNodeId

Identifier of the backend node.

objectId
Optional
Runtime.RemoteObjectId

JavaScript object id of the node wrapper.


Chrome DevTools

DOM.setNodeName #

Sets node name for a node with given id.

Parameters

nodeId
NodeId

Id of the node to set name for.

name
string

New node's name.

Return object

nodeId
NodeId

New node's id.


Chrome DevTools

DOM.setNodeValue #

Sets node value for a node with given id.

Parameters

nodeId
NodeId

Id of the node to set value for.

value
string

New node's value.


Chrome DevTools

DOM.setOuterHTML #

Sets node HTML markup, returns new node id.

Parameters

nodeId
NodeId

Id of the node to set markup for.

outerHTML
string

Outer HTML markup to set.

Events

Chrome DevTools

DOM.attributeModified #

Fired when Element's attribute is modified.

Parameters

nodeId
NodeId

Id of the node that has changed.

name
string

Attribute name.

value
string

Attribute value.


Chrome DevTools

DOM.attributeRemoved #

Fired when Element's attribute is removed.

Parameters

nodeId
NodeId

Id of the node that has changed.

name
string

A ttribute name.


Chrome DevTools

DOM.characterDataModified #

Mirrors DOMCharacterDataModified event.

Parameters

nodeId
NodeId

Id of the node that has changed.

characterData
string

New text value.


Chrome DevTools

DOM.childNodeCountUpdated #

Fired when Container's child node count has changed.

Parameters

nodeId
NodeId

Id of the node that has changed.

childNodeCount
integer

New node count.


Chrome DevTools

DOM.childNodeInserted #

Mirrors DOMNodeInserted event.

Parameters

parentNodeId
NodeId

Id of the node that has changed.

previousNodeId
NodeId

Id of the previous sibling.

node
Node

Inserted node data.


Chrome DevTools

DOM.childNodeRemoved #

Mirrors DOMNodeRemoved event.

Parameters

parentNodeId
NodeId

Parent id.

nodeId
NodeId

Id of the node that has been removed.


Chrome DevTools

DOM.documentUpdated #

Fired when Document has been totally updated. Node ids are no longer valid.


Chrome DevTools

DOM.setChildNodes #

Fired when backend wants to provide client with the missing DOM structure. This happens upon most of the calls requesting node ids.

Parameters

parentId
NodeId

Parent node id to populate with children.

nodes
array[ Node ]

Child nodes array.

Types

Chrome DevTools

DOM.BackendNode #

Backend node with a friendly name.

Type: object

Properties

nodeType
integer

Node's nodeType.

nodeName
string

Node's nodeName.

backendNodeId

Chrome DevTools

DOM.BackendNodeId #

Unique DOM node identifier used to reference a node that may not have been pushed to the front-end.

Type: integer


Chrome DevTools

DOM.BoxModel #

Box model.

Type: object

Properties

content
Quad

Content box

padding
Quad

Padding box

border
Quad

Border box

margin
Quad

Margin box

width
integer

Node width

height
integer

Node height

shapeOutside
Optional
ShapeOutsideInfo

Shape outside coordinates


Chrome DevTools

DOM.CompatibilityMode #

Document compatibility mode.

Type: string

Allowed values: QuirksMode, LimitedQuirksMode, NoQuirksMode


Chrome DevTools

DOM.CSSComputedStyleProperty #

Type: object

Properties

name
string

Computed style property name.

value
string

Computed style property value.


Chrome DevTools

DOM.LogicalAxes #

ContainerSelector logical axes

Type: string

Allowed values: Inline, Block, Both


Chrome DevTools

DOM.Node #

DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type.

Type: object

Properties

nodeId
NodeId

Node identifier that is passed into the rest of the DOM messages as the nodeId. Backend will only push node with given id once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client.

parentId
Optional
NodeId

The id of the parent node if any.

backendNodeId
BackendNodeId

The BackendNodeId for this node.

nodeType
integer

Node's nodeType.

nodeName
string

Node's nodeName.

localName
string

Node's localName.

nodeValue
string

Node's nodeValue.

childNodeCount
Optional
integer

Child count for Container nodes.

children
Optional
array[ Node ]

Child nodes of this node when requested with children.

attributes
Optional
array[ string ]

Attributes of the Element node in the form of flat array [name1, value1, name2, value2].

documentURL
Optional
string

Document URL that Document or FrameOwner node points to.

baseURL
Optional
string

Base URL that Document or FrameOwner node uses for URL completion.

publicId
Optional
string

DocumentType's publicId.

systemId
Optional
string

DocumentType's systemId.

internalSubset
Optional
string

DocumentType's internalSubset.

xmlVersion
Optional
string

Document's XML version in case of XML documents.

name
Optional
string

Attr's name.

value
Optional
string

Attr's value.

pseudoType
Optional
PseudoType

Pseudo element type for this node.

pseudoIdentifier
Optional
string

Pseudo element identifier for this node. Only present if there is a valid pseudoType.

shadowRootType
Optional
ShadowRootType

Shadow root type.

frameId
Optional
Page.FrameId

Frame ID for frame owner elements.

contentDocument
Optional
Node

Content document for frame owner elements.

shadowRoots
Optional
array[ Node ]

Shadow root list for given element host.

templateContent
Optional
Node

Content document fragment for template elements.

pseudoElements
Optional
array[ Node ]

Pseudo elements associated with this node.

importedDocument
Optional
Node

Deprecated, as the HTML Imports API has been removed (crbug.com/937746). This property used to return the imported document for the HTMLImport links. The property is always undefined now.

Deprecated
distributedNodes
Optional
array[ BackendNode ]

Distributed nodes for given insertion point.

isSVG
Optional
boolean

Whether the node is SVG.

compatibilityMode
Optional
assignedSlot
Optional

Chrome DevTools

DOM.NodeId #

Unique DOM node identifier.

Type: integer


Chrome DevTools

DOM.PhysicalAxes #

ContainerSelector physical axes

Type: string

Allowed values: Horizontal, Vertical, Both


Chrome DevTools

DOM.PseudoType #

Pseudo element type.

Type: string

Allowed values: first-line, first-letter, before, after, marker, backdrop, selection, search-text, target-text, spelling-error, grammar-error, highlight, first-line-inherited, scroll-marker, scroll-marker-group, scrollbar, scrollbar-thumb, scrollbar-button, scrollbar-track, scrollbar-track-piece, scrollbar-corner, resizer, input-list-button, view-transition, view-transition-group, view-transition-image-pair, view-transition-old, view-transition-new


Chrome DevTools

DOM.Quad #

An array of quad vertices, x immediately followed by y for each point, points clock-wise.

Type: array[ number ]


Chrome DevTools

DOM.Rect #

Rectangle.

Type: object

Properties

x
number

X coordinate

y
number

Y coordinate

width
number

Rectangle width

height
number

Rectangle height


Chrome DevTools

DOM.RGBA #

A structure holding an RGBA color.

Type: object

Properties

r
integer

The red component, in the [0-255] range.

g
integer

The green component, in the [0-255] range.

b
integer

The blue component, in the [0-255] range.

a
Optional
number

The alpha component, in the [0-1] range (default: 1).


Chrome DevTools

DOM.ScrollOrientation #

Physical scroll orientation

Type: string

Allowed values: horizontal, vertical


Chrome DevTools

DOM.ShadowRootType #

Shadow root type.

Type: string

Allowed values: user-agent, open, closed


Chrome DevTools

DOM.ShapeOutsideInfo #

CSS Shape Outside details.

Type: object

Properties

bounds
Quad

Shape bounds

shape
array[ any ]

Shape coordinate details

marginShape
array[ any ]

Margin shape bounds