Native DOM APIsUpdated time: 14/06/2017

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，即文檔的主體結點。

注意事項: 文檔的主體結點只接受

、 或 三種類型的元素結點。

構造函數

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?

如果當前 Weex 頁面有 JS bundle URL 的話，這里則會返回 這個 URL。

body: Element

文檔的主體結點，概念類似 HTML DOM 里的 document.body。

documentElement: Element

文檔的對應結點，概念類似 HTML DOM 里的 document.documentElement。

body 和 documentElement 的關系是：documentElement 是 body 的父結點。

getRef(id): Node

根據結點 id 獲取結點。

Node 類

構造函數

new Node()

成員

destroy()

只讀成員變量或方法

ref: string

每個 Node 實例都有各自的在整個 Document 實例中唯一的 ref 值。

nextSibling: Node?

previousSibling: Node?

parentNode: Node?

上述三個接口和 HTML DOM 的定義吻合。

children: Node[]

該結點擁有的所有子結點的數組。

pureChildren: Node[]

該結點擁有的所有子元素的數組。和 children 的區別是，pureChildren 只包含了 Element 實例而不包含 Comment 實例。

Element 類 繼承自 Node

構造函數

new Element(type: string, props: Object?)

創建一個特定類型 type 的元素結點，參數 props 可以包含 attr 對象或 style 對象。

DOM 樹操作

appendChild(node: Node)

insertBefore(node: Node, before: Node?)

上述兩個接口類似 HTML DOM。

insertAfter(node: Node, after: Node?)

在一個子結點之前插入新結點 after。

removeChild(node: Node, preserved: boolean?)

刪除子結點 node，參數 preserved 表示立刻從內存中刪除還是暫時保留。

clear()

清除所有的子結點。

DOM 屬性本身操作

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)

綁定事件、解綁定事件、觸發事件。

特定組件類型的組件方法

特殊的：不同組件類型可以擁有自己特有的方法，比如 組件支持 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

返回描述該元素結點的一段 JSON 對象，形如：{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

返回描述該注釋結點的一段 JSON 對象，形如：。

總結

以上是生活随笔為你收集整理的weex监听android返回键,weex使用手册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。