Taro DOM Reference - 《Taro 文档帮助手册教程》

title: Taro DOM Reference
DOM
BOM

title: 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
textContent	setter
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

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 代替。