Chrome DevTools Protocol

DOM Domain

This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object that has an <code>id</code>. This <code>id</code> 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.<p>Note that <code>iframe</code> owner elements will return corresponding document elements as their child nodes.</p>

Methods

DOM.disable

DOM.enable

DOM.getAttributes

DOM.getDocument

DOM.getOuterHTML

DOM.hideHighlight

DOM.highlightNode

DOM.highlightRect

DOM.moveTo

DOM.querySelector

DOM.querySelectorAll

DOM.removeAttribute

DOM.removeNode

DOM.requestChildNodes

DOM.requestNode

DOM.resolveNode

DOM.setAttributesAsText

DOM.setAttributeValue

DOM.setNodeName

DOM.setNodeValue

DOM.setOuterHTML

Events

DOM.attributeModified

DOM.attributeRemoved

DOM.characterDataModified

DOM.childNodeCountUpdated

DOM.childNodeInserted

DOM.childNodeRemoved

DOM.documentUpdated

DOM.setChildNodes

Types

DOM.HighlightConfig

DOM.Node

DOM.NodeId

DOM.PseudoType

DOM.RGBA

DOM.ShadowRootType

Methods

DOM.disable #

Disables DOM agent for the given page.

DOM.enable #

Enables DOM agent for the given page.

DOM.getAttributes #

Returns attributes for the specified node.

parameters

nodeId: NodeId

Id of the node to retrieve attibutes for.

Return Object

attributes: array[ string ]

An interleaved array of node attribute names and values.

DOM.getDocument #

Returns the root DOM node to the caller.

Return Object

root: Node

Resulting node.

DOM.getOuterHTML #

Returns node's HTML markup.

parameters

nodeId: NodeId

Id of the node to get markup for.

Return Object

outerHTML: string

Outer HTML markup.

DOM.hideHighlight #

Hides DOM node highlight.

DOM.highlightNode #

Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified.

parameters

highlightConfig: HighlightConfig

A descriptor for the highlight appearance.
nodeId: NodeId

Identifier of the node to highlight.
backendNodeId: BackendNodeId

Identifier of the backend node to highlight.
objectId: Runtime.RemoteObjectId

JavaScript object id of the node to be highlighted.

Experimental

DOM.highlightRect #

Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport.

parameters

x: integer

X coordinate
y: integer

Y coordinate
width: integer

Rectangle width
height: integer

Rectangle height
color: RGBA

The highlight fill color (default: transparent).
outlineColor: RGBA

The highlight outline color (default: transparent).

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: NodeId

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

Return Object

nodeId: NodeId

New id of the moved node.

DOM.querySelector #

Executes <code>querySelector</code> 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.

DOM.querySelectorAll #

Executes <code>querySelectorAll</code> 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.

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.

DOM.removeNode #

Removes node with given id.

parameters

nodeId: NodeId

Id of the node to remove.

DOM.requestChildNodes #

Requests that children of the node with given id are returned to the caller in form of <code>setChildNodes</code> 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: 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.

Experimental

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 <code>setChildNodes</code> notifications.

parameters

objectId: Runtime.RemoteObjectId

JavaScript object id to convert into node.

Return Object

nodeId: NodeId

Node id for given object.

DOM.resolveNode #

Resolves JavaScript node object for given node id.

parameters

nodeId: NodeId

Id of the node to resolve.
objectGroup: string

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

Return Object

object: Runtime.RemoteObject

JavaScript object wrapper for given node.

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: string

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

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.

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.

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.

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

DOM.attributeModified #

Fired when <code>Element</code>'s attribute is modified.

parameters

nodeId: NodeId

Id of the node that has changed.
name: string

Attribute name.
value: string

Attribute value.

DOM.attributeRemoved #

Fired when <code>Element</code>'s attribute is removed.

parameters

nodeId: NodeId

Id of the node that has changed.
name: string

A ttribute name.

DOM.characterDataModified #

Mirrors <code>DOMCharacterDataModified</code> event.

parameters

nodeId: NodeId

Id of the node that has changed.
characterData: string

New text value.

DOM.childNodeCountUpdated #

Fired when <code>Container</code>'s child node count has changed.

parameters

nodeId: NodeId

Id of the node that has changed.
childNodeCount: integer

New node count.

DOM.childNodeInserted #

Mirrors <code>DOMNodeInserted</code> event.

parameters

parentNodeId: NodeId

Id of the node that has changed.
previousNodeId: NodeId

If of the previous siblint.
node: Node

Inserted node data.

DOM.childNodeRemoved #

Mirrors <code>DOMNodeRemoved</code> event.

parameters

parentNodeId: NodeId

Parent id.
nodeId: NodeId

Id of the node that has been removed.

DOM.documentUpdated #

Fired when <code>Document</code> has been totally updated. Node ids are no longer valid.

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

DOM.HighlightConfig #

Configuration data for the highlighting of page elements.

Type: object

properties

showInfo: boolean

Whether the node info tooltip should be shown (default: false).
showRulers: boolean

Whether the rulers should be shown (default: false).
showExtensionLines: boolean

Whether the extension lines from node to the rulers should be shown (default: false).
displayAsMaterial: boolean

Experimental
contentColor: RGBA

The content box highlight fill color (default: transparent).
paddingColor: RGBA

The padding highlight fill color (default: transparent).
borderColor: RGBA

The border highlight fill color (default: transparent).
marginColor: RGBA

The margin highlight fill color (default: transparent).
eventTargetColor: RGBA

The event target element highlight fill color (default: transparent).

Experimental
shapeColor: RGBA

The shape outside fill color (default: transparent).

Experimental
shapeMarginColor: RGBA

The shape margin fill color (default: transparent).

Experimental
selectorList: string

Selectors to highlight relevant nodes.

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 <code>nodeId</code>. Backend will only push node with given <code>id</code> once. It is aware of all requested nodes and will only fire DOM events for nodes known to the client.
nodeType: integer

<code>Node</code>'s nodeType.
nodeName: string

<code>Node</code>'s nodeName.
localName: string

<code>Node</code>'s localName.
nodeValue: string

<code>Node</code>'s nodeValue.
childNodeCount: integer

Child count for <code>Container</code> nodes.
children: array[ Node ]

Child nodes of this node when requested with children.
attributes: array[ string ]

Attributes of the <code>Element</code> node in the form of flat array <code>[name1, value1, name2, value2]</code>.
documentURL: string

Document URL that <code>Document</code> or <code>FrameOwner</code> node points to.
baseURL: string

Base URL that <code>Document</code> or <code>FrameOwner</code> node uses for URL completion.

Experimental
publicId: string

<code>DocumentType</code>'s publicId.
systemId: string

<code>DocumentType</code>'s systemId.
internalSubset: string

<code>DocumentType</code>'s internalSubset.
xmlVersion: string

<code>Document</code>'s XML version in case of XML documents.
name: string

<code>Attr</code>'s name.
value: string

<code>Attr</code>'s value.
pseudoType: PseudoType

Pseudo element type for this node.
shadowRootType: ShadowRootType

Shadow root type.
frameId: Page.FrameId

Frame ID for frame owner elements.

Experimental
contentDocument: Node

Content document for frame owner elements.
shadowRoots: array[ Node ]

Shadow root list for given element host.

Experimental
templateContent: Node

Content document fragment for template elements.

Experimental
pseudoElements: array[ Node ]

Pseudo elements associated with this node.

Experimental
importedDocument: Node

Import document for the HTMLImport links.
distributedNodes: array[ BackendNode ]

Distributed nodes for given insertion point.

Experimental

DOM.NodeId #

Unique DOM node identifier.

Type: integer

DOM.PseudoType #

Pseudo element type.

Allowed Values: first-line, first-letter, before, after, backdrop, selection, first-line-inherited, scrollbar, scrollbar-thumb, scrollbar-button, scrollbar-track, scrollbar-track-piece, scrollbar-corner, resizer, input-list-button

Type: string

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: number

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

DOM.ShadowRootType #

Shadow root type.

Allowed Values: user-agent, open, closed

Type: string