Chrome DevTools

draft-0.1: DOM

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.

Commands

DOM.getAttributes

request: {
"id": <number>,
"method": "DOM.getAttributes",
"params": {
  "nodeId": <NodeId>
}
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "attributes": <array of string>
}
}

Returns attributes for the specified node.

Parameters

nodeId
( NodeId )
Id of the node to retrieve attibutes for.

Returns

attributes
( array of string )
An interleaved array of node attribute names and values.

DOM.getDocument

request: {
"id": <number>,
"method": "DOM.getDocument"
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "root": <Node>
}
}

Returns the root DOM node to the caller.

Returns

root
( Node )
Resulting node.

DOM.getOuterHTML

request: {
"id": <number>,
"method": "DOM.getOuterHTML",
"params": {
  "nodeId": <NodeId>
}
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "outerHTML": <string>
}
}

Returns node's HTML markup.

Parameters

nodeId
( NodeId )
Id of the node to get markup for.

Returns

outerHTML
( string )
Outer HTML markup.

DOM.hideHighlight

request: {
"id": <number>,
"method": "DOM.hideHighlight"
}
response: {
"id": <number>,
"error": <object>
}

Hides DOM node highlight.

DOM.highlightNode

request: {
"id": <number>,
"method": "DOM.highlightNode",
"params": {
  "nodeId": <NodeId>,
  "highlightConfig": <HighlightConfig>
}
}
response: {
"id": <number>,
"error": <object>
}

Highlights DOM node with given id.

Parameters

nodeId
( NodeId )
Identifier of the node to highlight.
highlightConfig
A descriptor for the highlight appearance.

DOM.highlightRect

request: {
"id": <number>,
"method": "DOM.highlightRect",
"params": {
  "x": <integer>,
  "y": <integer>,
  "width": <integer>,
  "height": <integer>,
  "color": <RGBA>,
  "outlineColor": <RGBA>
}
}
response: {
"id": <number>,
"error": <object>
}

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
( optional RGBA )
The highlight fill color (default: transparent).
outlineColor
( optional RGBA )
The highlight outline color (default: transparent).

DOM.moveTo

request: {
"id": <number>,
"method": "DOM.moveTo",
"params": {
  "nodeId": <NodeId>,
  "targetNodeId": <NodeId>,
  "insertBeforeNodeId": <NodeId>
}
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "nodeId": <NodeId>
}
}

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

Parameters

nodeId
( NodeId )
Id of the node to drop.
targetNodeId
( NodeId )
Id of the element to drop into.
insertBeforeNodeId
( optional NodeId )
Drop node before given one.

Returns

nodeId
( NodeId )
New id of the moved node.

DOM.querySelector

request: {
"id": <number>,
"method": "DOM.querySelector",
"params": {
  "nodeId": <NodeId>,
  "selector": <string>
}
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "nodeId": <NodeId>
}
}

Executes querySelector on a given node.

Parameters

nodeId
( NodeId )
Id of the node to query upon.
selector
( string )
Selector string.

Returns

nodeId
( NodeId )
Query selector result.

DOM.querySelectorAll

request: {
"id": <number>,
"method": "DOM.querySelectorAll",
"params": {
  "nodeId": <NodeId>,
  "selector": <string>
}
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "nodeIds": <array of NodeId>
}
}

Executes querySelectorAll on a given node.

Parameters

nodeId
( NodeId )
Id of the node to query upon.
selector
( string )
Selector string.

Returns

nodeIds
( array of NodeId )
Query selector result.

DOM.removeAttribute

request: {
"id": <number>,
"method": "DOM.removeAttribute",
"params": {
  "nodeId": <NodeId>,
  "name": <string>
}
}
response: {
"id": <number>,
"error": <object>
}

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

request: {
"id": <number>,
"method": "DOM.removeNode",
"params": {
  "nodeId": <NodeId>
}
}
response: {
"id": <number>,
"error": <object>
}

Removes node with given id.

Parameters

nodeId
( NodeId )
Id of the node to remove.

DOM.requestChildNodes

request: {
"id": <number>,
"method": "DOM.requestChildNodes",
"params": {
  "nodeId": <NodeId>
}
}
response: {
"id": <number>,
"error": <object>
}

Requests that children of the node with given id are returned to the caller in form of setChildNodes events.

Parameters

nodeId
( NodeId )
Id of the node to get children for.

DOM.requestNode

request: {
"id": <number>,
"method": "DOM.requestNode",
"params": {
  "objectId": <Runtime.RemoteObjectId>
}
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "nodeId": <NodeId>
}
}

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
JavaScript object id to convert into node.

Returns

nodeId
( NodeId )
Node id for given object.

DOM.resolveNode

request: {
"id": <number>,
"method": "DOM.resolveNode",
"params": {
  "nodeId": <NodeId>,
  "objectGroup": <string>
}
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "object": <Runtime.RemoteObject>
}
}

Resolves JavaScript node object for given node id.

Parameters

nodeId
( NodeId )
Id of the node to resolve.
objectGroup
( optional string )
Symbolic group name that can be used to release multiple objects.

Returns

object
JavaScript object wrapper for given node.

DOM.setAttributeValue

request: {
"id": <number>,
"method": "DOM.setAttributeValue",
"params": {
  "nodeId": <NodeId>,
  "name": <string>,
  "value": <string>
}
}
response: {
"id": <number>,
"error": <object>
}

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.setAttributesAsText

request: {
"id": <number>,
"method": "DOM.setAttributesAsText",
"params": {
  "nodeId": <NodeId>,
  "text": <string>,
  "name": <string>
}
}
response: {
"id": <number>,
"error": <object>
}

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.

DOM.setNodeName

request: {
"id": <number>,
"method": "DOM.setNodeName",
"params": {
  "nodeId": <NodeId>,
  "name": <string>
}
}
response: {
"id": <number>,
"error": <object>,
"result": {
  "nodeId": <NodeId>
}
}

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.

Returns

nodeId
( NodeId )
New node's id.

DOM.setNodeValue

request: {
"id": <number>,
"method": "DOM.setNodeValue",
"params": {
  "nodeId": <NodeId>,
  "value": <string>
}
}
response: {
"id": <number>,
"error": <object>
}

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

request: {
"id": <number>,
"method": "DOM.setOuterHTML",
"params": {
  "nodeId": <NodeId>,
  "outerHTML": <string>
}
}
response: {
"id": <number>,
"error": <object>
}

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.

Notifications

DOM.attributeModified

{
"method": "DOM.attributeModified",
"params": {
  "nodeId": <NodeId>,
  "name": <string>,
  "value": <string>
}
}

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.

DOM.attributeRemoved

{
"method": "DOM.attributeRemoved",
"params": {
  "nodeId": <NodeId>,
  "name": <string>
}
}

Fired when Element's attribute is removed.

Parameters

nodeId
( NodeId )
Id of the node that has changed.
name
( string )
Local attribute name.

DOM.characterDataModified

{
"method": "DOM.characterDataModified",
"params": {
  "nodeId": <NodeId>,
  "characterData": <string>
}
}

Mirrors DOMCharacterDataModified event.

Parameters

nodeId
( NodeId )
Id of the node that has changed.
characterData
( string )
New text value.

DOM.childNodeCountUpdated

{
"method": "DOM.childNodeCountUpdated",
"params": {
  "nodeId": <NodeId>,
  "childNodeCount": <integer>
}
}

Fired when Container's child node count has changed.

Parameters

nodeId
( NodeId )
Id of the node that has changed.
childNodeCount
( integer )
New node count.

DOM.childNodeInserted

{
"method": "DOM.childNodeInserted",
"params": {
  "parentNodeId": <NodeId>,
  "previousNodeId": <NodeId>,
  "node": <Node>
}
}

Mirrors DOMNodeInserted 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

{
"method": "DOM.childNodeRemoved",
"params": {
  "parentNodeId": <NodeId>,
  "nodeId": <NodeId>
}
}

Mirrors DOMNodeRemoved event.

Parameters

parentNodeId
( NodeId )
Parent id.
nodeId
( NodeId )
Id of the node that has been removed.

DOM.documentUpdated

{
"method": "DOM.documentUpdated"
}

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

DOM.setChildNodes

{
"method": "DOM.setChildNodes",
"params": {
  "parentId": <NodeId>,
  "nodes": <array of Node>
}
}

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 of Node )
Child nodes array.

Types

HighlightConfig: object

borderColor
( optional RGBA )
The border highlight fill color (default: transparent).
contentColor
( optional RGBA )
The content box highlight fill color (default: transparent).
marginColor
( optional RGBA )
The margin highlight fill color (default: transparent).
paddingColor
( optional RGBA )
The padding highlight fill color (default: transparent).
showInfo
( optional boolean )
Whether the node info tooltip should be shown (default: false).

Node: object

attributes
( optional array of string )
Attributes of the Element node in the form of flat array [name1, value1, name2, value2].
childNodeCount
( optional integer )
Child count for Container nodes.
children
( optional array of Node )
Child nodes of this node when requested with children.
documentURL
( optional string )
Document URL that Document or FrameOwner node points to.
internalSubset
( optional string )
DocumentType's internalSubset.
localName
( string )
Node's localName.
name
( optional string )
Attr's name.
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.
nodeName
( string )
Node's nodeName.
nodeType
( integer )
Node's nodeType.
nodeValue
( string )
Node's nodeValue.
publicId
( optional string )
DocumentType's publicId.
systemId
( optional string )
DocumentType's systemId.
value
( optional string )
Attr's value.

NodeId: integer

RGBA: object

a
( optional number )
The alpha component, in the [0-1] range (default: 1).
b
( integer )
The blue component, in the [0-255] range.
g
( integer )
The green component, in the [0-255] range.
r
( integer )
The red component, in the [0-255] range.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.