< dom > 模块

[TiaossuP]

原文在这

概述

包含如下可以更新dom树的dom API。

这部分API是通过把 virtual-dom 的消息发送到native渲染器来做到的。

开发者在日常开发中，唯一可在.we文件中使用的是scrollToElement。
你也可以调用$scrollTo方法来使用它

这个页面提及的其他的API，只在callNative进程中的native渲染器用。
（关于callNative进程的进一步介绍，可以在How it works中的JS Framework部分看到 ）

API

scrollToElement(node, options)

让页面滚动到那个对应的节点，这个API只能在scroller和list组件中用。

这个API也能通过调用VM的方法$scrollTo来使用（已弃用）

要在你的.we文件中使用这个API，可以使用require('@weex-module/dom').scrollToElement。

参数

• node(Node): 你要滚动到的那个节点
• options(object): 如下选项
  • offset(number): 一个到其可见位置的偏移距离，默认是0

示例

var dom = require('@weex-module/dom');
dom.scrollToElement(this.$el('someId'), {offset: 10});

createBody(element)

为整个dom树创建body。
元素（Element）的类型只能是某种能被当做根节点的元素（包括div,scroller,list）

参数

• element(object): 一个用来指定节点各项信息的对象，包括ref, type, children等。

addElement(parentNode, element, index)

把一个元素加到dom树中

参数

• parentNode(Node): 指定元素父节点.
• element(object): 要加到dom树中的这个节点的各项信息.
• index(number): 插入位置.

removeElement(node)

从dom树中移除节点

参数

• node(Node): 要被移除的节点

moveElement(node, parentNode, index)

把一个已存在的节点移到另一个节点下面的指定位置（也可以不改变父节点，而只改变指定节点在父节点下面的位置）

参数

• node(Node): 将要被移动的节点
• parentNode(Node): 将要移动到的父节点
• index(number):: 将要被放到的父节点里面的第几个位置。

addEvent(node, type)

通知渲染器有针对某事件（event）的监听器

参数

• node(Node): 将要被监听的节点
• type(string): 将要监听的事件类型。

removeEvent(node, type)

移除某节点的某个监听器

参数

• node(Node): 将要被移除某监听器的节点
• type(string): 将要被移除的节点类型

updateAttrs(node, attr)

给某个节点更新某个属性

参数

• node(Node): 要被更新的节点
• attr(object): 包含所有要被更新的属性。

updateStyle(node, style)

为某个节点改变样式

参数

• node(Node): 将要被改变的节点
• style(object): 包含所有要被改变的样式规则。

createFinish()

通知native渲染器，让其更新本已结束的native dom 树

原文：Notify native renders that the series of messages for updating the native dom tree have reached a end.

refreshFinish()

通知native渲染器，让其刷新本已结束native dom 树

原文：Notify native renders that the series of messages for refreshing a native dom tree have reached a end.

[lvscar]

thx @TiaossuP， 文档站已添加译文链接.

[Jam1zhu]

android端，require('@weex-module/dom').updateAttrs() 报错，是什么原因？
同一个文件，在ios端没问题，在android端不行

[Jinjiang]

@Jam1zhu https://github.com/alibaba/weex/blob/dev/doc/specs/virtual-dom-apis.md 这里有一些更多的描述，总体上 dom 模块除了 scrollToElement，其它的都是一比较底层的 API，这里只是做个备忘，也不建议上层业务使用
文档的问题我们已经在规划新的版本并重新整理了，见谅

[Nstd]

@Jinjiang 请问新文档大概什么时候上线呢？

[Jinjiang]

预计会在双十一之后了，最近大家主要精力还是会放在双十一的业务支持上

[Nstd]

@Jinjiang 👌

[wzj583585700]

var dom = require('@weex-module/dom');
module.exports = {
methods: {
back2Top: function () {
alert('nihao')
var top = this.$el('top')
dom.scrollToElement(top,{offset: 200});
}
}
}
不起作用啊

[yundongbot]

@Nstd 新文档已上线 https://alibaba.github.io/weex/cn/

[yundongbot]

@wzj583585700
你的代码有误，alert() 需要引入 modal 模块。
可参考新文档 http://alibaba.github.io/weex/cn/doc/modules/dom.html

[Nstd]

@DoranYun 谢谢