dom.md

1.1: DOM

Contents

1. Commands

   1. getAttributes
   • getDocument
   • getOuterHTML
   • hideHighlight
   • highlightNode
   • highlightRect
   • moveTo
   • querySelector
   • querySelectorAll
   • removeAttribute
   • removeNode
   • requestChildNodes
   • requestNode
   • resolveNode
   • setAttributeValue
   • setAttributesAsText
   • setNodeName
   • setNodeValue
   • setOuterHTML

2. Notifications

   1. attributeModified
   • attributeRemoved
   • characterDataModified
   • childNodeCountUpdated
   • childNodeInserted
   • childNodeRemoved
   • documentUpdated
   • setChildNodes

3. Types

   1. HighlightConfig
   • Node
   • NodeId
   • RGBA

这个域暴露 DOM 的读写操作。每个 DOM 节点代表着携带有 id 的镜面对象。这个 id 是用来获取节点其余信息，将其装入 JavaScript 对象的包装器中，还要其他。用户端只接受它已知的节点产生的　DOM　事件，这是很重要的。后台追踪节点发送到用户端，并且不会发送同一个节点两次。收集发送过来节点的信息是用户端负责的。

注意: iframe 宿主元素会返回对应文本元素作为子节点。

Commands

DOM.getAttributes

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

返回指定节点的属性

Parameters

nodeId ( NodeId ) 要接受节点的 id

Returns

attributes ( array of string ) 交错数组节点的名称和值

DOM.getDocument

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

返回根 DOM 节点到调用者

Returns

root ( Node ) 结果节点

DOM.getOuterHTML

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

返回节点的 HTML 加成

Parameters

nodeId ( NodeId ) 需要加成的节点编号。

Returns

outerHTML ( string ) 超出 HTML 加成。

DOM.hideHighlight

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

隐藏 DOM 节点高亮

DOM.highlightNode

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

高亮显示给定 id 和给定 JavaScript 对象包装的 DOM 元素，nodeId 或者 objectId 必须被指定一个。

Parameters

highlightConfig ( HighlightConfig ) 高亮显示的描述

nodeId ( optional NodeId ) 高亮节点的标示符

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>
}

高亮给定的矩形区域。坐标是相对于主框架视图绝对定位的。

Parameters

x ( integer ) X 轴坐标

y ( integer ) Y 轴坐标

width ( integer ) 矩形宽

height ( integer ) 矩形高

color ( optional RGBA ) 高亮填充颜色（默认：透明）

outlineColor ( optional RGBA ) 高亮轮廓颜色（默认：透明）

DOM.moveTo

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

将节点移动到一个新的容器，将其放置在给定锚之前。

Parameters

nodeId ( NodeId ) 要移动节点的 id

targetNodeId ( NodeId ) 节点移动到的元素 id

insertBeforeNodeId ( optional NodeId ) 给定节点之前插入本节点

Returns

nodeId ( NodeId ) 节点移动后的新 id

DOM.querySelector

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

对给定节点执行querySelector操作。

Parameters

nodeId ( NodeId ) 要进行查询操作的节点的 id

selector ( string ) 选择符

Returns

nodeId ( NodeId ) 查询筛选后的结果

DOM.querySelectorAll

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

对一个节点进行 querySelectorAll操作

Parameters

nodeId ( NodeId ) 要进行操作的节点的 id. Id of the node to query upon.

selector ( string ) 选择符

Returns

nodeIds ( array of NodeId ) 查询操作返回结果

DOM.removeAttribute

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

移除给定 id 元素上的给定名称的属性

Parameters

nodeId ( NodeId ) 要移除属性的元素的 id

name ( string ) 要移除属性的名称

DOM.removeNode

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

移除给定 id 的节点

Parameters

nodeId ( NodeId ) 要移除节点的 id

DOM.requestChildNodes

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

发送请求，返回在设置子节点事件的表单里，给定 id 节点的子节点给调用者，在表单中，不仅当前子节点被检索，所有到达指定深度的节点都会被检索到

Parameters

nodeId ( NodeId ) 获取子节点的节点的 id

DOM.requestNode

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

发送请求，节点被返回到有着 JavaScript 节点对象参照的调用者。所有有从节点到根路径的节点，同样以一系列设置子节点的通知，发送到用户端。

Parameters

objectId ( Runtime.RemoteObjectId ) 要转换成节点的 JavaScript 对象的 id.

Returns

nodeId (NodeId ) 给定对象的节点 id

DOM.resolveNode

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

解析给定节点 id 的 JavaScript 节点对象。

Parameters

nodeId ( NodeId ) 要解析的节点的 id

objectGroup ( optional string ) 象征性组名，能被用来释放多组对象。

Returns

object ( Runtime.RemoteObjectId ) 给定节点的 JavaScript 对象包装器。

DOM.setAttributeValue

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

为给定 id 元素设置属性

Parameters

nodeId (NodeId ) 要设置属性元素的 id

name ( string ) 属性名

value ( string ) 属性值

DOM.setAttributesAsText

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

为给定 id 的节点设置属性。当用户在多属性 name/value 组中编辑一些存在属性的值和类型的时候是很有用的。

Parameters

nodeId ( NodeId ) 要设置属性的元素的 id

text ( string ) 表示许多属性的文本。使用HTML解析器将解析这个文本。

name ( optional string ) 属性名称，成功解析文本后以取代在来自文本的新属性。

DOM.setNodeName

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

为给定 id 的节点设置节点名（name)

Parameters

nodeId ( NodeId ) 要设置 name 的节点的 id

name ( string ) 节点新名称

Returns

nodeId (NodeId ) 节点新名称

DOM.setNodeValue

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

为给定 id 的节点设置节点值（value）

Parameters

nodeId ( NodeId) 要设置 value 节点的 id

value ( string ) 节点新的值

DOM.setOuterHTML

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

为节点设置 HTML 标记，返回一个新节点。

Parameters

nodeId ( NodeId) 要设置标记的节点

outerHTML ( string ) 要设置的外部 HTML 标记。

Notifications

DOM.attributeModified

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

当元素的属性被修改会被触发

Parameters

nodeId ( NodeId ) 修改了的节点的 id

name ( string ) 属性名称

value ( string ) 属性值

DOM.attributeRemoved

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

当元素属性值被修改，会被触发。

Parameters

nodeId ( NodeId ) 被修改了的节点的 id

name ( string ) 属性名

DOM.characterDataModified

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

反射 DOMCharacterDataModified事件

Parameters

nodeId ( NodeId ) 被修改了的节点的 id

characterData ( string ) 下一个文本的值

DOM.childNodeCountUpdated

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

当子节点数被修改后被触发

Parameters

nodeId ( NodeId ) 被修改节点的 id

childNodeCount ( integer ) 新节点数

DOM.childNodeInserted

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

反映 DOMNodeInserted 事件.

Parameters

parentNodeId ( NodeId ) 被修改的节点的 id

previousNodeId ( NodeId ) 如果有前兄弟节点

node ( NodeId ) 插入的节点的数据

DOM.childNodeRemoved

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

反映DOMNodeRemoved事件.

Parameters

parentNodeId ( NodeId) 父节点 id

nodeId ( NodeId) 被移除了的节点的 id

DOM.documentUpdated

{
"method": "DOM.documentUpdated"
}

当文档被完全更新才会被触发。节点的 id 都不再有效

DOM.setChildNodes

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

当后台想为用户端提供丢失 DOM 结构时会被触发。当大多数调用请求节点 id 时会发生。

Parameters

parentId ( NodeId ) 要填充子节点的父节点的 id

nodes ( array of Node ) 子节点数组

Types

HighlightConfig: object

borderColor ( optional RGBA ) 边框高亮颜色（默认：透明）

contentColor ( optional RGBA ) 内容盒子的高亮颜色（默认：透明）

marginColor ( optional RGBA ) margin 填充高亮颜色（默认：透明）

paddingColor ( optional RGBA ) padding 填充高亮颜色（默认：透明）

showInfo ( optional boolean ) 节点信息提示是否显示（默认：false）

Node: object

attributes ( optional array of string ) 一维数组 [name1, value1, name2, value2] 表单中，元素节点的属性。

childNodeCount ( optional integer ) 容器节点的子节点数

children ( optional array of Node ) 需要填充的子节点数

contentDocument ( optional Node ) frame 宿主元素的内容文档

documentURL ( optional string ) Document 节点或者 FrameOwner 节点指向的 Document URL

internalSubset ( optional string ) DocumentType 的内置子集

localName ( string ) 节点的本地名名

name ( optional string ) 属性的名称

nodeId ( NodeId ) 作为 nodeId 传入 DOM 消息 的节点标识符。后台只会一次性推送给定 id 的节点。它知道所有请求节点，只会为已知的客户机节点触发 DOM 事件。

nodeName ( string ) 节点名

nodeType ( integer ) 节点类型

nodeValue ( string ) 节点值

publicId ( optional string ) DocumentType 的公开 id（publicId）

systemId ( optional string ) DocumentType 的系统 id（systemId）

value ( optional string ) 属性值

xmlVersion ( optional string ) 如果是 XML 文档，XML 版本。

NodeId: integer

RGBA: object

a ( optional number ) alpha 分量，在 [0-1] 范围（默认值：1）。

b ( integer ) 蓝色分量，在[0-255]范围内。

g ( integer ) 绿色分量，在[0-255]范围内。

r ( integer ) 红色分量，在[0-255]范围内。