Skip to main content
Version: 3.x

Taro DOM Reference

小程序环境下,Taro 模拟实现的 DOM、BOM API 概览。

相关代码位于 @tarojs/runtime 包中。

DOM

TaroEventTarget

属性或方法说明
addEventListener绑定事件
removeEventListener解绑事件

TaroNode

TaroEventTarget <- TaroNode

属性或方法说明
nodeType
nodeName
parentNode
childNodes
nextSibling
previousSibling
parentElement
firstChild
lastChild
textContentsetter
insertBefore
appendChild
replaceChild
removeChild
remove
hasChildNodes
ownerDocument只读,返回模拟的 document 对象

可选属性/方法

以下属性/方法不是每个 Web 框架、每个应用都需要使用的。因此 Taro v3.4 把这类 DOM APIs 做成可插拔式,让开发者可以选择在最终的编译结果里只存在哪些 DOM APIs。

tip

如果没有使用 React 的 dangerouslySetInnerHTML 或 Vue2 的 v-html 去渲染 HTML 字符串,可以关闭对 innerHTML 的支持,可以节省 9k 的空间。 但 Vue3 必须开启,因为它使用了 insertAdjacentHTML。

属性或方法默认状态配置项说明
innerHTML开启enableInnerHTML目前只实现了 setter(主要用于支持 React dangerouslySetInnerHTML、Vue v-html)
getter 只会返回空字符串
insertAdjacentHTML开启(Vue3)enableAdjacentHTML
cloneNode开启(Vue3)enableCloneNode
contains关闭enableContains

TaroText

TaroEventTarget <- TaroNode <- TaroText

属性或方法说明
textContent
nodeValue

TaroElement

TaroEventTarget <- TaroNode <- TaroElement

属性或方法说明
id
tagName
props
style
dataset
className
cssText
classList
children
attributes
textContent
hasAttribute
hasAttributes
focus
blur
setAttribute
removeAttribute
getAttribute
getElementsByTagName
getElementsByClassName
dispatchEvent

可选属性/方法

属性或方法默认状态配置项说明
content开启(Vue3)enableTemplateContent
getBoundingClientRect关闭enableSizeAPIs受限于小程序,此 API 是异步函数

RootElement

TaroEventTarget <- TaroNode <- TaroElement <- RootElement

非 Web 标准 API。是链接 Taro DOM 更新和小程序 setData 的核心实现。

在这里会调用小程序的 setData API,把 Taro DOM 的序列化数据传递到小程序渲染层。

FormElement

TaroEventTarget <- TaroNode <- TaroElement <- FormElement

属性或方法说明
value返回或设置当前控件的值

SVGElement

TaroEventTarget <- TaroNode <- TaroElement <- SVGElement

只是实现了继承关系,没有实现属性与方法。

BOM

window

Taro 模拟实现了基于浏览器标准 window 对象,它主要实现了用于支持 React、Vue 等框架运行的必备 API。

此外,Taro 会为 window 对象赋值小程序的 global 对象上的全部属性。

属性或方法说明
navigator模拟的 navigator 对象
document模拟的 document 对象
requestAnimationFrame模拟的 requestAnimationFrame API
cancelAnimationFrame模拟的 cancelAnimationFrame API
getComputedStyle只能用于返回元素的 style 值,做不到真正去计算 css 后的样式
addEventListener空函数
removeEventListener空函数

document

TaroEventTarget <- TaroNode <- TaroElement <- document

属性或方法说明
createElement返回 TaroElement
createElementNS没有真正去实现,等同于 document.createElement,返回 TaroElement
createTextNode返回 TaroText
createComment返回 TaroText
getElementById返回 TaroElement
querySelector目前只能根据 id 寻找元素,等同于 document.getElementById
querySelectorAll没有真正去实现,返回 []
defaultView返回 window

navigator 为以下对象:

{
"appCodeName": "Mozilla",
"appName": "Netscape",
"appVersion": "5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/534.36 (KHTML, like Gecko) NodeJS/v4.1.0 Chrome/76.0.3809.132 Safari/534.36",
"cookieEnabled": true,
"mimeTypes": [],
"onLine": true,
"platform": "MacIntel",
"plugins": [],
"product": "Taro",
"productSub": "20030107",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/534.36 (KHTML, like Gecko) NodeJS/v4.1.0 Chrome/76.0.3809.132 Safari/534.36",
"vendor": "Joyent",
"vendorSub": ""
}

requestAnimationFrame

优先使用小程序的 requestAnimationFrame API,如果不存在则进行 polyfill

cancelAnimationFrame

优先使用小程序的 cancelAnimationFrame API,如果不存在则使用 clearTimeout 代替。