Weex in the JS engine, for each page provides a set of Native DOM APIs. This interface is very close to the HTML DOM APIs. Using this interface we can control native rendering logic via JavaScript. And Weex upper layer of Vue 2.0 is based on this interface to adapt.
In most cases, the JS framework will encapsulate native DOM APIs. That way, the developer does not need to work directly on the Native DOM.
Document
class: full page document.Node
class: the base class of nodes.Element
class: element node, inherited from Node, single view unit.Comment
class: comment node, inherited from Node, no practical meaning, usually used as placeholders.Each Weex page has a weex.document
object, which is an instance of the Document class and is the starting point for all the following interface calls.
Let's take a look at their usage in detail:
Document
classEach Document
instance will automatically have a documentElement
property when it is created. This attribute represents the document node. The document node can have a body, which is the main node of the document.
Note: The document node body only accepts <div>
, <list>
, or <scroller>
three types of element nodes.
new Document(id: string, url: string?)
createElement(tagName: string, props: Object?): Element
Element
instance of a specific type tagName
, which is an element node. Props can contain attr objects and style objects. Such as createBody ('div', {style: {backgroundColor: '#ffffff'}})
.createComment(text: string): Comment
Comment
, which is a comment node and set a text description.createBody(tagName: string, props: Object?): Element
documentElement
.fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)
Triggers a particular type of event. When the event modifies the DOM's properties or styles during the generation process, the fourth argument is used to describe the changes, and the parameter format is the same as the format of the createElement
method above.
destroy()
id: string
Document
instance has a unique id. This is also the only id that each Weex page has.URL: string?
body: Element
documentElement: Element
getRef(id): Node
Node
Classnew Node()
destroy()
ref: string
Node
instance has its own unique ref value in the entire `Document instance.nextSibling: Node?
previousSibling: Node?
parentNode: Node?
children: Node[]
pureChildren: Node[]
The node has an array of all the child elements. The difference between it and children
is that pureChildren
contains only the Element
instance and not the Comment
instance.
Element
class, inherited from Node
new Element(type: string, props: Object?)
type
, and the props
parameter can contain an attr
object or a style
object.appendChild(node: Node)
insertBefore(node: Node, before: Node?)
insertAfter(node: Node, after: Node?)
removeChild(node: Node, preserved: boolean?)
preserved
whether it is immediately removed from memory or temporarily retained.clear()
setAttr(key: string, value: string, silent: boolean?)
setStyle(key: string, value: string, silent: boolean?)
silent
is true, the node only updates itself, does not pass the command to the client render layer. This parameter is used to handle user events that have changed the node-related properties at the time of occurrence, and will not send commands repeatedly to the client after the Native DOM has changed.addEvent(type: string, handler: Function)
removeEvent(type: string)
fireEvent(type: string, e: any)
Special: Different component types can have their own unique methods, such as <web>
components support refresh
method. You can see the description of each component. In this case, we will generate a specific component type of class, such as WebElement
, which inherited from Element
.
Such as:
WebElement
inherited fromElement
Indicates that a webview is embedded in the Wex page
Refresh ()
: Refreshes the current webview
ref
, nextSibling
, previousSibling
, parentNode
Node
.nodeType: number
type: string
type
in the constructor.attr: Object
setAttr ()
method to modify, rather than directly modify the object here.style: Object
setStyle ()
method, rather than directly modify the object here.event: Object
addEvent () / removeEvent ()
method to modify, rather than directly modify the object here.toJSON(): Object
{ref: string, type: string, attr: Object, style: Object, event: Array (string), children: Array}
.Comment
class, inherited from Node
new Comment(value: string)
ref
, nextSibling
, previousSibling
, parentNode
Node
.nodeType: number
type: string
'comment'
value: string
toJSON(): Object
<! - value ->
.