Weex 在 JS 引擎中,为每个页面都提供了一套 Native DOM APIs,这套接口和 HTML DOM APIs 非常接近,利用这套接口我们可以通过 JavaScript 控制 native 的渲染逻辑。而且 Weex 上层的 Vue 2.0 也是基于这套接口进行适配的。
绝大多数情况下 JS 框架会把 Native DOM APIs 都封装好,开发者不需要直接对 Native DOM 进行操作。
Document
类,整个页面文档。Node
类,结点的基础类。Element
类,元素结点,继承自 Node
,单个视图单元。Comment
类,注释结点,继承自 Node
,无实际意义,通常用作占位符。每个 Weex 页面都有一个 weex.document
对象,该对象就是一个 Document
类的实例,也是下面所有接口调用的起点。
接下来详细介绍它们的用法:
Document
类每个 Document
实例在创建的时候都会自动拥有一个 documentElement
属性,表示文档结点。该文档结点可以拥有一个 body
,即文档的主体结点。
注意事项: 文档的主体结点只接受 <div>
、<list>
或 <scroller>
三种类型的元素结点。
new Document(id: string, url: string?)
createElement(tagName: string, props: Object?): Element
tagName
的 Element
实例,即一个元素结点。props
可以包含 attr
对象和 style
对象。比如 createBody('div', {style: {backgroundColor: '#ffffff'}})
。createComment(text: string): Comment
Comment
的实例,即一个注释结点,并设置一段文本描述。createBody(tagName: string, props: Object?): Element
documentElement
下。fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)
e
。当该事件在产生过程中修改了 DOM 的特性或样式,则第四个参数用来描述这些改变,参数格式和上面 createElement
方法的格式相同。destroy()
id: string
Document
实例都有一个唯一的 id
。这同时也是每个 Weex 页面唯一拥有的 id
。URL: string?
body: Element
document.body
。documentElement: Element
document.documentElement
。body
和 documentElement
的关系是:documentElement
是 body
的父结点。getRef(id): Node
Node
类new Node()
destroy()
ref: string
Node
实例都有各自的在整个 Document
实例中唯一的 ref
值。nextSibling: Node?
previousSibling: Node?
parentNode: Node?
children: Node[]
pureChildren: Node[]
children
的区别是,pureChildren
只包含了 Element
实例而不包含 Comment
实例。Element
类 继承自 Node
new Element(type: string, props: Object?)
type
的元素结点,参数 props
可以包含 attr
对象或 style
对象。appendChild(node: Node)
insertBefore(node: Node, before: Node?)
insertAfter(node: Node, after: Node?)
removeChild(node: Node, preserved: boolean?)
node
,参数 preserved
表示立刻从内存中删除还是暂时保留。clear()
setAttr(key: string, value: string, silent: boolean?)
setStyle(key: string, value: string, silent: boolean?)
silent
为真的时候,结点仅更新自己,不会传递命令给客户端渲染层。该参数用来处理用户事件在发生时已经改变结点相关属性的情况下,不会在 Native DOM 也改变之后重复发送命令给客户端。addEvent(type: string, handler: Function)
removeEvent(type: string)
fireEvent(type: string, e: any)
特殊的:不同组件类型可以拥有自己特有的方法,比如 <web>
组件支持 refresh
方法,详见各组件的描述,在此情况下,我们会产生特定组件类型的 class,比如 WebElement
,它继承自 Element
。
如:
WebElement
继承自Element
表示在 Weex 页面中嵌入一个 webview
refresh()
: 刷新当前 webview
ref
, nextSibling
, previousSibling
, parentNode
Node
。nodeType: number
1
。type: string
type
一致。attr: Object
setAttr()
方法进行修改,而不要直接修改这里的对象。style: Object
setStyle()
方法进行修改,而不要直接修改这里的对象。event: Object
addEvent()
/ removeEvent()
方法进行修改,而不要直接修改这里的对象。toJSON(): Object
{ref: string, type: string, attr: Object, style: Object, event: Array(string), children: Array}
。Comment
类 继承自 Node
new Comment(value: string)
ref
, nextSibling
, previousSibling
, parentNode
Node
。nodeType: number
8
。type: string
'comment'
value: string
value
一致。toJSON(): Object
<!-- value -->
。