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。
如果没有使用 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
代替。