dom.js

Category：

Attributes

hasClass() 方法用来判断 DOM 元素是否包含指定 className 的样式。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定需要检测 class 样式的 DOM 元素。

className

Type：

String

（必须）className 要添加的 class 样式名称。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 addClass 单个方法
import hasClass from '@yaohaixiao/dom.js/addClass'

const $list = DOM.byId('#list')

// 添加 class 样式
DOM.addClass($list, 'nav')
DOM.addClass($list, 'primary')

// 判断是否存在 class 样式
DOM.hasClass($list, 'nav') => true
hasClass($list, 'primary') => true
hasClass($list, 'top-menu') => false

Category：

Attributes

addClass() 方法用来给 DOM 元素添加 class 样式。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定需要添加 class 样式的 DOM 元素。

className

Type：

String

（必须）className 参数指定要检测的 class 样式名称。

Returns

Type：

Boolean

如果 el 元素包含 className 的 class 样式，则返回 true，否则返回 false。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 addClass 单个方法
import hasClass from '@yaohaixiao/dom.js/addClass'

const $list = DOM.byId('#list')

// 添加 class 样式
DOM.addClass($list, 'nav')
DOM.addClass($list, 'primary')

// 判断是否存在 class 样式
DOM.hasClass($list, 'nav') => true
hasClass($list, 'primary') => true
hasClass($list, 'top-menu') => false

Category：

Attributes

replaceClass() 方法用来替换 DOM 元素中的 className 的样式。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定需要替换 class 样式的 DOM 元素。

oldCls

Type：

String

（必须）oldCls 要替换的 class 样式名称。

newCls

Type：

String

（必须）newCls 用来替换的 class 样式名称。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 addClass 单个方法
import replaceClass from '@yaohaixiao/dom.js/removeClass'

const $list = DOM.byId('#list')

// 添加 class 样式
DOM.addClass($list, 'nav')

// 判断是否存在 class 样式
DOM.replaceClass($list, 'nav', 'main')

hasClass($list, 'list') => true
hasClass($list, 'nav') => false
hasClass($list, 'main') => true

Category：

Attributes

removeClass() 方法用来移除 DOM 元素中的 className 的样式。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定需要移除 class 样式的 DOM 元素。

className

Type：

String

（必须）className 参数指定要移除的 class 样式名称。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 addClass 单个方法
import removeClass from '@yaohaixiao/dom.js/removeClass'

const $list = DOM.byId('#list')

// 添加 class 样式
DOM.addClass($list, 'nav')
DOM.addClass($list, 'primary')

// 判断是否存在 class 样式
DOM.removeClass($list, 'nav') => true
removeClass($list, 'primary')

hasClass($list, 'list') => true
hasClass($list, 'nav') => false
hasClass($list, 'primary') => false

Category：

Attributes

toggleClass() 方法用来切换（添加或删除） DOM 元素中的 className 的样式。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定需要切换 class 样式的 DOM 元素。

className

Type：

String

（必须）className 参数指定要切换的样式名称。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 addClass 单个方法
import hasClass from '@yaohaixiao/dom.js/addClass'
import toggleClass from '@yaohaixiao/dom.js/toggleClass'

const $active = document.querySelector('.active')

// 添加 class 样式
hasClass($active, 'active') // -> true

// 判断是否存在 class 样式
DOM.toggleClass($active, 'active')
hasClass($active, 'active') // -> false

// 判断是否存在 class 样式
toggleClass($active, 'active')
hasClass($active, 'active') // -> true

Category：

Attributes

getAttribute() 方法用来获取 DOM 元素的 DOM 属性值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

attr

Type：

String

（必须）attr 参数指定要获取的属性名称。

Returns

Type：

Any

返回指定的属性值。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getAttribute 单个方法
import getAttribute from '@yaohaixiao/dom.js/getAttribute'

const $list = byId('#list')

getAttribute($list, 'id') // -> 'list'
// 针对 className 属性获取样式属性
DOM.getAttribute($list, 'className') // -> 'list'

DOM.addClass($list, 'nav')
// 也可以直接实用 class 属性，因为在获取属性时，class 不存在 JS 的保留关键字的限制
DOM.getAttribute($list, 'class') // -> 'list nav'

Category：

Attributes

getAttribute() 方法用来获取 DOM 元素的单个或多个 HTML 属性值（键/值对象）。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

props

Type：

Array

（可选）props 参数指定要获取的属性名称的数组，不指定则获取全部 DOM 属性。

Returns

Type：

Any

返回查询的多属性的键/值对象。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getAttributes 单个方法
import getAttributes from '@yaohaixiao/dom.js/getAttributes'

const $list = byId('#list')

DOM.getAttributes($list, ['id', 'class']) // -> { id: 'list', class: 'list' }
getAttributes($list) // -> { id: 'list', class: 'list' }
getAttributes($list, ['className']) // -> { className: 'list' }

Category：

Attributes

getAttribute() 方法用来设置 DOM 元素的 DOM 属性值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

attr

Type：

String

（必须）attr 参数指定属性名称。

value

Type：

Any

（必须）value 参数指定属性值。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 setAttribute 单个方法
import setAttribute from '@yaohaixiao/dom.js/setAttribute'

const $list = byId('#list')

DOM.setAttribute($list, 'data-id', 'list')
DOM.getAttribute($list, 'data-id') // -> 'list'

// 可以一次性调整多个样式，性能更好
setAttribute($list, 'style', 'width:200px;height:30px;')
DOM.getAttribute($list, 'style') // -> 'width:200px;height:30px;'

DOM.setAttribute($list, 'className', 'nav')
DOM.getAttribute($list, 'className') // -> 'nav'

Category：

Attributes

getAttributes() 方法用来给 DOM 元素一次设置多个 DOM 属性/值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

attrs

Type：

Object

（必须）attrs 参数指定要设置的属性键/值对象。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 setAttributes 单个方法
import setAttributes from '@yaohaixiao/dom.js/setAttributes'

const $list = byId('#list')

setAttributes($list, {
  'aria-hidden': true,
  'data-id': 'list',
  style: 'height:30px;width:100%;'
})

DOM.getAttribute($list, 'data-id') // -> 'list'

Category：

Attributes

removeAttribute() 方法用来移除 DOM 元素的 DOM 属性值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

attr

Type：

String

（必须）attr 参数指定属性名称。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 removeAttribute 单个方法
import removeAttribute from '@yaohaixiao/dom.js/removeAttribute'

const $list = byId('#list')

DOM.removeAttribute($list, 'id')
DOM.getAttribute($list, 'id') // -> null

// 可以一次性调整多个样式，性能更好
DOM.setAttribute($list, 'style', 'width:200px;height:30px;')
DOM.getAttribute($list, 'style') // -> 'width:200px;height:30px;'

removeAttribute($list, 'style')
DOM.getAttribute($list, 'style') // -> null

Category：

Attributes

removeAttributes() 方法用来移除 DOM 元素（一个或）多个 DOM 属性。不设置 attrs，则移除 el 元素上的所有 DOM 属性。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

attrs

Type：

Object

（可选）attrs 参数指定要移除的属性名称数组，不设置 attrs，则移除 el 元素上的所有 DOM 属性。

Usage

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 removeAttributes 单个方法
import removeAttributes from '@yaohaixiao/dom.js/removeAttributes'

const $list = byId('#list')

// 效果相同 removeAttributes(el)
DOM.removeAttributes($list, ['id', 'class'])
DOM.getAttribute($list, 'id') // -> null
DOM.getAttribute($list, 'class') // -> null

Since

0.5.0

Category：

Attributes

getValue() 方法用来获取 DOM （表单）元素的 value 属性值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

String

返回指定的属性值。

Usage

<label for="user" class="label">用户名：</label><input type="text" name="user" id="user" value="Robert" />
<label for="group" class="label">部门：</label>
<select id="group" name="group" class="select">
  <option value="全部">全部</option>
  <option value="开发云" selected>开发云</option>
  <option id="option" value="建模">建模</option>
  <option value="售楼">售楼</option>
</select>
<label for="desc" class="label">备注：</label><textarea name="desc" id="desc">前端工程师</textarea>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 setValue 单个方法
import setValue from '@yaohaixiao/dom.js/setValue'

const $user = byId('#user')
const $group = byId('#group')
const $option = byId('#option')
const $desc = byId('#desc')

DOM.getValue($user) // -> 'Robert'
DOM.getValue($group) // -> '开发云'

getValue($option) // -> '开发云'
getValue($desc) // -> '前端工程师'

Since

0.5.0

Category：

Attributes

getValue() 方法用来给 DOM （表单）元素设置 value 属性值。

Parameters

el

Type：

HTMLElement

val

Type：

String|Number|Boolean

（必须）val 参数指定属性值。

Usage

<label for="user" class="label">用户名：</label><input type="text" name="user" id="user" value="Robert" />
<label for="group" class="label">部门：</label>
<select id="group" name="group" class="select">
  <option value="全部">全部</option>
  <option value="开发云" selected>开发云</option>
  <option id="option" value="建模">建模</option>
  <option value="售楼">售楼</option>
</select>
<label for="desc" class="label">备注：</label><textarea name="desc" id="desc">前端工程师</textarea>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getValue 单个方法
import getValue from '@yaohaixiao/dom.js/getValue'

const $user = byId('#user')
const $group = byId('#group')
const $option = byId('#option')
const $desc = byId('#desc')

DOM.getValue($user) // -> 'Robert'
DOM.setValue($user, 'Yaohaixiao')
DOM.getValue($user) // -> 'Yaohaixiao'


DOM.getValue($group) // -> '开发云'
setValue($group, '建模')
DOM.getValue($group) // -> '建模'

getValue($option) // -> '建模'
setValue($option, '成本')
DOM.getValue($group) // -> '成本'

DOM.getValue($desc) // -> '前端工程师'
setValue($desc, '软件工程师')
DOM.getValue($desc) // -> '软件工程师'

Category：

Attributes

attrs() 方法用来设置或者获取 DOM 元素的（一个或多个） DOM 属性值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

attrs

Type：

String|Array|Object

（可选）attrs 参数指定属性名称。

value

Type：

Any

（可选）value 参数指定属性值。

attrs() 方法的参数配置有以下几种场景：

1. 仅传递 el 参数：用于获取 el 元素上的所有 DOM 属性；
2. 传递了 attr 参数
   1. attr 参数为 String 类型
      1. 传递了 value 参数：用于给 el 元素设置（单个） DOM 属性；
      2. 未传递 value 参数：用于获取 el 元素的（单个）DOM 属性值；
   2. 未传递 value 参数
      1. attr 参数为 Array 类型：用于获取 el 元素的多个 DOM 属性/值；
      2. attr 参数为 Object 类型：用于给 el 元素设置多个 DOM 属性/值；

Returns

Type：

Any

返回获取的单个或者多个 DOM 属性。

Usage

<ul id="list" class="list">
   <li class="item active">Home</li>
   <li class="item">Blog</li>
   <li class="item">Projects</li>
   <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 attrs 单个方法
import attrs from '@yaohaixiao/dom.js/attrs'

const $list = byId('#list')

// 获取所有 DOM 属性
DOM.attrs(el) // => {id:'list',class:'list'}
// 获取单个属性
attrs(el, 'id') // => 'list'
// 获取多个属性
attrs(el, ['id', 'class']) // => {id:'list',class:'list'}

// 设置单个属性
attrs(el, 'id', 'nav')
// 设置多个属性
attrs(el, {id:'list',class:'list'})

Since

1.2.0

Category：

Attribute

enable() 方法用来将启用指定 DOM 元素。

Parameters

el

Type：

HTMLElement

（必须）指定要启用的 DOM 元素。

Usage

<ul id="list" class="list">
  <li class="item active">Home</li>
</ul>

<input type="text" id="user" class="user" value="Robert" />
<input type="checkbox" id="reading" name="hobby" class="checkbox" value="reading" />读书
<textarea id="desc" class="desc">I\'m a programmer</textarea>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 enable 单个方法
import enable from '@yaohaixiao/dom.js/enable'

const $list = byId('#list')
const $user = byId('#user')
const $desc = byId('#desc')

// 非 input 或者 textarea 元素 enable() 方法无效
DOM.enable($list) // -> false

DOM.disable($user)
DOM.getAttribute($user, 'disabled') // -> true
// enable() 方法是直接移除 DOM 元素的 disabled 属性
enable($user)
DOM.getAttribute($user, 'disabled') // -> null

// 对已经启用的 DOM 元素无效
DOM.enable($user) // -> false

DOM.disable($desc)
DOM.getAttribute($desc, 'disabled') // -> true
// enable() 方法是直接移除 DOM 元素的 disabled 属性
enable($desc)
DOM.getAttribute($desc, 'disabled') // -> null

Since

1.2.0

Category：

Attribute

disable() 方法用来禁用指定 DOM 元素。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定要禁用的 DOM 元素。

Usage

<ul id="list" class="list">
   <li class="item active">Home</li>
</ul>

<input type="text" id="user" class="user" value="Robert" />
<input type="checkbox" id="reading" name="hobby" class="checkbox" value="reading" />读书
<textarea id="desc" class="desc">I\'m a programmer</textarea>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 disable 单个方法
import disable from '@yaohaixiao/dom.js/disable'

const $list = byId('#list')
const $user = byId('#user')
const $desc = byId('#desc')

// 非 input 或者 textarea 元素 disable() 方法禁用无效
DOM.disable($list) // -> false

disable($user)
DOM.getAttribute($user, 'disabled') // -> true

// 对已经警用的 DOM 元素，再禁用无效
DOM.disable($user) // -> false

disable($desc)
DOM.getAttribute($desc, 'disabled') // -> true

Since

1.2.0

Category：

Attribute

readonly() 方法用来启用或者取消 DOM 元素的只读模式。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定需要启用或者禁用制度模式的 DOM 元素。

Usage

<ul id="list" class="list">
   <li class="item active">Home</li>
</ul>

<input type="text" id="user" class="user" value="Robert" />
<input type="checkbox" id="reading" name="hobby" class="checkbox" value="reading" />读书
<textarea id="desc" class="desc">I\'m a programmer</textarea>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 readonly 单个方法
import readonly from '@yaohaixiao/dom.js/readonly'

const $list = byId('#list')
const $user = byId('#user')
const $desc = byId('#desc')

// 非 input 或者 textarea 元素 readonly() 方法无效
DOM.readonly($list) // -> false

DOM.readonly($user)
DOM.getAttribute($user, 'readonly') // -> true
// readonly() 方法是直接移除 DOM 元素的 readonly 属性
readonly($user)
DOM.getAttribute($user, 'readonly') // -> null

// 对已经只读的 DOM 元素无效
DOM.readonly($user) // -> false

DOM.readonly($desc)
DOM.getAttribute($desc, 'readonly') // -> true
readonly($desc)
DOM.getAttribute($desc, 'readonly') // -> null

Category：

Attributes

html() 方法用来获取或者设置 DOM 元素的 innerHTML 属性值，或者通过 HTML 字符串，创建 DOM 元素。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定 DOM 元素或者用来创建 DOM 元素的 HTML 字符串；

strHTML

Type：

String

（可选）strHTML 参数指定设置的 innerHTML 字符串，如果不指定则返回 el 元素的 innerHTML 属性（字符串）。

Returns

Type：

Any

返回创建的 DOM 元素或者 DOM 元素的 innerHTML 属性（字符串）。

Usage

<ul id="list" class="list">
   <li class="item active">Home</li>
   <li class="item">Blog</li>
   <li class="item">Projects</li>
   <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 html 单个方法
import html from '@yaohaixiao/dom.js/html'

const $list = byId('#list')

// 获取 innerHTML 属性（字符串）
DOM.html($list)
// -> '<li class="item active">Home</li>‘
// -> '<li class="item">Blog</li>'
// -> '<li class="item">About</li>'

// 将 $list 元素的 innerHTML 设置为 '<li class="item">Blog</li>'
html($list, '<li class="item">Blog</li>')

// 创建一个 li 标签的 DOM 元素
const $item = html('<li class="item">About</li>')
// 将创建的 $item 元素添加到 $list 列表
$list.appendChild($item)

Category：

Attributes

text() 方法获取或者设置 DOM 元素的 innerText 属性值，或者通过字符串，创建 TextNode 元素。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定 DOM 元素或者用来创建 TextNode 元素的字符串。

str

Type：

String

（可选）str 参数指定设置的 innerText 字符串，如果不指定则返回 el 元素的 innerText 属性（字符串）。

Returns

Type：

Any

返回创建的 DOM 元素或者 TextNode 元素的 innerText 属性（字符串）。

Usage

<ul id="list" class="list">
   <li id="active" class="item active">Home</li>
   <li class="item">Blog</li>
   <li class="item">Projects</li>
   <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 text 单个方法
import text from '@yaohaixiao/dom.js/text'

const $active = byId('#active')

// 获取 innerText 属性（字符串）
DOM.text($active) // -> 'Home'

// 将 $active 元素的 innerText 设置为 'Homepage'
text($active, 'Homepage')

// 创建一个文本为 URL 的 TextNode 元素
const $text = test('URL')
// 将创建的 $text 元素添加到 $active
$active.appendChild($text)
text($active) // -> 'HomepageURL'

Since

0.5.0

Category：

Attributes

val() 方法用来获取或者设置 DOM （表单）元素的 value 属性值。

Parameters

el

Type：

HTMLElement

value

Type：

String|Number|Boolean

（可选）value 参数指定属性值。

Returns

Type：

String

返回指定的属性值。

Usage

<label for="user" class="label">用户名：</label><input type="text" name="user" id="user" value="Robert" />
<label for="group" class="label">部门：</label>
<select id="group" name="group" class="select">
  <option value="全部">全部</option>
  <option value="开发云" selected>开发云</option>
  <option id="option" value="建模">建模</option>
  <option value="售楼">售楼</option>
</select>
<label for="desc" class="label">备注：</label><textarea name="desc" id="desc">前端工程师</textarea>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 val 单个方法
import val from '@yaohaixiao/dom.js/val'

const $user = byId('#user')
const $group = byId('#group')
const $option = byId('#option')
const $desc = byId('#desc')

DOM.val($user) // -> 'Robert'
DOM.val($user, 'Yaohaixiao')
DOM.val($user) // -> 'Yaohaixiao'

val($group) // -> '开发云'
val($group, '建模')
val($group) // -> '建模'

val($option) // -> '建模'
val($option, '成本')
val($group) // -> '成本'

val($desc) // -> '前端工程师'
val($desc, '软件工程师')
val($desc) // -> '软件工程师'

Since

1.1.0

Category：

Base

build() 方法用来将 HTML 字符串解析生成 DOM 节点。

注意：build() 方法与 html() 方法的不同之处在于 build() 方法返回的是 HTML 字符串解析后生成 DOM 元素，而 html() 方法返回的是包含 HTML 字符串解析后生成 DOM 元素的文档碎片。

Parameters

str

Type：

String

（可选）str 参数指定用来创建 DOM 节点的 HTML 字符串。

Returns

Type：

HTMLElement

返回创建的 DOM 元素。

Usage

<ul id="list" class="list">
   <li class="item active">Home</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 build 单个方法
import build from '@yaohaixiao/dom.js/build'

const $list = byId('#list')

// 获取 innerHTML 属性（字符串）
const $blog = DOM.build('<li class="item">Blog</li>')

DOM.isElement($blog) // -> true
DOM.append($blog, $list)
// <ul id="list" class="list">
//   <li class="item active">Home</li>
//   <li class="item">Blog</li>
// </ul>

const $projects = build('<li class="item">Projects</li>')

DOM.isElement($projects) // -> true

Category：

Base

createElement() 方法用来创建 DOM 节点，并添加属性和子节点。

Parameters

tagName

Type：

String

（必须）标签名称。

attrs

Type：

Object|Array|HTMLElement|DocumentFragment|String

• Object：要添加的 HTML 属性/值对象；
• Array：添加到创建的 DOM 元素中的多个子元素的数组；
• HTMLElement：添加到创建的 DOM 元素中的（单个）子元素；
• DocumentFragment：添加到创建的 DOM 元素中的文档碎片；
• String：添加到创建的 DOM 元素中的文本（会作为文本节点）；

（可选）给创建的 DOM 元素添加的 HTML 属性/值对象或者子元素。

children

Type：

Array|HTMLElement|DocumentFragment|String

• Array：添加到创建的 DOM 元素中的多个子元素的数组；
• HTMLElement：添加到创建的 DOM 元素中的（单个）子元素；
• DocumentFragment：添加到创建的 DOM 元素中的文档碎片；
• String：添加到创建的 DOM 元素中的文本（会作为文本节点）；

（可选）给创建的 DOM 元素添加的子元素。

Returns

Type：

HTMLElement

返回创建的 DOM 元素。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 createElement 单个方法
import createElement from '@yaohaixiao/dom.js/createElement'

// 创建 LI 节点，并且添加一个 TextNode 类型的子元素
const $home = DOM.createElement('li', {
  id: 'home',
  className: 'item active'
}, DOM.text('Home'))

// 创建 LI 节点，设置 class 属性并且添加 Blog 字符串（添加一个 TextNode 类型的子元素）
const $blog = createElement('li', {
  className: 'item'
}, 'Blog')

// 创建 LI 节点，并且添加 About 字符串（添加一个 TextNode 类型的子元素）
const $about = createElement('li', 'About')

addClass($about, 'item')

// 创建 UL 节点，并且添加多个 LI 子节点
const $list = createElement('ul', {
  id: 'list',
  className: 'list'
), [
  $home,
  $blog,
  $about
])

document.body.appendChild($list)

Category：

Base

clone() 方法用来创建给定 DOM 元素的副本。

Parameters

el

Type：

HTMLElement

（必须）要克隆的 DOM 元素。

deep

Type：

Boolean

Default：

false

（可选）是否深度可浓。

• false：（默认值）仅克隆指定 DOM 元素，不会可能其包含的子元素；
• true：克隆指定元素，并且也会克隆其子元素；

Returns

Type：

HTMLElement

返回克隆的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 clone 单个方法
import clone from '@yaohaixiao/dom.js/clone'

const $list = DOM.byId('#list')
const $clone = DOM.clone($list)

// 潜拷贝 $list，不会拷贝其子元素
const $active = DOM.byClass('.active', $clone) // => null

// 采用深拷贝 $list，则会拷贝其子元素，因此可以查询到其子元素
const $current = clone($list, true).querySelector('.active')
// -> <li id="home" class="item active">Home</li>

Category：

Base

closet() 方法用来获取父元素最近的包含 selector 选择器的元素。通常用于使用事件代理时，获取点击的目标 DOM 元素。

Parameters

el

Type：

HTMLElement

（必须）el 指定父元素。

selector

Type：

String

（必须）selector 指定要查询元素的选择器。

ctx

Type：

HTMLElement

（可选）ctx 指定比对的 DOM 元素

includeCTX

Type：

Boolean

（可选）includeCTX 指定是否包含 ctx 参数指定的 DOM 元素.

Returns

Type：

HTMLElement

返回匹配的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 closet 单个方法
import closet from '@yaohaixiao/dom.js/closet'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

closet($home, '.active', $list)
// -> <li id="home" class="item active">Home</li>

Category：

Base

byClass() 方法返回与指定的类选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

Parameters

className

Type：

String

（必须）className 类选择器字符串。

el

Type：

HTMLElement

（可选）el 参数指定要检索的 DOM 元素范围，不指定则默认为 document。

Returns

Type：

HTMLElement

返回检索匹配的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 byClass 单个方法
import byClass from '@yaohaixiao/dom.js/byClass'

// 使用 class 选择器，或者使用 class 属性值都可以检索
const $items = DOM.byClass('.item')
const $items = byClass('item')

Category：

Base

byId() 方法返回文档中与指定 id 选择器匹配 Element 对象。

Parameters

id

Type：

String

（必须）id 选择器字符串。

el

Type：

HTMLElement

（可选）el 参数指定要检索的 DOM 元素范围，不指定则默认为 document。

Returns

Type：

HTMLElement

返回检索匹配的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 byId 单个方法
import byId from '@yaohaixiao/dom.js/byId'

// 使用 ID 选择器，或者使用 ID 属性值都可以检索
const $list = DOM.byId('#list')
const $home = byId('home')

Category：

Base

返回与指定的选择器组匹配的文档中的 DOM 元素或者 DOM 元素列表。

Parameters

selector

Type：

String

（必须）选择器字符串。

el

Type：

HTMLElement|Boolean

（可选）el 参数指定要检索的 DOM 元素范围（不指定则默认为 document）或者是否返回 DOM 元素列表。

multiple

Type：

Boolean

（可选）multiple 参数指定是否返回 DOM 元素列表，默认值：false。为 true 时，则返回 DOM 元素列表（获取所有于原则器匹配的 DOM 元素）。

Returns

Type：

HTMLElement|NodeList

返回检索匹配的 DOM 元素或者 DOM 元素列表。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getEl 单个方法
import getEl from '@yaohaixiao/dom.js/getEl'

const $list = DOM.getEl('#list')

// 获取多个
const $items = getEl('.item', true)
const $items = getEl('.item', $list, true)

// 仅匹配第一个
const $items = getEl('.item', $list)

Since

0.4.0

Category：

Base

返回文档（document）中与指定的选择器组匹配的第一个 DOM 元素。

Parameters

selector

Type：

String

（必须）选择器字符串。

Returns

Type：

HTMLElement

返回检索匹配的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 find 单个方法
import find from '@yaohaixiao/dom.js/find'

const $list = DOM.find('#list')

// 匹配第一个
const $item = find('.item')
const $blog = find('.blog')

Since

0.4.0

Category：

Base

返回文档（document）中与指定的选择器组匹配的所有 DOM 元素。

Parameters

selector

Type：

String

（必须）选择器字符串。

Returns

Type：

NodeList

返回检索匹配的 DOM 元素列表。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 findAll 单个方法
import findAll from '@yaohaixiao/dom.js/findAll'

const $items = DOM.findAll('.item')

const $blog = findAll('.blog')

Since

1.7.0

Category：

Base

fragment() 方法用来创建文档碎片。

Parameters

innerContent

Type：

String|

（可选）str 参数指定用来创建 DOM 节点的 HTML 字符串。

Returns

Type：

DocumentFragment

返回创建的 DocumentFragment 对象。

Usage

<ul id="list" class="list">
   <li class="item active">Home</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 fragment 单个方法
import fragment from '@yaohaixiao/dom.js/fragment'

const $list = byId('#list')

// 获取 innerHTML 属性（字符串）
const $blog = DOM.build('<li class="item">Blog</li>')

DOM.isElement($blog) // -> true
DOM.append($blog, $list)
// <ul id="list" class="list">
//   <li class="item active">Home</li>
//   <li class="item">Blog</li>
// </ul>

const $projects = fragment('<li class="item">Projects</li>')

DOM.isFragment($projects) // -> true
DOM.append($blog, $list)
// <ul id="list" class="list">
//   <li class="item active">Home</li>
//   <li class="item">Blog</li>
//   <li class="item">Projects</li>
// </ul>

Since

1.7.0

Category：

Base

getActiveElement() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.10.0

Category：

Base

getAncestorBy() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.10.0

Category：

Base

getAncestorByClassName() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.7.0

Category：

Base

getAncestorByTagName() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.10.0

Category：

Base

getChildren() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.10.0

Category：

Base

getChildrenBy() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.9.0

Category：

Base

getContainingBlock() 方法用来获取 DOM 元素的 nodeName 属性值。

Parameters

el

Type：

Node

（必须）指定的 HTMLElement 元素。

Returns

Type：

Window

返回 Window 对象。

<style>
  .list {
    transform: scale(1.2);
  }
</style>

<nav id="nav" class="nav">
  <ul id="list" class="list">
      <li id="home" class="item active">Home</li>
      <li class="item blog">Blog</li>
      <li class="item">Projects</li>
      <li class="item">About</li>
  </ul>
</nav>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getContainingBlock 单个方法
import getContainingBlock from '@yaohaixiao/dom.js/getContainingBlock'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getContainingBlock($list) // -> 'null

getContainingBlock($home))
// -> '<ul id="list" class="list"></ul>'

Since

1.6.0

Category：

Base

getDocument() 方法用来获取 Node 对象（DOM 元素）所在的文档的 documentElement 对象。

Parameters

node

Type：

Node | Window

（必须）指定的 DOM 元素或者 window 对象。

Returns

Type：

documentElement 对象

返回 documentElement 对象。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getDocument 单个方法
import getDocument from '@yaohaixiao/dom.js/getDocument'

const $list = DOM.getEl('#list')

// 浏览器中运行
DOM.getDocument($list) // -> 返回 $list 所在文档的 documentElement 对象
getDocument(document) // -> 返回当前文档的 documentElement 对象
getWindow(window) // -> 返回当前文档的 documentElement 对象

Since

1.10.0

Category：

Base

getFirstChild() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.10.0

Category：

Base

getFirstChildBy() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.6.0

Category：

Base

返回这个页面页或者某个DOM元素下的所有图片路径的数组。

Parameters

el

Type：

String

Default：

'body'

（可选）指定 DOM 节点的选择器。默认值： document.body。

includeDuplicates

Type：

Boolean

Default：

false

（可选）是否收集重复的图片。默认值：false

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getImages 单个方法
import getImages from '@yaohaixiao/dom.js/getImages'

const $list = DOM.getEl('#list')

// 获取整个页面中的图片路径，不包含重复的图片
DOM.getImages(true)

// 仅获取 $list 菜单下的图片路径，包含重复的图片
getImages($list, true)

Category：

Base

getHostOrParent() 方法用来获取 DOM 元素的父节点。

Parameters

el

Type：

HTMLElement

el 参数指定 DOM 元素。

Returns

Type：

HTMLElement

返回查询到的 DOM 元素的父节点。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getHostOrParent 单个方法
import getHostOrParent from '@yaohaixiao/dom.js/getHostOrParent'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

const $parent = DOM.getHostOrParent($home)
console.log($parent === $list) // -> true

Since

1.10.0

Category：

Base

getLastChild() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.10.0

Category：

Base

getLastChildBy() 方法返回当前在 DOM 或者 shadow DOM 树中处于聚焦状态的 DOM 元素。

Returns

Type：

HTMLElement

返回处于聚焦状态的 DOM 元素。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getActiveElement 单个方法
import getActiveElement from '@yaohaixiao/dom.js/getActiveElement'

const $list = DOM.getEl('#list')
const $home = DOM.getEl('#home')

DOM.getActiveElement() // -> null

$home.click()
getActiveElement()
// -> <li id="home" class="item active">Home</li>

Since

1.9.0

Category：

Base

getNodeName() 方法用来获取 DOM 元素的 nodeName 属性值。

Parameters

node

Type：

Node

（必须）指定的 Node 元素。

Returns

Type：

Window

返回 Window 对象。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getNodeName 单个方法
import getNodeName from '@yaohaixiao/dom.js/getNodeName'

const $list = DOM.getEl('#list')

// DOM 元素的 nodeName
DOM.getNodeName($list) // -> 'ul'

// 文本节点也可返回
getNodeName(DOM.text('text')) // -> '#text'

Category：

Base

getOffsetParent() 方法用来获取最近的（指包含层级上的最近）包含该元素的定位父元素。

Parameters

el

Type：

HTMLElement

el 参数指定 DOM 元素。

Returns

Type：

HTMLElement

返回查询到的 DOM 元素的父节点。

<style>
.list {
  position:relative;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getOffsetParent 单个方法
import getOffsetParent from '@yaohaixiao/dom.js/getOffsetParent'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

const $parent = DOM.getOffsetParent($home)
console.log($parent === $list) // -> true

console.log(getOffsetParent($list)) // -> document.body

Category：

Base

getScrollParent() 方法用来获取最近的（指包含层级上的最近）包含该元素的滚动父元素（overflow/overflow-x/overflow-y: auto ）。

Parameters

el

Type：

HTMLElement

el 参数指定 DOM 元素。

Returns

Type：

HTMLElement

返回查询到的 DOM 元素的父节点。

<style>
.list {
  position:relative;
  overflow: auto;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScrollParent 单个方法
import getScrollParent from '@yaohaixiao/dom.js/getScrollParent'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

const $parent = DOM.getScrollParent($home)
console.log($parent === $list) // -> true

console.log(getScrollParent($list)) // -> document.body

Since

1.9.0

Category：

Base

getTagName() 方法用来获取 DOM 元素的 tagName 属性值。

Parameters

el

Type：

HTMLElement

（必须）指定的 HTMLElement 元素。

Returns

Type：

Window

返回 Window 对象。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getTagName 单个方法
import getTagName from '@yaohaixiao/dom.js/getTagName'

const $list = DOM.getEl('#list')

// DOM 元素的 tagName
DOM.getTagName($list) // -> 'ul'

// 文本节点没有 tagName，因此返回 ''
getNodeName(DOM.text('text')) // -> ''

Since

1.6.0

Category：

Base

getWindow() 方法用来获取 window 对象。

Parameters

o

Type：

Node | Window

（必须）指定的 DOM 元素或者 window 对象。

Returns

Type：

Window

返回 Window 对象。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getWindow 单个方法
import getWindow from '@yaohaixiao/dom.js/getWindow'

const $list = DOM.getEl('#list')

// 浏览器中运行
DOM.getWindow(window) // -> 返回当前 Window 对象

getWindow(document) // -> 返回当前 Window 对象
getWindow($list) // -> 返回当前 Window 对象

Since

1.7.0

Category：

Base

getVisualViewport() 方法用来获取（el元素所在窗口的）VisualViewport 对象。

Parameters

el

Type：

HTMLElement

（可选）el 参数指定 DOM 元素，用以获取元素所在窗口的 VisualViewport 对象，不指定 el，则直接获取当前窗口的 VisualViewport 对象。

Returns

Type：

VisualViewport。

返回（el元素所在窗口的或者当前） VisualViewport 对象。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 getVisualViewport() 方法
import getVisualViewport from '@yaohaixiao/dom.js/getVisualViewport'

const $list = document.getElementById('list')

DOM.getVisualViewport($list) // -> 返回 $list 所在窗口的 VisualViewport 对象
getVisualViewport() // -> 返回当前窗口的 VisualViewport 对象

Category：

Base

index() 方法用来查询 DOM 元素在其父节点中的索引位置。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定 DOM 元素或者 DOM 元素的选择器字符串。

ancestor

Type：

HTMLElement

（可选）ancestor 参数指定父节点。

Returns

Type：

Number

返回查询到的 DOM 元素在其父节点的 index 索引值。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 index 单个方法
import index from '@yaohaixiao/dom.js/index'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

// el 参数是 DON 元素
console.log(DOM.indexOf($home)) // -> 0

// 指定父节点
console.log(indexOf('.blog', $list)) // -> 1

// el 为选择器，且为指定指定父节点
console.log(indexOf('.project')) // -> 2

Category：

Base

children() 方法用来获取指定 DOM 元素下所有元素节点。

Parameters

el

Type：

HTMLElement

el 参数指定 DOM 元素。

Returns

Type：

Array

返回查询到的 DOM 元素的数组。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 children 单个方法
import children from '@yaohaixiao/dom.js/children'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.children($list)
// -> [
//   <li id="home" class="item active">Home</li>,
//   <li class="item">Blog</li>
//   <li class="item">Projects</li>
//   <li class="item">About</li>
// ]

children($home) // -> []

Category：

Base

parent() 方法用来获取给定 el 元素的父节点。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

type

Type：

String

（可选）type 指定父节点的类型：

• offset：获取最近的（指包含层级上的最近）包含该元素的定位父元素;
• scroll: 获取最近的（指包含层级上的最近）包含该元素的滚动父元素（overflow/overflow-x/overflow-y: auto ）；
• 其它：获取 el 的父节点；

Returns

Type：

HTMLElement

返回 el 节点（指定类型）的父节点。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 parent 单个方法
import parent from '@yaohaixiao/dom.js/parent'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.parent($home)
// -> <ul id="list" class="list">
parent($home, 'scroll')
// -> document.documentElement

parent($list, 'offset')
// -> document.body

Since

1.7.0

Category：

Base

parents() 方法用来获取给定 el 元素的所有父节点，并可以包含自身。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素或者 DOM 元素的选择器字符串。

includeSelf

Type：

Boolean

Default：

false

（可选）includeSelf 指定之后包含元素自身。默认值：false。

Returns

Type：

Array

返回 el 节点的所有父节点的数组。

<ul id="list" class="list">
    <li id="home" class="item home active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 parents 单个方法
import parents from '@yaohaixiao/dom.js/parents'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.parents($home)
// -> [<ul id="list" class="list">]
parents('.home', true)
// -> [
//  <ul id="list" class="list">,
//  <li id="home" class="item active">Home</li>
// ]

Since

0.4.0

Category：

Color

getColor() 方法用来获取 DOM 元素指定的颜色值。可指定获取 16 进制色值或者 RGB 色值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 节点。

attr

Type：

String

（必须）attr 参数指定表示颜色的属性字符串：

// 只能是以下包含的颜色属性
[
  'accent-color',
  'background-color',
  'border-color',
  'border-bottom-color',
  'border-left-color',
  'border-right-color',
  'border-top-color',
  'color',
  'outline-color',
  'text-decoration-color'
]

isHex

Type：

Boolean

Default：

true

（可选）isHex 参数指定是否为 16 进制色值:

• true: （默认值） 16 进制色值；
• false: RGB 色值；

Returns

Type：

String

返回表示色值的字符串。

<style>
  .list {
    background-color: rgb(255,255,255);
    color: black;
  }
</style>

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getColor 单个方法
import getColor from '@yaohaixiao/dom.js/getColor'

const $list = DOM.byId('#list')

DOM.getColor($list, 'color', false) // 'rgb(0, 0, 0)'
getColor($list, 'background-color') // '#ffffff'

Since

1.7.0

Category：

Color

randomHexColor() 方法用来将随机生成 HEX 格式颜色代码字符串。

Returns

Type：

String

返回随机生成 HEX 格式颜色代码字符串。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 randomHexColor 单个方法
import randomHexColor from '@yaohaixiao/dom.js/randomHexColor'

DOM.randomHexColor() // -> '#ff1100'
randomHexColor() // -> '#ef23c2'

Since

0.4.0

Category：

Color

toHex() 方法用来将指定颜色（颜色英文名称、RGB格式或者 HSL 格式色值）转化成 16 进制色值。

Parameters

color

Type：

String

（必须）color 参数指定指定颜色。

Returns

Type：

String

返回转化后的 16 进制色值。

<style>
  .list {
    background-color: rgb(255,255,255);
    color: black;
  }
</style>

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 toHex 单个方法
import toHex from '@yaohaixiao/dom.js/toHex'

const $list = DOM.byId('#list')

DOM.toHex(DOM.getStyle($list, 'color')) // '#000'
toHex(DOM.getStyle($list, 'background-color')) // '#ffffff'
toHex('hsl(0,100%,50%)') // -> '#ff0000'

Since

1.3.0

Category：

Color

toHSL() 方法用来将指定颜色（颜色英文名称、16 进制或RGB格式色值）转化成 HSL 格式色值。

Parameters

color

Type：

String

（必须）color 参数指定指定颜色。

Returns

Type：

String

返回转化后的 HSL 进制色值。

<style>
  .list {
    background-color: rgb(255,255,255);
    color: black;
  }
</style>

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 toHSL 单个方法
import toHSL from '@yaohaixiao/dom.js/toHSL'

const $list = DOM.byId('#list')

DOM.toHSL(DOM.getStyle($list, 'color')) // 'hsl(0,0%,0%)'
toHSL(DOM.getStyle($list, 'background-color')) // 'hsl(0,0%,100%)'
toHSL('red') // 'hsl(0,100%,50%)'

Since

0.4.0

Category：

Color

toHex() 方法用来将指定颜色（颜色英文名称、16 进制或者 HSL 色值）转化成 RGB 色值。

Parameters

color

Type：

String

（必须）color 参数指定指定颜色。

Returns

Type：

String

返回转化后的 RGB 色值。

<style>
  .list {
    background-color: #fff;
    color: black;
  }
</style>

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 toRGB 单个方法
import toRGB from '@yaohaixiao/dom.js/toRGB'

const $list = DOM.byId('#list')

DOM.toRGB(DOM.getStyle($list, 'color')) // -> 'rgb(0, 0, 0)'
toRGB(DOM.getStyle($list, 'background-color')) // -> 'rgb(255, 255, 255)'
toRGB('hsl(0,100%,50%)') // -> 'rgb(255, 0, 0)'

Category：

Base

canPosition() 方法用来检测 DOM 元素是否可以定位（可见且在当前当前文档中）。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Boolean

DOM 元素是否可以定位，返回 true，否则返回 false。

<ul id="list" class="list">
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 canPosition 单个方法
import canPosition from '@yaohaixiao/dom.js/canPosition'

const $list = DOM.byId('#list')
const $home = DOM.html('<li id="home" class="item active">Home</li>')

DOM.inDocument($list) // -> true
DOM.canPosition($list) // -> true
canPosition($home) // -> false

$list.appendChild($home)
canPosition($home) // -> true

DOM.setStyle($home, 'display', 'none')
canPosition($home) // -> false

Category：

Base

contains() 方法用来判断某个 DOM 元素中是否包含另一个 DOM 元素。

Parameters

el

Type：

HTMLElement|String

（必须）被包含的 DOM 元素或者 DOM 元素的选择器字符串：

ancestor

Type：

HTMLElement|String

（必须）ancestor 指定用来查询目标 DOM 元素的父元素：

Returns

Type：

Boolean

包含查询元素返回 true，否则返回 false。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 contains 单个方法
import contains from '@yaohaixiao/dom.js/contains'

// 使用 class 选择器，或者使用 class 属性值都可以检索
const $list = DOM.byId('#list')
const $home = byClass('#home')

DOM.contains($home, $list) // -> true
contains('.blog', $list) // -> true

Category：

Detect

inDocument() 方法用来检测 DOM 元素是否在当前文档中。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

doc

Type：

Object

（可选）doc 参数指定文档对象。

Returns

Type：

Boolean

DOM 元素是否在当前文档中，返回 true，否则返回 false。

<ul id="list" class="list">
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 inDocument 单个方法
import inDocument from '@yaohaixiao/dom.js/inDocument'

const $list = DOM.byId('#list')
const $home = DOM.html('<li id="home" class="item active">Home</li>')

DOM.inDocument($list) // -> true
inDocument($home) // -> false

$list.appendChild($home)
inDocument($home) // -> true

Since

1.9.0

Category：

Detect

isContainingBlock() 方法用来检测 DOM 节点用来检测 DOM 元素是否为布局和包含块。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Boolean

DOM 节点为布局和包含块，返回 true，否则为 false。

<style>
  .list {
    transform: scale(1.2);
  }
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isContainingBlock 单个方法
import isContainingBlock from '@yaohaixiao/dom.js/isContainingBlock'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.isContainingBlock($home) // -> true
isContainingBlock($home) // -> false

Since

1.7.0

Category：

Detect

isLayoutViewport() 方法用来判断当前视图是否为布局视图。

Returns

Type：

Boolean。

true - 表示当前视图是否为布局视图，false 则表示不是。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isShadowRoot() 方法
import isLayoutViewport from '@yaohaixiao/dom.js/isLayoutViewport'

DOM.isLayoutViewport() // -> 可以用移动设备模拟器查看 false
isLayoutViewport() // -> true

Category：

Detect

isMatched() 方法用来检测 DOM 节点是否为符合 filter 检测条件的节点。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

filter

Type：

Function|String

（必须）filter 参数指定用于检测 DOM 节点的回调函数或者选择器字符串。

Returns

Type：

Boolean

DOM 节点符合 filter 检测条件，返回 true，否则为 false。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isMatched 单个方法
import isMatched from '@yaohaixiao/dom.js/isMatched'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.isMatched($home, '.active') // -> true
isMatched($home, (el) => {
  return DOM.contains(el, $list)
}) // -> true

isMatched($list, '.active') // -> false

Since

1.9.0

Category：

Detect

isScaled() 方法用来检测 DOM 节点是否被缩放了。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Boolean

DOM 节点被缩放返回 true，否则为 false。

<ul id="list" class="list">
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

<div id="home" class="home">Home</div>

<style>
  .home {
    transform: scale(0.8);
  }
</style>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isScaled 单个方法
import isScaled from '@yaohaixiao/dom.js/isScaled'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.isScaled($home) // -> false
isScaled($home) // -> true

Since

1.6.0

Category：

Detect

isWindow() 方法用来检测当前对象是否为 window 对象。

Parameters

o

Type：

Object

（必须）要检测的目标对象。

Returns

Type：

Boolean

返回检测结果。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isWindow 单个方法
import isWindow from '@yaohaixiao/dom.js/isWindow'

// 浏览器中运行
DOM.isWindow(window) // -> true
DOM.isWindow(document) // -> false

// Node 环境中运行
isWindow(global) // -> false

Category：

Base

contains() 方法用来判断某个 DOM 元素中是否包含另一个 DOM 元素。

Parameters

el

Type：

HTMLElement|String

（必须）被包含的 DOM 元素或者 DOM 元素的选择器字符串：

selector

Type：

String

（必须）selector 指定用来查询目标 DOM 元素的选择器字符串：

Returns

Type：

Boolean

包含查询元素返回 true，否则返回 false。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 has 单个方法
import has from '@yaohaixiao/dom.js/has'

// 使用 class 选择器，或者使用 class 属性值都可以检索
const $list = DOM.byId('#list')
const $home = byClass('#home')

DOM.has($list, '.active') // -> true
has($list, '.blog') // -> true

Category：

Base

matches() 方法用来获取 el 节点下匹配 selector 选择器的 DOM 节点。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

selector

Type：

String

（必须）selector 指定匹配 DOM 元素的选择器。

Returns

Type：

Boolean

el 节点查询到匹配 selector 的 DOM 节点，返回 DOM 节点，否则返回 false。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 matches 单个方法
import matches from '@yaohaixiao/dom.js/matches'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.matches($list, '.active')
// -> <li id="home" class="item active">Home</li>
matches($home, '#home')
// -> <li id="home" class="item active">Home</li>

matches($home, '.blog') // -> false

Since

1.7.0

Category：

DOMRect

getBoundingClientRect() 方法用来获取 DOM 元素的 getBoundingClientRect 数据。

Parameters

el

Type：

Any

（必须）el 参数指定需要获取数据的 DOM 元素。

Returns

Type：

Object。

返回 el 元素的(扩展后的） Rect 数据。

{
  width,
  height,
  top,
  right,
  bottom,
  left,
  x,
  y
}

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 getBoundingClientRect() 方法
import getBoundingClientRect from '@yaohaixiao/dom.js/getBoundingClientRect'

const $list = DOM.byId('#list')
const $host = DOM.byId("#host")

DOM.getBoundingClientRect($list) // -> false
getBoundingClientRect($host) // -> true

Since

1.8.0

Category：

DOMRect

getDocumentRect() 方法用来获取 DOM 元素所在的可滚动的文档区域的尺寸。

Parameters

el

Type：

Any

（必须）el 参数指定 DOM 元素。

Returns

Type：

Object。

返回 Rect 数据。

{
  width,
  height,
  x,
  y
}

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 getDocumentRect() 方法
import getDocumentRect from '@yaohaixiao/dom.js/getDocumentRect'

const $list = DOM.byId('#list')
const $host = DOM.byId("#host")

DOM.getDocumentRect($list) // -> {"width": 1920, "height": 457, "x": 0, "y": 0}
getDocumentRect($host) // -> {"width": 1920, "height": 691, "x": 0, "y": 0}

Since

1.8.0

Category：

DOMRect

getViewportRect() 方法用来获取 DOM 元素所在的文档可视区域（viewport）的尺寸。如果页面没有滚动条时，其返回值与 getDocumentRect() 方法的返回值相等。

Parameters

el

Type：

Any

（必须）el 参数指定 DOM 元素。

Returns

Type：

Object。

返回 Rect 数据。

{
  width,
  height,
  x,
  y
}

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 getViewportRect() 方法
import getViewportRect from '@yaohaixiao/dom.js/getViewportRect'

const $list = DOM.byId('#list')
const $host = DOM.byId("#host")

DOM.getViewportRect($list) // -> {"width": 1920, "height": 691, "x": 0, "y": 0}
getViewportRect($host) // -> {"width": 1920, "height": 691, "x": 0, "y": 0}

Since

0.2.0

Category：

DOMRect

inBounding() 方法用来检测某个 DOM 节点的位置是否在另个一个 DOM 节点范围内。

Parameters

child

Type：

HTMLElement

（必须）child 参数指定其中较小的那个 DOM 元素。

parent

Type：

HTMLElement

（必须）parent 参数指定其中较大的那个 DOM 元素。

Returns

Type：

Boolean

child 在 parent 范围内，返回 true，否则返回 false。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 inBounding 单个方法
import inBounding from '@yaohaixiao/dom.js/inBounding'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.inBounding($home, $list) // -> true
inBounding($list, $home) // -> false

Since

0.2.0

Category：

DOMRect

inViewport() 方法用来检测某个 DOM 节点的位置是否在当前视口（当前窗口可见区域）之内。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Boolean

el 在当前视口内，返回 true，否则返回 false。

<style>
.blog{
  position: fixed;
  left: 99999;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 inViewport 单个方法
import inViewport from '@yaohaixiao/dom.js/inViewport'

const $list = DOM.byId('#list')
const $blog = DOM.getEl('.blog')

DOM.inViewport($list) // -> true
inViewport($blog) // -> false

Category：

DOM Insertion

insertAfter() 方法用来在参考节点之后插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用，insertAfter() 会将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点删除该节点）。

Parameters

el

Type：

Element

（必须）el 参数指定要插入的 DOM 元素（DocumentFragment，HTMLElement或者TextNode）。

reference

Type：

String

（必须）reference 指定参考节点。

Returns

Type：

Element|null

函数返回被插入的子节点。当 el 是 DocumentFragment 时，返回空 DocumentFragment。参数不合法时返回 null。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item project">Projects</li>
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 insertAfter 单个方法
import insertAfter from '@yaohaixiao/dom.js/insertAfter'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')
const $about = DOM.getEl('.about')
const $blog = DOM.html('<li class="item blog">Blog</li>')

// 插入创建的节点
DOM.insertAfter($blog, $home)
// -> <li class="item blog">Blog</li>

// 插入引用节点
insertAfter($about, $home)
// -> <li class="item about">About</li>

Category：

DOM Insertion

insertBefore() 方法用来在参考节点之前插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用，insertBefore() 会将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点删除该节点）。

Parameters

el

Type：

Element

（必须）el 参数指定要插入的 DOM 元素（DocumentFragment，HTMLElement或者TextNode）。

reference

Type：

String

（必须）reference 指定参考节点。

Returns

Type：

Element|null

函数返回被插入的子节点。当 el 是 DocumentFragment 时，返回空 DocumentFragment。参数不合法时返回 null。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item project">Projects</li>
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 insertBefore 单个方法
import insertBefore from '@yaohaixiao/dom.js/insertBefore'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')
const $about = DOM.getEl('.about')
const $blog = DOM.html('<li class="item blog">Blog</li>')

// 插入创建的节点
DOM.insertBefore($blog, $home)
// -> <li class="item blog">Blog</li>

// 插入引用节点
insertBefore($about, $home)
// -> <li class="item about">About</li>

Category：

DOM Insertion

insertHTMLAfterBegin() 方法用来将指定的文本解析为 Element 元素，并将结果节点插入 el 元素之前。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或 DOM 元素的选择器字符串。

str

Type：

String

（必须）str 指定希望插入的 html 字符串。

dangerouslyUseHTMLString

Type：

Boolean

Default：

true

（必须）dangerouslyUseHTMLString 指定是否将 str 文本解析为 Element 元素（默认值：true）。

注意：insertHTMLAfterBegin() 方法默认会过滤掉 str 文本中的 <script> 危险文本。

Returns

Type：

Element|null

函数返回被插入的子节点。参数不合法时返回 null。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 insertHTMLAfterBegin 单个方法
import insertHTMLAfterBegin from '@yaohaixiao/dom.js/insertHTMLAfterBegin'

const $list = DOM.byId('#list')

// 将插入 html 插入到 $list 节点前面
DOM.insertHTMLAfterBegin($list, '<ul><li id="home" class="item active">Home</li></ul>')

// 将插入 html 插入到 $list 节点前面
insertHTMLAfterBegin($list, '<ul><li class="item project">Projects</li></ul>', false)

Category：

DOM Insertion

insertHTMLAfterEnd() 方法用来将指定的文本解析为 Element 元素，并将结果节点插入 el 元素自身内部最后面。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或 DOM 元素的选择器字符串。注意，仅在 el 节点在树中且节点具有一个 parent 元素时工作。

str

Type：

String

（必须）str 指定希望插入的 html 字符串。

dangerouslyUseHTMLString

Type：

Boolean

Default：

true

（必须）dangerouslyUseHTMLString 指定是否将 str 文本解析为 Element 元素（默认值：true）。

注意：insertHTMLAfterEnd() 方法默认会过滤掉 str 文本中的 <script> 危险文本。

Returns

Type：

Element|null

函数返回被插入的子节点。参数不合法时返回 null。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 insertHTMLAfterEnd 单个方法
import insertHTMLAfterEnd from '@yaohaixiao/dom.js/insertHTMLAfterEnd'

const $list = DOM.byId('#list')

// 将插入 html 插入到 $list 节点内部最后面
DOM.insertHTMLAfterEnd($list, '<ul><li id="home" class="item active">Home</li></ul>')

// 将插入 html 插入到 $list 节点内部最后面
insertHTMLAfterEnd($list, '<ul><li class="item project">Projects</li></ul>', false)

Category：

DOM Insertion

insertHTMLBeforeBegin() 方法用来将指定的文本解析为 Element 元素，并将结果节点插入 el 元素自身内部最前面。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或 DOM 元素的选择器字符串。注意，仅在 el 节点在树中且节点具有一个 parent 元素时工作。

str

Type：

String

（必须）str 指定希望插入的 html 字符串。

dangerouslyUseHTMLString

Type：

Boolean

Default：

true

（必须）dangerouslyUseHTMLString 指定是否将 str 文本解析为 Element 元素（默认值：true）。

注意：insertHTMLBeforeBegin() 方法默认会过滤掉 str 文本中的 <script> 危险文本。

Returns

Type：

Element|null

函数返回被插入的子节点。参数不合法时返回 null。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 insertHTMLBeforeBegin 单个方法
import insertHTMLBeforeBegin from '@yaohaixiao/dom.js/insertHTMLBeforeBegin'

const $list = DOM.byId('#list')

// 将插入 html 插入到 $list 节点内部最前面
DOM.insertHTMLBeforeBegin($list, '<li id="home" class="item active">Home</li>')

// 将插入 html 插入到 $list 节点内部最前面
insertHTMLBeforeBegin($list, '<li class="item project">Projects</li>')

Category：

DOM Insertion

insertHTMLBeforeEnd() 方法用来将指定的文本解析为 Element 元素，并将结果节点插入 el 元素之后。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或 DOM 元素的选择器字符串。

str

Type：

String

（必须）str 指定希望插入的 html 字符串。

dangerouslyUseHTMLString

Type：

Boolean

Default：

true

（必须）dangerouslyUseHTMLString 指定是否将 str 文本解析为 Element 元素（默认值：true）。

注意：insertHTMLBeforeEnd() 方法默认会过滤掉 str 文本中的 <script> 危险文本。

Returns

Type：

Element|null

函数返回被插入的子节点。参数不合法时返回 null。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 insertHTMLBeforeEnd 单个方法
import insertHTMLBeforeEnd from '@yaohaixiao/dom.js/insertHTMLBeforeEnd'

const $list = DOM.byId('#list')

// 将插入 html 插入到 $list 节点后面
DOM.insertHTMLBeforeEnd($list, '<ul><li id="home" class="item active">Home</li></ul>')

// 将插入 html 插入到 $list 节点后面
insertHTMLBeforeEnd($list, '<ul><li class="item project">Projects</li></ul>', false)

Category：

DOM Insertion

append() 方法用来将指定 DOM 节点或者 html 文本解析为 DOM 元素，并将结果节点插入 el 元素自身内部的最后面。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或者字符串（HTML或者普通字符串）。

reference

Type：

String

（必须）reference 指定 DOM 节点。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 append 单个方法
import append from '@yaohaixiao/dom.js/append'

const $list = DOM.byId('#list')
const $project = DOM.html('<li class="item project">Projects</li>')

// 将插入 html 插入到 $list 节点内部的最后面
DOM.append('<li id="home" class="item active">Home</li>', $list)

// 将插入 html 插入到 $list 节点内部的最后面
append($project, $list)

// 将普通字符串插入到 $list 节点内部的最后面
append('将普通字符串插入到 $list 节点内部的最后面', $list)

Category：

DOM Insertion

prepend() 方法用来将指定 DOM 节点或者 html 文本解析为 DOM 元素，并将结果节点插入 reference 元素自身内部的最前。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或者字符串（HTML或者普通字符串）。

reference

Type：

String

（必须）reference 指定 DOM 节点。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 prepend 单个方法
import prepend from '@yaohaixiao/dom.js/prepend'

const $list = DOM.byId('#list')
const $project = DOM.html('<li class="item project">Projects</li>')

// 将插入 html 插入到 $list 节点内部的最前面
DOM.prepend('<li id="home" class="item active">Home</li>', $list)

// 将插入 html 插入到 $list 节点内部的最前面
prepend($project, $list)

// 将普通字符串插入到 $list 节点内部的最前面
prepend('将普通字符串插入到 $list 节点内部的最前面', $list)

Category：

DOM Insertion

after() 方法用来在指定 DOM 节点后添加子节点或者将 HTML 字符转化成节点添加到后面。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或者 HTML 字符。

reference

Type：

HTMLElement

（必须）reference 指定 DOM 节点。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 after 单个方法
import after from '@yaohaixiao/dom.js/after'

const $list = DOM.byId('#list')
const $menu = DOM.html('<ul><li class="item project">Projects</li></ul>')

// 将插入 html 插入到 $list 节点后面
DOM.after('<ul><li id="home" class="item active">Home</li></ul>', $list)

// 将创建的 $menu 节点插入到 $list 节点后面
after($menu, $list)

Category：

DOM Insertion

before() 方法用来在指定 DOM 节点后添加子节点或者将 HTML 字符转化成节点添加到前面。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或者 HTML 字符。

reference

Type：

HTMLElement

（必须）reference 指定 DOM 节点。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 before 单个方法
import before from '@yaohaixiao/dom.js/before'

const $list = DOM.byId('#list')
const $menu = DOM.html('<ul><li class="item project">Projects</li></ul>')

// 将插入 html 插入到 $list 节点前面
DOM.before('<ul><li id="home" class="item active">Home</li></ul>', $list)

// 将创建的 $menu 节点插入到 $list 节点前面
before($menu, $list)

Since

1.1.0

Category：

DOM Insertion

replace() 方法用来将 DOM 节点或者 HTML 字符转化成 DOM 节点，已替换指定的 DOM 节点。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要插入的 DOM 元素或者 HTML 字符。

reference

Type：

HTMLElement

（必须）reference 指定要替换的 DOM 节点。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 replace 单个方法
import replace from '@yaohaixiao/dom.js/replace'

const $list = DOM.byId('#list')
const $menu = DOM.html('<ul><li class="item project">Projects</li></ul>')

// 用 html 字符转化的 DOM 节点 替换 $list 节点
DOM.replace('<ul><li id="home" class="item active">Home</li></ul>', $list)

// 用动态创建的 $menu 节点替换 $list 节点
replace($menu, $list)

Since

1.3.1

Category：

DOM Insertion

remove() 方法用来将指定 DOM 节点从当前文档树中移除。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定要移除的 DOM 元素或者 DOM 元素的选择器字符串。

<ul id="list" class="list">
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 remove 单个方法
import remove from '@yaohaixiao/dom.js/remove'

const $list = DOM.byId('#list')

// 移除指定选择器的 DOM 元素
DOM.remove('.item')

// 移除 DOM 元素
remove($list)

Since

1.1.0

Category：

DOM Insertion

wrap() 方法用来从 DOM 中移除匹配元素集的父元素，将匹配的元素保留在它们的位置。

Parameters

collection

Type：

NodeList

（必须）collection 需要包裹的 NodeList 列表。

wrapElement

Type：

String

（必须）selector 指定去表包裹 NodeList 的 HTML 标签的 DOM 父节点：

<ul id="list" class="list">
  <li class="item">Home</li>
  <li class="item">Blog</li>
  <li class="item">Projects</li>
  <li class="item">About</li>
</ul>
<div class="wrapper"></div>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 unwrap 单个方法
import unwrap from '@yaohaixiao/dom.js/unwrap'

const $list = DOM.byId('#list')
const $items = DOM.byClass('.item', $list)

// 用 html 字符
DOM.wrap($items, '
')
// ->  <ul id="list" class="list">
//       <div class="wrap">
//         <li class="item">Home</li>
//       </div>
//       <div class="wrap">
//         <li class="item">Blog</li>
//       </div>
//       <div class="wrap">
//         <li class="item">Projects</li>
//       </div>
//       <div class="wrap">
//         <li class="item">About</li>
//       </div>
//     </ul>

// 用选择器获取 DOM 节点，实用 DOM 元素的 outerHTML 作为包裹的 HTML 标签
unwrap($items, '.wrap')
// ->  <ul id="list" class="list">
//       <li class="item">Home</li>
//       <li class="item">Blog</li>
//       <li class="item">Projects</li>
//       <li class="item">About</li>
//     </ul>

Since

1.1.0

Category：

DOM Insertion

wrap() 方法用来给 NodeList 中的每个 DOM 节点包裹上指定 HTML 标签。

Parameters

collection

Type：

NodeList

（必须）collection 需要包裹的 NodeList 列表。

wrapElement

Type：

String|HTMLElement|Function

（必须）wrapElement 指定包裹 NodeList 的 HTML 标签：

• String - 指定 HTML 标签或者用来包裹的 DOM 元素的选择器字符串；
• HTMLElement - 包裹的 DOM 元素，将实用 DOM 元素的 outerHTML 作为包裹的 HTML 标签；
• Function($node, index) - 获取包裹 HTML 标签的回调函数，可以返回 HTML 标签或者 DOM 元素：
• 参数 $node：NodeList 中的 DOM 元素；
• 参数 index：DOM 元素在 NodeList 中的索引值；

<ul id="list" class="list">
  <li class="item">Home</li>
  <li class="item">Blog</li>
  <li class="item">Projects</li>
  <li class="item">About</li>
</ul>
<div class="wrapper"></div>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 wrap 单个方法
import wrap from '@yaohaixiao/dom.js/wrap'

const $list = DOM.byId('#list')
const $items = DOM.byClass('.item', $list)

// 用 html 字符
DOM.wrap($items, '
')
// ->  <ul id="list" class="list">
//       <div class="wrap">
//         <li class="item">Home</li>
//       </div>
//       <div class="wrap">
//         <li class="item">Blog</li>
//       </div>
//       <div class="wrap">
//         <li class="item">Projects</li>
//       </div>
//       <div class="wrap">
//         <li class="item">About</li>
//       </div>
//     </ul>

// 用选择器获取 DOM 节点，实用 DOM 元素的 outerHTML 作为包裹的 HTML 标签
wrap($items, '.wrapper')
// ->  <ul id="list" class="list">
//       <div class="wrapper">
//         <li class="item">Home</li>
//       </div>
//       <div class="wrapper">
//         <li class="item">Blog</li>
//       </div>
//       <div class="wrapper">
//         <li class="item">Projects</li>
//       </div>
//       <div class="wrapper">
//         <li class="item">About</li>
//       </div>
//     </ul>

// 实用 DOM 元素或者函数返回 DOM 元素的行为和使用选择器指定 DOM 元素的行为一致
wrap($items, DOM.getEl('.wrapper'))
wrap($items, () => DOM.getEl('.wrapper'))

// 回调函数返回 HTML 标签
wrap($items, ($item, index) => { return `<div data-id="${index}" class="wrap"><div>` })
// ->  <ul id="list" class="list">
//       <div data-id="0" class="wrap">
//         <li class="item">Home</li>
//       </div>
//       <div data-id="1" class="wrap">
//         <li class="item">Blog</li>
//       </div>
//       <div data-id="2" class="wrap">
//         <li class="item">Projects</li>
//       </div>
//       <div data-id="3" class="wrap">
//         <li class="item">About</li>
//       </div>
//     </ul>

Since

1.1.0

Category：

DOM Insertion

wrapAll() 方法用来给（以组邻近的）NodeList 包裹上指定的 HTML 标签。

Parameters

collection

Type：

NodeList

（必须）collection 需要包裹的 NodeList 列表。

wrapElement

Type：

String|HTMLElement

（必须）wrapElement 指定包裹 NodeList 的 HTML 标签：

• String - 指定 HTML 标签或者用来包裹的 DOM 元素的选择器字符串；
• HTMLElement - 包裹的 DOM 元素，将实用 DOM 元素的 outerHTML 作为包裹的 HTML 标签；

<ul id="list" class="list">
  <li class="item">Home</li>
  <li class="item">Blog</li>
  <li class="item">Projects</li>
  <li class="item">About</li>
</ul>
<div class="wrapper"></div>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 wrap 单个方法
import wrapAll from '@yaohaixiao/dom.js/wrapAll'

const $list = DOM.byId('#list')
const $items = DOM.byClass('.item', $list)

// 用 html 字符
DOM.wrapAll($items, '
')
// ->  <ul id="list" class="list">
//       <div class="wrap">
//         <li class="item">Home</li>
//         <li class="item">Blog</li>
//         <li class="item">Projects</li>
//         <li class="item">About</li>
//       </div>
//     </ul>

// 用选择器获取 DOM 节点，实用 DOM 元素的 outerHTML 作为包裹的 HTML 标签
wrap($items, '.wrapper')
// ->  <ul id="list" class="list">
//       <div class="wrapper">
//         <li class="item">Home</li>
//         <li class="item">Blog</li>
//         <li class="item">Projects</li>
//         <li class="item">About</li>
//       </div>
//     </ul>

// 使用 DOM 元素和使用选择器指定 DOM 元素的行为一致
wrap($items, DOM.getEl('.wrapper'))

Since

1.1.0

Category：

DOM Insertion

wrapInner() 方法用来给 NodeList 中的每个 DOM 节点内部包裹上指定 HTML 标签。

Parameters

collection

Type：

NodeList

（必须）collection 需要包裹的 NodeList 列表。

wrapElement

Type：

String|HTMLElement|Function

（必须）wrapElement 指定包裹 NodeList 的 HTML 标签：

• String - 指定 HTML 标签或者用来包裹的 DOM 元素的选择器字符串；
• HTMLElement - 包裹的 DOM 元素，将实用 DOM 元素的 outerHTML 作为包裹的 HTML 标签；
• Function($node, index) - 获取包裹 HTML 标签的回调函数，可以返回 HTML 标签或者 DOM 元素：
• 参数 $node：NodeList 中的 DOM 元素；
• 参数 index：DOM 元素在 NodeList 中的索引值；

<ul id="list" class="list">
  <li class="item">Home</li>
  <li class="item">Blog</li>
  <li class="item">Projects</li>
  <li class="item">About</li>
</ul>
<div class="wrapper"></div>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 wrapInner 单个方法
import wrapInner from '@yaohaixiao/dom.js/wrapInner'

const $list = DOM.byId('#list')
const $items = DOM.byClass('.item', $list)

// 用 html 字符
DOM.wrapInner($items, '
')
// ->  <ul id="list" class="list">
//       <li class="item">
//         <div class="wrap">Home</div>
//       </li>
//       <li class="item">
//         <div class="wrap">Blog</div>
//       </li>
//       <li class="item">
//         <div class="wrap">Projects</div>
//       </li>
//       <li class="item">
//         <div class="wrap">About</div>
//       </li>
//     </ul>

// 用选择器获取 DOM 节点，实用 DOM 元素的 outerHTML 作为包裹的 HTML 标签
wrapInner($items, '.wrapper')
// ->  <ul id="list" class="list">
//       <li class="item">
//         <div class="wrapper">Home</div>
//       </li>
//       <li class="item">
//         <div class="wrapper">Blog</div>
//       </li>
//       <li class="item">
//         <div class="wrapper">Projects</div>
//       </li>
//       <li class="item">
//         <div class="wrapper">About</div>
//       </li>
//     </ul>

// 实用 DOM 元素或者函数返回 DOM 元素的行为和使用选择器指定 DOM 元素的行为一致
wrapInner($items, DOM.getEl('.wrapper'))
wrapInner($items, () => DOM.getEl('.wrapper'))

// 回调函数返回 HTML 标签
wrapInner($items, ($item, index) => { return `<div data-id="${index}" class="wrap"><div>` })
// ->  <ul id="list" class="list">
//       <li class="item">
//         <div data-id="0" class="wrap">Home</div>
//       </li>
//       <li class="item">
//         <div data-id="1" class="wrap">Blog</div>
//       </li>
//       <li class="item">
//         <div data-id="2" class="wrap">Projects</div>
//       </li>
//       <li class="item">
//         <div data-id="3" class="wrap">About</div>
//       </li>
//     </ul>

Category：

Position

getOffset() 方法用来获取 DOM 节点相对于窗口的 top（纵坐标）值和 left（横坐标）值以及宽度和高度。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Number

返回 offsetTop 和 offsetLeft 值。如果元素存在 offsetParent 的父节点，那么这个值会累加直到其祖先节点不再有 offsetParent。

width 和 height 则为 DOM 元素的 offsetWidth 和 offsetHeight 值。

<style>
.list {
  position: relative;
  z-index: 1;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  margin: 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getOffset 单个方法
import getOffset from '@yaohaixiao/dom.js/getOffset'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.getOffset($list)
// -> {
  top: 0,
  left: 0,
  width: 256,
  height: 64
}

getOffsetTop($home)
// -> {
  top: 0,
  left: 0,
  width: 64,
  height: 64
}

Category：

Position

getOffsetLeft() 方法用来获取 DOM 节点相对于窗口的 left（横坐标）值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Number

返回 offsetLeft 值。如果元素存在 offsetParent 的父节点，那么这个值会累加直到其祖先节点不再有 offsetParent。

<style>
.list {
  position: relative;
  z-index: 1;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getOffsetLeft 单个方法
import getOffsetLeft from '@yaohaixiao/dom.js/getOffsetLeft'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')
const $blog = DOM.getEl('.blog')
const $project = DOM.getEl('.project')

DOM.getOffsetLeft($list) // -> 0
getOffsetLeft($home) // -> 0
getOffsetLeft($blog) // -> 64
getOffsetLeft($project) // -> 128

Category：

Position

getOffsetTop() 方法用来获取 DOM 节点相对于窗口的 top（纵坐标）值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Number

返回 offsetTop 值。如果元素存在 offsetParent 的父节点，那么这个值会累加直到其祖先节点不再有 offsetParent。

<style>
.list {
  position: relative;
  z-index: 1;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  margin: 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getOffsetTop 单个方法
import getOffsetTop from '@yaohaixiao/dom.js/getOffsetTop'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')
const $blog = DOM.getEl('.blog')
const $project = DOM.getEl('.project')

DOM.getOffsetTop($list) // -> 0
getOffsetTop($home) // -> 0
getOffsetTop($blog) // -> 64
getOffsetTop($project) // -> 128

Category：

Position

getPageXY() 方法用来获取基于页面坐标获取元素的当前 X 和 Y 位置。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Number

返回 DOM 元素在当前页面的 X 和 Y 位置。

<style>
.list {
  position: relative;
  z-index: 1;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  margin: 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getPageXY 单个方法
import getPageXY from '@yaohaixiao/dom.js/getPageXY'

const $list = DOM.byId('#list')
const $project = DOM.getEl('.project')

DOM.getPageXY($list) // -> { x: 0, y: 0 }
getPageXY($project) // -> { x: 0, y: 128 }

Category：

Position

getPageX() 方法用来获取基于页面坐标获取元素的当前 X 位置。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Number

返回 DOM 元素在当前页面的 X 位置：el.getBoundingClientRect().left + getDocumentScrollLeft()。

<style>
.list {
  position: relative;
  z-index: 1;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getPageX 单个方法
import getPageX from '@yaohaixiao/dom.js/getPageX'

const $list = DOM.byId('#list')
const $project = DOM.getEl('.project')

DOM.getPageX($list) // -> 0
getPageX($project) // -> 128

Category：

Position

getPageY() 方法用来获取基于页面坐标获取元素的当前 Y 位置。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Number

返回 DOM 元素在当前页面的 Y 位置：el.getBoundingClientRect().top + getDocumentScrollTop()。

<style>
.list {
  position: relative;
  z-index: 1;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  margin: 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getPageY 单个方法
import getPageY from '@yaohaixiao/dom.js/getPageY'

const $list = DOM.byId('#list')
const $project = DOM.getEl('.project')

DOM.getPageY($list) // -> 0
getPageY($project) // -> 128

Category：

Size

getDocumentScrollLeft() 方法用来获取当前文档（窗口）滚动条的横向滚动的距离。

Parameters

doc

Type：

Document

Default：

document

（可选）doc 参数指定要获取滚动距离的文档。

Returns

Type：

Number

返回文档滚动的距离。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getDocumentScrollLeft 单个方法
import getDocumentScrollLeft from '@yaohaixiao/dom.js/getDocumentScrollLeft'

DOM.getDocumentScrollLeft() // -> 100

Category：

Size

getDocumentScrollTop() 方法用来获取当前文档（窗口）滚动条的纵向滚动的距离。

Parameters

doc

Type：

Document

Default：

document

（可选）doc 参数指定要获取滚动距离的文档。

Returns

Type：

Number

返回文档滚动的距离。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getDocumentScrollTop 单个方法
import getDocumentScrollTop from '@yaohaixiao/dom.js/getDocumentScrollTop'

DOM.getDocumentScrollTop() // -> 100

Category：

Position

getScroll() 方法用来获取 DOM 元素的滚动条横向和纵向滚动距离。

Parameters

el

Type：

HTMLElement|Window

Default：

window

（可选）el 参数指定 DOM 元素，未传递则默认为 window 对象。

Returns

Type：

Number

返回 DOM 元素的滚动条纵向滚动距离。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScroll 单个方法
import getScroll from '@yaohaixiao/dom.js/getScroll'

const $list = DOM.byId('#list')

// 指定 DOM 元素
DOM.getScroll($list) // -> { top: 0, left: 0 }

// 默认获取 window 当前窗口的滚动距离
getScroll() //-> { top: 0, left: 0 }

Category：

Position

getScrollLeft() 方法用来获取 DOM 元素的滚动条横向滚动距离。

Parameters

el

Type：

HTMLElement|Window

Default：

window

（可选）el 参数指定 DOM 元素，未传递则默认为 window 对象。

Returns

Type：

Number

返回 DOM 元素的滚动条横向滚动距离。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScrollLeft 单个方法
import getScrollLeft from '@yaohaixiao/dom.js/getScrollLeft'

const $list = DOM.byId('#list')

// 指定 DOM 元素
DOM.getScrollLeft($list) // -> 0

// 默认获取 window 当前窗口的滚动距离
getScrollLeft() // -> 0

Category：

Position

getScrollTop() 方法用来获取 DOM 元素的滚动条纵向滚动距离。

Parameters

el

Type：

HTMLElement|Window

Default：

window

（可选）el 参数指定 DOM 元素，未传递则默认为 window 对象。

Returns

Type：

Number

返回 DOM 元素的滚动条纵向滚动距离。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScrollTop 单个方法
import getScrollTop from '@yaohaixiao/dom.js/getScrollTop'

const $list = DOM.byId('#list')

// 指定 DOM 元素
DOM.getScrollTop($list) // -> 0

// 默认获取 window 当前窗口的滚动距离
getScrollTop() // -> 0

Category：

Position

getScrollTotal() 方法用来获取 DOM 元素的滚动条横向与纵向滚动距离。

Parameters

el

Type：

HTMLElement|Window

Default：

window

（可选）el 参数指定 DOM 元素，未传递则默认为 window 对象。

Returns

Type：

Number

返回 DOM 元素的滚动条纵向滚动距离。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScrollTotal 单个方法
import getScrollTotal from '@yaohaixiao/dom.js/getScrollTotal'

const $list = DOM.byId('#list')

// 指定 DOM 元素
DOM.getScrollTotal($list) // -> { top: 0, left: 0 }

// 默认获取 window 当前窗口的滚动距离
getScrollTotal() // -> { top: 0, left: 0 }

Category：

Position

getScrollTotalLeft() 方法用来获取 DOM 节点预期所有父节点的横向滚动距离。

Parameters

el

Type：

HTMLElement|Window

Default：

window

（可选）el 参数指定 DOM 元素，未传递则默认为 window 对象。

Returns

Type：

Number

返回 DOM 元素的滚动条横向滚动距离。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScrollTotalLeft 单个方法
import getScrollTotalLeft from '@yaohaixiao/dom.js/getScrollTotalLeft'

const $list = DOM.byId('#list')

// 指定 DOM 元素
DOM.getScrollTotalLeft($list) // -> 0

// 默认获取 window 当前窗口的滚动距离
getScrollTotalLeft() // -> 0

Category：

Position

getScrollTotalTop() 方法用来获取 DOM 节点预期所有父节点的纵向滚动距离。

Parameters

el

Type：

HTMLElement|Window

Default：

window

（可选）el 参数指定 DOM 元素，未传递则默认为 window 对象。

Returns

Type：

Number

返回 DOM 元素的滚动条纵向滚动距离。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScrollTotalTop 单个方法
import getScrollTotalTop from '@yaohaixiao/dom.js/getScrollTotalTop'

const $list = DOM.byId('#list')

// 指定 DOM 元素
DOM.getScrollTotalTop($list) // -> 0

// 默认获取 window 当前窗口的滚动距离
getScrollTotalTop() // -> 0

Category：

Position

Alias：

getOffset

offset() 方法用来获取 DOM 节点相对于窗口的 top（纵坐标）值和 left（横坐标）值以及宽度和高度。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Number

返回 offsetTop 和 offsetLeft 值。如果元素存在 offsetParent 的父节点，那么这个值会累加直到其祖先节点不再有 offsetParent。

width 和 height 则为 DOM 元素的 offsetWidth 和 offsetHeight 值。

<style>
.list {
  position: relative;
  z-index: 1;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  margin: 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 offset 单个方法
import offset from '@yaohaixiao/dom.js/offset'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.offset($list)
// -> {
  top: 0,
  left: 0,
  width: 256,
  height: 64
}

offset($home)
// -> {
  top: 0,
  left: 0,
  width: 64,
  height: 64
}

Category：

Position

positions() 方法用来获取 DOM 节点的定位信息。当 DOM 元素不可见或不再当前文档中，则返回 false。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

Returns

Type：

Object|Boolean

返回 DOM 节点的定位信息。当 DOM 元素不可见或不再当前文档中，则返回 false。

<style>
.list {
  position: relative;
  z-index: 1;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  margin: 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 positions 单个方法
import positions from '@yaohaixiao/dom.js/positions'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.positions($list)
// -> {
  top: 0,
  left: 0,
  x: 0,
  y: 0
}

positions($home)
// -> {
  top: 0,
  left: 0,
  x: 0,
  y: 64
}

Category：

Position

scrollTo() 法用来将 DOM 节点滚动到指定位置。

Parameters

el

Type：

HTMLElement|String

（必须）el 参数指定 DOM 元素获取选择器字符串。

position

Type：

Number

（必须）position 参数指定 DOM 元素滚动的位置。

direction

Type：

String

Type：

'vertical'

（可选）direction 参数指定 DOM 元素滚动的方向：

• vertical: （默认值）纵向滚动；
• horizontal: 横向滚动；

afterStop

Type：

Function

（可选）afterStop 参数指定 DOM 元素滚动到指定的位置后，执行的回调函数。

<style>
.list {
  position: relative;
  z-index: 1;
  height: 128px;
  overflow: auto;
}
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.item {
  margin: 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 scrollTo 单个方法
import scrollTo from '@yaohaixiao/dom.js/scrollTo'

const $list = DOM.byId('#list')

DOM.scrollTo($list, 64)
DOM.getScrollTop($list) // -> 64

scrollTo($list, 128, (pos) => {
  console.log('position:', pos) // -> 128
})

Since

1.4.0

Category：

Platform Detection

isBrowser() 方法用来检测当前运行环境是否为浏览器环境。

Returns

Type：

Boolean

返回检测结果。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isBrowser 单个方法
import isBrowser from '@yaohaixiao/dom.js/isBrowser'

// 浏览器中运行
DOM.isBrowser() // -> true

// Node 环境中运行
isBrowser() // -> false

Since

1.5.0

Category：

Platform Detection

isDeno() 方法用来检测当前运行环境是否为 Deno 环境。

Returns

Type：

Boolean

返回检测结果。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isDeno 单个方法
import isDeno from '@yaohaixiao/dom.js/isDeno'

// 浏览器中运行
DOM.isDeno() // -> false

// Node 环境中运行
isDeno() // -> false

// Deno 环境中运行
isDeno() // -> true

Since

1.5.0

Category：

Platform Detection

isNodeJs() 方法用来检测当前运行环境是否为浏览器环境。

Returns

Type：

Boolean

返回检测结果。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isNodeJs 单个方法
import isNodeJs from '@yaohaixiao/dom.js/isNodeJs'

// 浏览器中运行
DOM.isNodeJs() // -> false

// Node 环境中运行
isNodeJs() // -> true

// Deno 环境中运行
isNodeJs() // -> false

Since

1.5.0

Category：

Platform Detection

isMobile() 方法用来检测当前运行设备是否为移动设备。

Returns

Type：

Boolean

返回检测结果。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isMobile 单个方法
import isMobile from '@yaohaixiao/dom.js/isMobile'

// PC 浏览器中运行
DOM.isMobile() // -> false

// iPhone 等移动设备运行
isMobile() // -> true

Since

1.5.0

Category：

Platform Detection

isWebKit() 方法用来检测当前浏览器内核是否为 WebKit 内核。

Returns

Type：

Boolean

返回检测结果。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 isWebKit 单个方法
import isWebKit from '@yaohaixiao/dom.js/isWebKit'

// Chrome/Opera/Edge 等 webkit 内核浏览器中运行
DOM.isWebKit() // -> true

// Firefox或者IE等非 webkit 内核浏览器中运行
isWebKit() // -> false

Since

1.5.0

Category：

Platform Detection

browser() 方法用来检测浏览器信息，返回浏览器名称和版本信息。

Returns

Type：

Object

返回检测结果，浏览器名称合版本信息。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 browser 单个方法
import browser from '@yaohaixiao/dom.js/browser'

// Chrome 浏览器中运行
DOM.browser() // -> {name: 'Chrome', major: 119, version: '119.0.0.0'}

// Edge 浏览器中运行
browser() // -> {name: 'Edge', major: 119, version: '119.0.0.0'}

// Firefox 浏览器中运行
browser() // -> { name: "Firefox", major: 120, version: "120.0" }

// Opera
browser() // -> {name: 'Opera', major: 105, version: '105.0.0.0'}

Since

1.5.0

Category：

Platform Detection

os() 方法用来检测当前操作系统信息，返回操作名称合版本信息。

Returns

Type：

Object

返回检测结果，操作系统名称合版本信息。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 os 单个方法
import os from '@yaohaixiao/dom.js/os'

// Windows 系统浏览器中运行
DOM.os() // -> {name: 'Windows', version: '10'}

// Android 系统浏览器中运行
browser() // -> {name: 'Android', version: '7.1.1'}

// ios 系统浏览器中运行
browser() // -> {name: 'iOS', version: '16.6.0'}

Since

1.4.0

Category：

Load Resources

injectCSS() 方法用来向当前文档动态插入 style 标签，以批量添加样式。返回动态创建的 style 标签节点。

Parameters

cssRules

Type：

String

（必须）cssRules 参数指定需要动态添加的 CSS 样式规则字符串。

media

Type：

String

（可选）media 参数指定 CSS 样式适用的媒体信息。

media

Type：

String

（可选）charset 参数指定 CSS 样式的字符集。

Returns

Type：

HTMLElement

返回动态创建的 style 标签节点。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 injectCSS 单个方法
import injectCSS from '@yaohaixiao/dom.js/injectCSS'

const rules = 'body {background-color: #f00;}'

DOM.injectCSS(rules)
// -> <style type="text/css">body{background-color:#f00;}</style>

injectCSS(rules, 'print', 'utf-8')
// -> <style media="print" type="text/css">
//       @charset "utf-8";body{background-color:#f00;}
//    </style>

Since

1.7.0

Category：

Load Resources

loadCSS() 方法用来动态向页面中添加外部 css 样式文件。返回 Promise 对象。css 文件加载成功，执行 Promise.resolve()，加载失败则执行 Promise.reject()。

Parameters

cssURL

Type：

String

（必须）cssURL 参数指定外部 css 文件的 URL 地址。

media

Type：

String

（可选）media 参数指定 CSS 样式适用的媒体信息。

Returns

Type：

Promise

返回 Promise 对象。

Usage

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 loadCSS 单个方法
import loadCSS from '@yaohaixiao/dom.js/loadCSS'

DOM.loadCSS('path/to/exist.css', 'print').then(($link) => {
  // css 文件加载成功后的相关逻辑
  // $link 是创建的 link 标签 DOM 元素
  console.log($link)
})

loadCSS('path/to/not-exist.css').then(() => {
  // css 文件加载成功后的相关逻辑
)).catch((err) => {
  // css 文件加载失败后的相关逻辑
})

Since

1.7.0

Category：

Load Resources

loadScript() 方法用来动态向页面中添加外部 js 样式文件。返回 Promise 对象。js 文件加载成功，执行 Promise.resolve()，加载失败则执行 Promise.reject()。

Parameters

jsURL

Type：

String

（必须）jsURL 参数指定外部 js 文件的 URL 地址。

jsURL

Type：

String

（可选）charset 参数指定外部 js 文件字符集编码。

Returns

Type：

Promise

返回 Promise 对象。

Usage

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 loadScript 单个方法
import loadScript from '@yaohaixiao/dom.js/loadScript'

DOM.loadScript('path/to/exist.js').then(($script) => {
  // js 文件加载成功后的相关逻辑
  // $script 是创建的 script 标签 DOM 元素
  console.log($script)
})

loadScript('path/to/not-exist.js').then(() => {
  // js 文件加载成功后的相关逻辑
)).catch((err) => {
  // js 文件加载失败后的相关逻辑
})

Since

1.7.0

Category：

Load Resources

dnsPrefetch() 方法用来尝试在请求（第三方）资源之前预解析域名。用以优化加载解析第三方资源的性能。

Parameters

domain

Type：

String

（必须）domain 参数指定（第三方）域名。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 dnsPrefetch 单个方法
import dnsPrefetch from '@yaohaixiao/dom.js/dnsPrefetch'

// 在开始需要加载 github 和 google 站点的资源前先预解析两个站点的域名
DOM.dnsPrefetch('//github.com')
dnsPrefetch('https://fonts.google.com')

Since

1.7.0

Category：

Load Resources

prefetch() 方法用来链接预取（重要）资源。（可以根据用户数据分析）预取用户稍后会用到的（重要）资源（通常是 js 或者 css 文件），以优化前端性能。

Parameters

url

Type：

String

（必须）url 参数指定需要预加载的资源文件的 URL 地址。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 prefetch 单个方法
import prefetch from '@yaohaixiao/dom.js/prefetch'

DOM.prefetch('/app/style.css')
prefetch('/app/app.js')

Since

1.7.0

Category：

Load Resources

preload() 方法用来链接预加载所有用户都会使用的（重要）资源。（可以根据用户数据分析）预加载公共的资源文件，以优化前端性能。

Parameters

url

Type：

String

（必须）url 参数指定需要预加载的资源文件的 URL 地址。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 preload 单个方法
import preload from '@yaohaixiao/dom.js/preload'

DOM.preload('/app/style.css', {
  as: 'style'
})

DOM.preload('/app/img.jpg', {
  as: 'image'
  type: 'image/jpeg'
})

DOM.dnsPrefetch('//www.google-analytics.com/')

// 跨域加载资源
preload('https://www.google-analytics.com/analytics.js', {
  as: 'script',
  crossorigin: 'anonymous'
})

Category：

Selecting Siblings

getNextSibling() 方法用来获取 DOM 元素的下一个邻居元素节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

Returns

Type：

HTMLElement|Text

返回 el 元素的下一个邻居元素节点。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getNextSibling 单个方法
import getNextSibling from '@yaohaixiao/dom.js/getNextSibling'

const $section = DOM.byClass('.section')

// 获取 HTMLElement 邻居节点
DOM.next($section) // -> <ul id="list" class="list">

// 获取 Text 文本邻居节点
const $text = next($section, false) // -> '文本内容'

// el 参数是 Text 文本节点类型
next($text) // -> <ul id="list" class="list">

Category：

Selecting Siblings

getNextSiblingBy() 方法用来通过过滤器获取 DOM 元素匹配的后面的邻居元素节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

filter

Type：

Function|String

（必须）filter 参数指定用于过滤的回调函数或者选择器字符串。

Returns

Type：

HTMLElement|Text

返回 el 元素的下一个邻居元素节点。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getNextSiblingBy 单个方法
import getNextSiblingBy from '@yaohaixiao/dom.js/getNextSiblingBy'

const $section = DOM.byClass('.section')
const $home = DOM.byId('#home')

// filter 参数是选择器字符串，获取 HTMLElement 元素
DOM.getNextSiblingBy($section, '.item') // -> <ul id="list" class="list">

// 获取 Text 类型的邻居节点
getNextSiblingBy($section, (el) => {
   return DOM.isText(el)
})
// -> '文本内容'

// filter 参数是过滤函数，获取 HTMLElement 元素
getNextSiblingBy($home, (el) => {
  return DOM.hasClass(el, 'about')
})
// -> <li class="item about">About</li>

Category：

Selecting Siblings

getNextSiblings() 方法用来获取 DOM 元素的后面所有邻居元素节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

isElementSibling

Type：

Boolean

Default：

true

（可选）isElementSibling 参数指定是否仅获取 HTMLElement 元素节点，默认值：true。

Returns

Type：

HTMLElement

返回 DOM 元素的后面所有邻居元素节点的数组，如果没有则返回空数组。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getNextSiblings 单个方法
import getNextSiblings from '@yaohaixiao/dom.js/getNextSiblings'

const $section = DOM.byClass('.section')
const $home = DOM.byId('#home')

// 仅获取 HTMLElement 类型邻居节点
DOM.getNextSiblings($section) // ->[ <ul id="list" class="list"> ]
getNextSiblings($home)
// -> [
//   <li class="item blog">Blog</li>,
//   <li class="item">Projects</li>,
//   <li class="item">About</li>
// ]

// 获取 HTMLElement 和 Text 类型邻居节点
DOM.getNextSiblings($section， false)
// ->[
//     '文本内容'
//     <ul id="list" class="list">
//   ]

Category：

Selecting Siblings

getPreviousSibling() 方法用来获取 DOM 元素的前一个邻居 HTMLElement 或者文本节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

isElementSibling

Type：

Boolean

Default：

true

（可选）isElementSibling 参数指定是否仅获取 HTMLElement 元素节点，默认值：true。

Returns

Type：

HTMLElement|Text

返回 DOM 元素的前一个邻居节点。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getPreviousSibling 单个方法
import getPreviousSibling from '@yaohaixiao/dom.js/getPreviousSibling'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')
const $blog = DOM.getEl('.blog')

DOM.getPreviousSibling($list) // -> <div class="section">Section Content</div>
getPreviousSibling($list, false) // -> '文本内容'
getPreviousSibling($blog) // -> <li id="home" class="item active">Home</li>

Category：

Selecting Siblings

getPreviousSiblingBy() 方法用来通过过滤器获取 DOM 元素匹配的前面的邻居 HTMLElement 或者文本节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

filter

Type：

Function|String

（必须）filter 参数指定用于过滤的回调函数或者选择器字符串。

Returns

Type：

HTMLElement|Text

返回 DOM 元素的下一个邻居节点。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li id="about" class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getPreviousSiblingBy 单个方法
import getPreviousSiblingBy from '@yaohaixiao/dom.js/getPreviousSiblingBy'

const $list = DOM.byId('#list')
const $about = DOM.byId('#home')

DOM.getPreviousSiblingBy($about, '.item.about') // -> <li id="home" class="item active">Home</li>
getPreviousSiblingBy($about, (el) => {
  return DOM.hasClass(el, 'blog')
})
// -> <li class="item blog">Blog</li>

// 获取文本节点类型的邻居节点
const $text = getPreviousSiblingBy($about, (el) => {
   return DOM.isText(el)
})
// -> '文本内容'

getPreviousSiblingBy($text, '.section') // -> <div class="section">Section Content</div>

Category：

Selecting Siblings

getPreviousSiblings() 方法用来获取 DOM 元素的前面所有邻居元素节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

isElementSibling

Type：

Boolean

Default：

true

（可选）isElementSibling 参数指定是否仅获取 HTMLElement 元素节点，默认值：true。

Returns

Type：

HTMLElement|Text

返回 DOM 元素的前面所有邻居节点的数组，如果没有则返回空数组。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getPreviousSiblings 单个方法
import getPreviousSiblings from '@yaohaixiao/dom.js/getPreviousSiblings'

const $list = DOM.byId('#list')
const $about = DOM.getEl('.about')

// 仅获取 HTMLElement 邻居节点
DOM.getPreviousSiblings($list)
// ->[
//   <div class="section">Section Content</div>
// ]

// 仅获取 HTMLElement 和节点邻居节点
DOM.getPreviousSiblings($list)
// ->[
//   '文本内容',
//   <div class="section">Section Content</div>
// ]

getPreviousSiblings($about)
// -> [
//   <li class="item">Projects</li>,
//   <li class="item blog">Blog</li>,
//   <li id="home" class="item active">Home</li>
// ]

Category：

Selecting Siblings

getSiblings() 方法用来获取 DOM 元素的前面或后面所有邻居元素节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

includeSelf

Type：

Boolean

（可选）includeSelf 参数指定是否包含 DOM 元素本身。

isElementSibling

Type：

Boolean

Default：

true

（可选）isElementSibling 参数指定是否仅获取 HTMLElement 元素节点，默认值：true。

Returns

Type：

Array

返回 DOM 元素的前面或后面所有邻居元素节点的数组，如果没有则返回空数组。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getSiblings 单个方法
import getSiblings from '@yaohaixiao/dom.js/getSiblings'

const $section = DOM.byClass('.section')
const $about = DOM.getEl('.about')

// 获取所有类型的邻居节点，包括自己
DOM.getSiblings($section, true, false)
// ->[
//     <div class="section">Section Content</div>
//     '文本内容'
//     <ul id="list" class="list">
//   ]

// 获取所有 HTMLElement 邻居节点，不包括自己
DOM.getSiblings($about)
// -> [
//   <li class="item">Projects</li>,
//   <li class="item blog">Blog</li>,
//   <li id="home" class="item active">Home</li>
// ]

// 获取所有 HTMLElement 邻居节点，包括自己
getPrevSiblings($about, true)
// -> [
//   <li class="item">Projects</li>,
//   <li class="item blog">Blog</li>,
//   <li id="home" class="item active">Home</li>,
//   <li class="item about">About</li>
// ]

Category：

Selecting Siblings

Alias：

getNextSibling

next() 方法用来获取 DOM 元素的下一个邻居元素节点。

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

Returns

Type：

HTMLElement

返回 DOM 元素的下一个邻居元素节点。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 next 单个方法
import next from '@yaohaixiao/dom.js/next'

const $section = DOM.byClass('.section')

// 获取 HTMLElement 邻居节点
DOM.next($section) // -> <ul id="list" class="list">

// 获取 Text 文本邻居节点
const $text = next($section, false) // -> '文本内容'

// el 参数是 Text 文本节点类型
next($text) // -> <ul id="list" class="list">

Category：

Selecting Siblings

Alias：

getNextSiblingBy

nextBy() 方法用来通过过滤器获取 DOM 元素匹配的后面的邻居元素节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

filter

Type：

Function|String

（必须）filter 参数指定用于过滤的回调函数或者选择器字符串。

Returns

Type：

HTMLElement|Text

返回 el 元素的下一个邻居元素节点。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 nextBy 单个方法
import nextBy from '@yaohaixiao/dom.js/nextBy'

const $section = DOM.byClass('.section')
const $home = DOM.byId('#home')

// filter 参数是选择器字符串，获取 HTMLElement 元素
DOM.nextBy($section, '.item') // -> <ul id="list" class="list">

// 获取 Text 类型的邻居节点
nextBy($section, (el) => {
   return DOM.isText(el)
})
// -> '文本内容'

// filter 参数是过滤函数，获取 HTMLElement 元素
nextBy($home, (el) => {
  return DOM.hasClass(el, 'about')
})
// -> <li class="item about">About</li>

Category：

Selecting Siblings

Alias：

getNextSiblings

nextAll() 方法用来获取 DOM 元素的后面所有邻居元素节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

isElementSibling

Type：

Boolean

Default：

true

（可选）isElementSibling 参数指定是否仅获取 HTMLElement 元素节点，默认值：true。

Returns

Type：

HTMLElement

返回 DOM 元素的后面所有邻居元素节点的数组，如果没有则返回空数组。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 nextAll 单个方法
import nextAll from '@yaohaixiao/dom.js/nextAll'

const $section = DOM.byClass('.section')
const $home = DOM.byId('#home')

// 仅获取 HTMLElement 类型邻居节点
DOM.getNextSiblings($section) // ->[ <ul id="list" class="list"> ]
getNextSiblings($home)
// -> [
//   <li class="item blog">Blog</li>,
//   <li class="item">Projects</li>,
//   <li class="item">About</li>
// ]

// 获取 HTMLElement 和 Text 类型邻居节点
DOM.getNextSiblings($section， false)
// ->[
//     '文本内容'
//     <ul id="list" class="list">
//   ]

Category：

Selecting Siblings

Alias：

getPrevSibling

prev() 方法用来获取 DOM 元素的前一个邻居元素节点。

Parameters

el

Type：

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

isElementSibling

Type：

Boolean

Default：

true

（可选）isElementSibling 参数指定是否仅获取 HTMLElement 元素节点，默认值：true。

Returns

Type：

HTMLElement|Text

返回 DOM 元素的前一个邻居节点。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 prev 单个方法
import prev from '@yaohaixiao/dom.js/prev'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')
const $blog = DOM.getEl('.blog')

DOM.prev($list) // -> <div class="section">Section Content</div>
prev($list, false) // -> '文本内容'
prev($blog) // -> <li id="home" class="item active">Home</li>

Category：

Selecting Siblings

Alias：

getPreviousSibling

prevBy() 方法用来通过过滤器获取 DOM 元素匹配的前面的邻居 HTMLElement 或者文本节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

filter

Type：

Function|String

（必须）filter 参数指定用于过滤的回调函数或者选择器字符串。

Returns

Type：

HTMLElement|Text

返回 DOM 元素的下一个邻居节点。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li id="about" class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 prevBy 单个方法
import prevBy from '@yaohaixiao/dom.js/prevBy'

const $list = DOM.byId('#list')
const $about = DOM.byId('#home')

DOM.prevBy($about, '.item.about') // -> <li id="home" class="item active">Home</li>
prevBy($about, (el) => {
  return DOM.hasClass(el, 'blog')
})
// -> <li class="item blog">Blog</li>

// 获取文本节点类型的邻居节点
const $text = prevBy($about, (el) => {
   return DOM.isText(el)
})
// -> '文本内容'

prevBy($text, '.section') // -> <div class="section">Section Content</div>

Category：

Selecting Siblings

Alias：

getPrevSiblings

prevAll() 方法用来获取 DOM 元素的前面所有邻居 HTMLElement 或者文本节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

isElementSibling

Type：

Boolean

Default：

true

（可选）isElementSibling 参数指定是否仅获取 HTMLElement 元素节点，默认值：true。

Returns

Type：

HTMLElement|Text

返回 DOM 元素的前面所有邻居节点的数组，如果没有则返回空数组。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 prevAll 单个方法
import prevAll from '@yaohaixiao/dom.js/prevAll'

const $list = DOM.byId('#list')
const $about = DOM.getEl('.about')

// 仅获取 HTMLElement 邻居节点
DOM.prevAll($list)
// ->[
//   <div class="section">Section Content</div>
// ]

// 仅获取 HTMLElement 和节点邻居节点
DOM.prevAll($list)
// ->[
//   '文本内容',
//   <div class="section">Section Content</div>
// ]

prevAll($about)
// -> [
//   <li class="item">Projects</li>,
//   <li class="item blog">Blog</li>,
//   <li id="home" class="item active">Home</li>
// ]

Category：

Selecting Siblings

Alias：

getSiblings

siblings() 方法用来获取 DOM 元素的前面或后面所有邻居元素节点。

Parameters

el

Type：

HTMLElement|Text

（必须）el 参数指定 DOM 元素(HTMLElement 或者 Text 类型)。

includeSelf

Type：

Boolean

Default：

false

（可选）includeSelf 参数指定是否包含 DOM 元素本身。

isElementSibling

Type：

Boolean

Default：

true

（可选）isElementSibling 参数指定是否仅获取 HTMLElement 元素节点，默认值：true。

Returns

Type：

Array

返回 DOM 元素的前面或后面所有邻居元素节点的数组，如果没有则返回空数组。

<div class="section">Section Content</div>
文本内容
<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item about">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 siblings 单个方法
import siblings from '@yaohaixiao/dom.js/siblings'

const $section = DOM.byClass('.section')
const $about = DOM.getEl('.about')

// 获取所有类型的邻居节点，包括自己
DOM.siblings($section, true, false)
// ->[
//     <div class="section">Section Content</div>
//     '文本内容'
//     <ul id="list" class="list">
//   ]

// 获取所有 HTMLElement 邻居节点，不包括自己
DOM.siblings($about)
// -> [
//   <li class="item">Projects</li>,
//   <li class="item blog">Blog</li>,
//   <li id="home" class="item active">Home</li>
// ]

// 获取所有 HTMLElement 邻居节点，包括自己
siblings($about, true)
// -> [
//   <li class="item">Projects</li>,
//   <li class="item blog">Blog</li>,
//   <li id="home" class="item active">Home</li>,
//   <li class="item about">About</li>
// ]

Category：

Size

getDocumentHeight() 方法用来获取当前页面（滚动条）的高度。

Returns

Type：

Number

返回文档的高度值。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getDocumentHeight 单个方法
import getDocumentHeight from '@yaohaixiao/dom.js/getDocumentHeight'

DOM.getDocumentHeight() // -> 800

Category：

Size

getDocumentWidth() 方法用来获取当前页面（滚动条）的宽度。

Returns

Type：

Number

返回文档的宽度值。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getDocumentWidth 单个方法
import getDocumentWidth from '@yaohaixiao/dom.js/getDocumentWidth'

DOM.getDocumentWidth() // -> 800

Category：

Size

getViewportHeight() 方法用来获取当前窗口视口高度。

Returns

Type：

Number

返回窗口视口的高度值。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getViewportHeight 单个方法
import getViewportHeight from '@yaohaixiao/dom.js/getViewportHeight'

DOM.getViewportHeight() // -> 600

Category：

Size

getViewportWidth() 方法用来获取当前窗口视口宽度。

Returns

Type：

Number

返回窗口视口的宽度值。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getViewportWidth 单个方法
import getViewportWidth from '@yaohaixiao/dom.js/getViewportWidth'

DOM.getViewportWidth() // -> 1280

Since

1.4.0

Category：

Base

getScreenHeight() 方法用来获取显示器屏幕分辨率高度。

Returns

Type：

Number

返回显示器屏幕分辨率高度。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScreenHeight 单个方法
import getScreenHeight from '@yaohaixiao/dom.js/getScreenHeight'

DOM.getScreenHeight() // -> 1080
getScreenHeight() // -> 1080

Since

1.4.0

Category：

Base

getScreenWidth() 方法用来获取显示器屏幕分辨率宽度。

Returns

Type：

Number

返回显示器屏幕分辨率宽度。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScreenWidth 单个方法
import getScreenWidth from '@yaohaixiao/dom.js/getScreenWidth'

DOM.getScreenWidth() // -> 1920
getScreenWidth() // -> 1920

Since

1.4.0

Category：

Base

getScrollbarWidth(el) 方法用来获取当前窗口或者 DOM 元素纵向滚动条的宽度。

Parameters

el

Type：

HTMLElement

（可选）el 参数指定 DOM 元素，默认值：window。

Returns

Type：

Number

返回纵向滚动条的宽度。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getScrollbarWidth 单个方法
import getScrollbarWidth from '@yaohaixiao/dom.js/getScrollbarWidth'

const $list = DOM.byId('#list')

// 默认的窗口滚动条宽度
DOM.getScrollbarWidth() // -> 17

// 使用 CSS 美化有的滚动条宽度
getScrollbarWidth($list) // -> 7

Category：

Size

innerHeight() 方法用来获取或设置 DOM 元素的 innerHeight 值；innerHeight = style.height + padding 高度（paddingTop + paddingBottom）。

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

val

Type：

Number|String|Function

（可选）val 参数指定 DOM 元素的 innerHeight 高度或者获取 innerHeight 高度的处理函数。

Returns

Type：

Number

返回窗口视口的高度值。

<style>
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 innerHeight 单个方法
import innerHeight from '@yaohaixiao/dom.js/innerHeight'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.innerHeight($list) // => 64
DOM.innerHeight($home) // => 60

innerHeight($home, 50)
DOM.getStyle($home, 'height') // => '30px'

// 使用回到函数获取自定义计算的 innerHeight 高度
innerHeight($home, (el, sizes) => {
  return sizes.offsetHeight - (sizes.borderTop + sizes.borderBottom + sizes.paddingTop + sizes.paddingBottom)
})
// -> 40

Category：

Size

innerWidth() 方法用来获取或设置 DOM 元素的 innerWidth 值；innerWidth = style.height + padding 宽度（paddingRight + paddingLeft）。

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

val

Type：

Number|Function

（可选）val 参数指定 DOM 元素的 innerWidth 高度或者获取 innerWidth 高度的处理函数。

Returns

Type：

Number

返回窗口视口的高度值。

<style>
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  width: 40px;
  height: 40px;
  border: 2px;
  padding: 10px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 innerWidth 单个方法
import innerWidth from '@yaohaixiao/dom.js/innerWidth'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.innerWidth($list) // => 248
DOM.innerWidth($home) // => 60

innerWidth($home, 50)
DOM.getStyle($home, 'width') // => '30px'

// 使用回到函数获取自定义计算的 innerHeight 高度
innerWidth($home, (el, sizes) => {
  return sizes.offsetWidth - (sizes.borderRight + sizes.borderLeft + sizes.paddingRight + sizes.paddingLeft)
})
// -> 40

Category：

Size

outerHeight() 方法用来获取或设置 DOM 元素的 outerHeight 值：

• 默认（不包含边距）：outerHeight = style.height + border 高度（borderTop + borderBottom）+ padding 高度（paddingTop + paddingBottom）;
• 包含边距：outerHeight = style.height + margin 高度（marginTop + marginBottom） + border 高度（borderTop + borderBottom）+ padding 高度（paddingTop + paddingBottom）;

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

val

Type：

Number|String|Function|Boolean

（可选）val 参数指定 DOM 元素的 outerHeight 高度或者获取 outerHeight 高度的处理函数。

includeMargin

Type：

Boolean

（可选）指定 outerHeight 高度是否包含边距高度。

Returns

Type：

Number

返回窗口视口的高度值。

<style>
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  margin: 5px 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 outerHeight 单个方法
import outerHeight from '@yaohaixiao/dom.js/outerHeight'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.outerHeight($list) // => 64
DOM.outerHeight($home, true) // => 74
DOM.outerHeight($home) // => 64

outerHeight($home, 70)
DOM.getStyle($home, 'height') // => '46px'

Category：

Size

outerWidth() 方法用来获取或设置 DOM 元素的 outerWidth 值：

• 默认（不包含边距）：outerWidth = style.width + border 宽度（borderRight + borderLeft）+ padding 宽度（paddingRight + paddingLeft）;
• 包含边距：outerWidth = style.width + margin 宽度（marginRight + marginLeft） + border 宽度（borderRight + borderLeft）+ padding 宽度（paddingRight + paddingLeft）;

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

val

Type：

Number|String|Function|Boolean

（可选）val 参数指定 DOM 元素的 outerWidth 高度或者获取 outerWidth 宽度的处理函数。

includeMargin

Type：

Boolean

（可选）指定 outerWidth 宽度是否包含边距宽度。

Returns

Type：

Number

返回窗口视口的高度值。

<style>
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  margin: 5px 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 outerWidth 单个方法
import outerWidth from '@yaohaixiao/dom.js/outerWidth'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.outerWidth($list) // => 248
DOM.outerWidth($home, true) // => 74
DOM.outerWidth($home) // => 64

outerWidth($home, 70)
DOM.getStyle($home, 'width') // => '46px'

Category：

Size

height() 方法用来获取或设置 DOM 元素的高度。

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

val

Type：

Number|String

（可选）val 参数指定高度值。

Returns

Type：

Number

返回 DOM 元素的高度值。

<style>
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 height 单个方法
import height from '@yaohaixiao/dom.js/height'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.height($list) // => 64
height($home) // => 64

height($home, 50)
DOM.getStyle($home, 'height') // -> '50px'
DOM.getOffsetHeight($home) // -> 74

Category：

Size

width() 方法用来获取或设置 DOM 元素的宽度。

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

val

Type：

Number|String

（可选）val 参数指定宽度值。

Returns

Type：

Number

返回 DOM 元素的宽度值。

<style>
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 width 单个方法
import width from '@yaohaixiao/dom.js/width'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.width($list) // => 256
width($home) // => 64

width($home, 50)
DOM.getStyle($home, 'width') // -> '50px'
DOM.getOffsetWidth($home) // -> 74

Category：

Size

sizes() 方法用来获取DOM 元素的尺寸信息，数据格式如下：

{
  offsetHeight: 210,
  offsetWidth: 1625,
  innerHeight: 210,
  innerWidth": 1625,
  outerHeight: 210,
  outerWidth: 1625,
  margin: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  border: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  padding: {
    top: 70,
    right: 0,
    bottom: 0,
    left: 0
  },
  rect: {
    x: 274,
    y: 14,
    width: 1625,
    height: 210,
    top: 14,
    right: 1899,
    bottom: 224,
    left: 274
  }
}

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

Returns

Type：

Object

返回 DOM 元素相关的尺寸信息。

<style>
.list,
.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.item {
  float: left;
  margin: 5px 0;
  border: 2px;
  padding: 10px;
  height: 40px;
  overflow: hidden;
}
</style>

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 sizes 单个方法
import sizes from '@yaohaixiao/dom.js/sizes'

const $list = DOM.byId('#list')
const $home = DOM.byId('#home')

DOM.sizes($list)
sizes($home)

Description

Category：

Style

getStyle() 用来获取 DOM 元素的某个 CSS 样式值。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

attr

Type：

String

（必须）指定 CSS 属性名称。

Returns

Type：

String

返回指定的 attr 的属性值。

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 setStyle 单个方法
import setStyle from '@yaohaixiao/dom.js/setStyle'

const $list = DOM.byId('#list')

DOM.setStyle($list, 'display', 'none')
DOM.setStyle($list, 'display', 'block')

setStyle($list, 'background-color', '#f2f2f2')

DOM.getStyle($list, 'background-color') // -> '#f2f2f2'
getStyle($list, 'display') // -> 'block'

Category：

Style

setStyle() 方法用来给 DOM 元素添加 CSS 样式。

Parameters

el

Type：

HTMLElement

（必须）主题名称。

attr

Type：

String

（必须）属性名称。

val

Type：

String

（必须）属性值。

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 addClass 单个方法
import setStyle from '@yaohaixiao/dom.js/setStyle'

const $list = DOM.byId('#list')

DOM.setStyle($list, 'display', 'none')
DOM.setStyle($list, 'display', 'block')

setStyle($list, 'background-color', '#f2f2f2')

Category：

Style

getStyles() 方法用来获取 DOM 元素 attrs 数组中指定的多个 CSS 样式值。

Parameters

el

Type：

HTMLElement

（可选）options 中的属性名称或者要配置的 attrs 信息。

attrs

Type：

Array

（可选）要获取的 CSS 样式的名称数组

• 不传递任何参数：返回完整的 attrs 配置信息；
• attrs 为数组：返回 DOM 元素 attrs 数组中指定的多个 CSS 样式值

Returns

Type：

Any

配置信息 attrs 的属性值或者 Outline 对象。

<style>
  .list {
    background-color: '#fff';
    color: '#222';
    font-size: 13px;
  }
</style>

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getStyles 单个方法
import getStyles from '@yaohaixiao/dom.js/getStyles'

const $list = DOM.byId('#list')

// 参数非法
DOM.getStyles($list) // -> null
DOM.getStyles($list, 'display') // -> null
getStyles($list, []) // -> null

getStyles($list, ['background-color']) // -> {backgroundColor: '#fff'}
getStyles($list, ['color', 'font-size']) // -> {color: '#222', fontSize: '13px'}

Category：

Style

setStyles() 方法用来给 DOM 元素批量添加 CSS 样式。

Parameters

el

Type：

HTMLElement

（必须）主题名称。

styles

Type：

Object|String

（必须）主题名称。

<ul id="list" class="list">
    <li class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 setStyles 单个方法
import setStyles from '@yaohaixiao/dom.js/setStyles'

const $list = DOM.byId('#list')

DOM.setStyle($list, {
  display: 'none',
  'background-color': '#f2f2f2'
))
setStyles($list, {
  'float': 'left',
  'overflow': 'hidden'
})

DOM.getStyle($list, 'background-color') // -> '#f2f2f2'
getStyle($list, 'overflow') // -> 'hidden'

Category：

Style

getProperty() 用来获取 CSS 变量（属性）值。

Parameters

prop

Type：

String

（必须）CSS 属性名称。

Returns

Type：

String

返回一个 DOMString ，其中包含请求的 CSS 属性的值。

<style>
  :root {
    --outline-zIndex: 2000;
    --outline-sticky-height: 100%;
    --outline-chapters-width: 100%;
  }
</style>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getProperty 单个方法
import getProperty from '@yaohaixiao/dom.js/getProperty'

DOM.getProperty('--outline-zIndex') // => '2000'
getProperty('--outline-sticky-height') // => '100%'
getProperty('--outline-chapters-width') // => '100%'

Category：

Style

setProperty() 用来为一个声明了 CSS 样式的对象设置一个新的值。

Parameters

prop

Type：

String

（必须）CSS 属性名称。

value

Type：

String

（必须）CSS 属性值。

<style>
  :root {
    --outline - zIndex: 2000;
  }
</style>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 setProperty 单个方法
import setProperty from '@yaohaixiao/dom.js/setProperty'

// 设置属性
DOM.setProperty('--outline-sticky-height', '100%')
setProperty('--outline-chapters-width', '100%')

// 获取属性值
DOM.getProperty('--outline-zIndex') // => '2000'
DOM.getProperty('--outline-sticky-height') // => '100%'
DOM.getProperty('--outline-chapters-width') // => '100%'

Category：

Style

css() 方法用来设置或者查询 DOM 元素的 CSS 样式。

Parameters

el

Type：

String

（必须）el 参数指定 DOM 元素。

attr

Type：

String|Object|Array

（必须）指定 CSS 属性名称。

value

Type：

String

Default：

true

(可选) 要设置的 CSS 属性值。

Returns

Type：

Object|String

返回指定的单个或者 attr 的属性值。

<ul id="list" class="list">
  <li class="item active">Home</li>
  <li class="item">Blog</li>
  <li class="item">Projects</li>
  <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 css 单个方法
import css from '@yaohaixiao/dom.js/css'

const $list = DOM.byId('#list')

// 设置单个 CSS 属性值
DOM.css($list, 'display', 'none')
css($list, 'display', 'block')

// 设置多个 CSS 属性值
setStyle($list, {
  'background-color': '#f2f2f2',
  'float': 'left'
})

// 获取单个 CSS 属性值
css($list, 'display') // -> 'block'

// 获取多个 CSS 属性值
css($list, ['background-color', 'float'])
// -> {
//      'background-color': '#f2f2f2',
//      'float': 'left'
//    }

Category：

Style

prop() 方法用来获取 CSS 样式的属性或者为一个声明了 CSS 样式的对象设置一个新的值。

Parameters

prop

Type：

String

（必须）CSS 属性名称。

value

Type：

String

（必须）CSS 属性值。

<style>
  :root {
    --outline - zIndex: 2000;
  }
</style>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 prop 单个方法
import prop from '@yaohaixiao/dom.js/prop'

// 设置属性
DOM.prop('--outline-sticky-height', '100%')
prop('--outline-chapters-width', '100%')

// 获取属性值
prop('--outline-zIndex') // => '2000'
prop('--outline-sticky-height') // => '100%'
prop('--outline-chapters-width') // => '100%'

Since

0.5.0

Category：

Style

show() 方法用来显示指定的 DOM 元素。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

<ul id="list" class="list">
  <li class="item active">Home</li>
  <li class="item">Blog</li>
  <li class="item">Projects</li>
  <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 show 单个方法
import show from '@yaohaixiao/dom.js/show'

const $list = DOM.byId('#list')

// 隐藏 $list
DOM.hide($list)
DOM.getStyle($list, 'display') // -> 'hidden'

// 显示 $list
show($list)
DOM.getStyle($list, 'display') // -> 'block'

Since

1.1.0

Category：

Style

hide() 方法用来隐藏指定的 DOM 元素。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

<ul id="list" class="list">
  <li class="item active">Home</li>
  <li class="item">Blog</li>
  <li class="item">Projects</li>
  <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 hide 单个方法
import hide from '@yaohaixiao/dom.js/hide'

const $list = DOM.byId('#list')

// 隐藏 $list
DOM.hide($list)
DOM.getStyle($list, 'display') // -> 'hidden'

// 显示 $list
DOM.toggle($list)
DOM.getStyle($list, 'display') // -> 'block'

Category：

Style

toggle() 方法用来设置 DOM 元素的显示和隐藏。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定 DOM 元素。

<ul id="list" class="list">
  <li class="item active">Home</li>
  <li class="item">Blog</li>
  <li class="item">Projects</li>
  <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 toggle 单个方法
import toggle from '@yaohaixiao/dom.js/toggle'

const $list = DOM.byId('#list')

// 隐藏 $list
DOM.toggle($list)
DOM.getStyle($list, 'display') // -> 'hidden'

// 显示 $list
toggle($list)
DOM.getStyle($list, 'display') // -> 'block'

Category：

Node Type Detection

isCollection() 方法用来检测测试数据是否为 HTMLNodeList (元素集合)类型。

Parameters

el

Type：

Any

（必须）el 参数指定待检测的 DOM 元素。

Returns

Type：

Boolean。

true - 表示检测数据是 HTMLNodeList (元素集合)类型，false 则表示不是。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isCollection() 方法
import isCollection from '@yaohaixiao/types.js/isCollection'

const $list = document.getElementById('list')
const $div = document.createElement('div')
const $text = document.createTextNode('text')
const $items = document.querySelectorAll('.item')
const $fragment = document.createDocumentFragment()

DOM.isElement($list) // -> true
DOM.isCollection($list) // -> false

DOM.isElement($div) // -> true
DOM.isCollection($div) // -> false

DOM.isElement($text) // -> false
DOM.isCollection($text) // -> false

DOM.isElement($items) // -> false
isCollection($items) // -> true

DOM.isElement($fragment) // -> false
isCollection($fragment) // -> false

Category：

Node Type Detection

isDOM() 方法用来检测测试数据是否为 DOM 类型数据：DOM 节点，TextNode，NodeList 和 DocumentFragment）。

Parameters

el

Type：

Object

（必须）el 参数指定待检测的 DOM 元素。

Returns

Type：

Boolean。

true - 表示检测数据是 DOM 类型数据，false 则表示不是。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isTextNode() 方法
import isDOM from '@yaohaixiao/dom.js/isDOM'

const $list = document.getElementById('list')
const $fragment = document.createDocumentFragment()
const $items = document.querySelectorAll('.item')
const $text = document.createTextNode('text')

DOM.isDOM($list) // -> true
DOM.isDOM($fragment) // -> true
DOM.isElement($items) // -> false
isDOM($items) // -> true
isTextNode($text) // -> true
isDOM($text) // -> true

Category：

Node Type Detection

isElement() 方法用来检测测试数据是否为 HTMLElement (元素节点)类型。

Category：

Lang

Parameters

el

Type：

Any

（必须）el 参数指定待检测的 DOM 元素。

Returns

Type：

Boolean。

true - 表示检测数据是 HTMLElement (元素节点)类型，false 则表示不是。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isElement() 方法
import isElement from '@yaohaixiao/dom.js/isElement'

const $list = document.getElementById('list')
const $div = document.createElement('div')
const $text = document.createTextNode('text')
const $items = document.querySelectorAll('.item')
const $fragment = document.createDocumentFragment()

DOM.isElement($list) // -> true
DOM.isElement($div) // -> true
DOM.isElement($text) // -> false
isElement($items) // -> false
isElement($fragment) // -> false

Category：

Node Type Detection

isFragment() 方法用来检测测试数据是否为 DocumentFragment 文档碎片。

Parameters

el

Type：

Any

（必须）val 待检测的数据。

Returns

Type：

Boolean。

true - 表示检测数据是 DocumentFragment 文档碎片，false 则表示不是。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isFragment() 方法
import isFragment from '@yaohaixiao/dom.js/isFragment'

const $list = document.getElementById('list')
const $div = document.createElement('div')
const $text = document.createTextNode('text')
const $items = document.querySelectorAll('.item')
const $fragment = document.createDocumentFragment()

DOM.isElement($list) // -> true
DOM.isFragment($list) // -> false

DOM.isElement($div) // -> true
DOM.isFragment($div) // -> false

DOM.isElement($text) // -> false
DOM.isFragment($text) // -> false

DOM.isElement($items) // -> false
isFragment($items) // -> false

DOM.isElement($fragment) // -> false
isFragment($fragment) // -> true

Since：

1.6.0

isNode() 方法用来检测指定对象是否为 Node （接口）实例。相较于 isDOM() 方法，isNode() 方法可以检测更多类型的（Node）对象。以下接口都从 Node 继承其方法和属性：

1. Document
2. Element
3. Attr
4. CharacterData (which Text, Comment, and CDATASection inherit)
5. ProcessingInstruction,
6. DocumentFragment
7. DocumentType
8. Notation
9. Entity
10. EntityReference

Parameters

node

Type：

Node

（必须）node 参数指定待检测的对象。

Returns

Type：

Boolean。

true - 表示检测数据是 Node （接口）实例，false 则表示不是。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isTextNode() 方法
import isNode from '@yaohaixiao/dom.js/isNode'

const $list = document.getElementById('list')
const $fragment = document.createDocumentFragment()
const $items = document.querySelectorAll('.item')
const $text = document.createTextNode('text')

DOM.isNode($list) // -> true
DOM.isNode($fragment) // -> true
DOM.isNode($items) // -> true

isNode($items) // -> true
isNode($text) // -> true
isNode($text) // -> true
isNode(document) // -> true

Since

1.7.0

Category：

Node Type Detection

isOverflowElement() 方法用来检测 DOM 元素是否设置了 overflow 属性。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定待检测的 DOM 元素。

Returns

Type：

Boolean。

true - 表示检测数 DOM 元素设置了overflow 属性，false 则表示没有设置。

.list {
  margin:0 auto;
  height: 32px;
  overflow: auto;
}

.host {
  margin:0 auto;
  height: 32px;
}

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isOverflowElement() 方法
import isOverflowElement from '@yaohaixiao/dom.js/isOverflowElement'

const $list = DOM.byClass('.list')
const $host = DOM.byClass('.host')

DOM.isOverflowElement($list) // -> true
isOverflowElement($host) // -> false

Since

1.6.0

Category：

Node Type Detection

isShadowRoot() 方法用来检测目标 node 是否一个 DOM 子树的根节点。

Parameters

el

Type：

Any

（必须）node 参数指定待检测的 Node 实例。

Returns

Type：

Boolean。

true - 表示检测数据是 ShadowRoot，false 则表示不是。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isShadowRoot() 方法
import isShadowRoot from '@yaohaixiao/dom.js/isShadowRoot'

const $list = document.getElementById('list')

const host = document.querySelector("#host")
const shadow = host.attachShadow({ mode: "open" })
const span = document.createElement("span")

span.textContent = "I'm in the shadow DOM"
shadow.appendChild(span)

DOM.isShadowRoot($list) // -> false
isShadowRoot(shadow) // -> true

Since

1.7.0

Category：

Node Type Detection

isTableElement() 方法用来检测 DOM 元素是为 table 列表类的元素。

Parameters

el

Type：

Any

（必须）el 参数指定待检测的 DOM 元素。

Returns

Type：

Boolean。

true - 表示检测 DOM 元素是 table 列表类的元素，false 则表示不是。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

<table class="table">
   <thead class="thead">
      <tr>
           <th>名称</th>
           <th>说明</th>
      </tr>
   </thead>
   <tbody class="tbody">
      <tr>
           <td>Table</td>
           <td>表格标签</td>
      </tr>
   </thead>
</table>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isTableElement() 方法
import isTableElement from '@yaohaixiao/dom.js/isTableElement'

const $list = DOM.byClass('.list')
const $table = DOM.byClass(".table")

DOM.isTableElement($list) // -> false
isTableElement($table) // -> true

Category：

Node Type Detection

isText() 方法用来检测测试数据是否为 HTMLTextNode (文本节点)类型。

Parameters

el

Type：

Any

（必须）el 参数指定待检测的 DOM 元素。

Returns

Type：

Boolean。

true - 表示检测数据是 HTMLTextNode (文本节点)类型，false 则表示不是。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom'
// 或者单独引用 isText() 方法
import isText from '@yaohaixiao/dom.js/isText'

const $list = document.getElementById('list')
const $div = document.createElement('div')
const $fragment = document.createDocumentFragment()
const $items = document.querySelectorAll('.item')
const $text = document.createTextNode('text')

DOM.isElement($list) // -> true
DOM.isText($list) // -> false

DOM.isElement($div) // -> true
DOM.isText($div) // -> false

DOM.isFragment($fragment) // -> true
DOM.isText($fragment) // -> false

DOM.isCollection($items) // -> true
isText($items) // -> false

DOM.isElement($text) // -> false
isText($text) // -> true

Since

1.7.0

Category：

Observer

observeIntersections() 方法是一个通用的 IntersectionObserver 观察者处理器。提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定用作边界盒的元素或文档。如果构造函数未传入 root 或其值为null，则默认使用顶级文档的视口。

fn

Type：

Function

（必须）fn 参数指定 el 元素下需要观察的 DOM 元素出发观察条件时出发的回调函数。

props

Type：

Object

（可选）props 指定传递到 IntersectionObserver() 构造函数的 options 对象。

Returns

Type：

Object

返回 IntersectionObserver 对象（实例）。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 observeIntersections 单个方法
import observeIntersections from '@yaohaixiao/dom.js/observeIntersections'

const $list = DOM.getEl('#list')
const $blog = DOM.getEl('.blog')

// $list 菜单中的 .item 元素滚动到 list （可见）区域的 10%的时候出发
// target 指当前出发观察条件的 DOM 元素
DOM.observeIntersections($list, (target) => {
  console.log('指当前出发观察条件的 DOM 元素：' target)
}, {
  selector: '.item',
  intersectionRatio: 0.1
})

Since

1.7.0

Category：

Observer

observeMutations() 方法是一个通用的 MutationObserver 观察者处理器。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定需要观察的 DOM 元素。

fn

Type：

Function

（必须）fn 参数指定 DOM 元素观察的属性发生改变时出发的回调函数。

props

Type：

Object

（可选）DOM 元素需要观察的属性。

Returns

Type：

Object

返回 MutationObserver 对象（实例）。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 observeMutations 单个方法
import observeMutations from '@yaohaixiao/dom.js/observeMutations'

const $list = DOM.getEl('#list')
const $blog = DOM.getEl('.blog')

// mr 代表 DOM 元素改变时记录的 MutationRecord 对象
DOM.observeMutations($list, (mr) => {
  console.log('list 发生改变：' mr)
})
DOM.observeMutations($blog, (mr) => {
  console.log('blog 发生改变：' mr)
})

DOM.hide($blog)
// -> blog 发生改变：blog 改变记录的 MutationRecord 对象
// -> list 发生改变：list 改变记录的 MutationRecord 对象

Since

1.8.0

Category：

Observer

observeResize() 方法是一个通用的 ResizeObserver 观察者处理器。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定需要观察的 DOM 元素。

fn

Type：

Function

（必须）fn 参数指定 DOM 元素观察到发生尺寸改变时出发的回调函数。

delay

Type：

Number

Default：

300

（可选）delay 参数指定 DOM 元素观察到发生尺寸改变时出发的回调函数执行的防抖处理的时间间隔（单位：毫秒）。

Returns

Type：

Object

返回 ResizeObserver 对象（实例）。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item project">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 observeResize 单个方法
import observeResize from '@yaohaixiao/dom.js/observeResize'

const $list = DOM.getEl('#list')
const $blog = DOM.getEl('.blog')

// entry 代表 DOM 元素改变时记录的 ResizeObserverEntry 对象
DOM.observeMutations($list, (entry) => {
  console.log('list 发生 resize：' entry)
})
DOM.observeMutations($blog, (entry) => {
  console.log('blog 发生resize：' entry)
})

DOM.css($blog, {
  width: '200px'
})
// -> blog 发生改变：blog 改变记录的 ResizeObserverEntry 对象

DOM.css($list, {
  width: '200px'
})
// -> list 发生改变：list 改变记录的 ResizeObserverEntry 对象

Since

1.4.0

Category：

Others

copyToClipboard() 方法用于复制指定文本内容到粘贴板。

Parameters

str

Type：

String

（必须）需要复制的文本字符串。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 copyToClipboard 单个方法
import copyToClipboard from '@yaohaixiao/dom.js/copyToClipboard'

DOM.copyToClipboard('http://www.yaohaixiao.com')
copyToClipboard('https://github.com/yaohaixiao/dom.js')

Since

1.4.0

Category：

Others

createAndDownloadFile() 方法用来（通过文本）创建二进制的文件并下载文件。

Parameters

fileName

Type：

String

（必须）下载的文件名称。

content

Type：

Blob|String

• Blob：二进制内容；
• String：文本内容；

（必须）下载文件的主体内容。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 createAndDownloadFile 单个方法
import createAndDownloadFile from '@yaohaixiao/dom.js/createAndDownloadFile'

// 创建一个 age.js 文件，并下载
DOM.createAndDownloadFile('age.js', 'var age = 32')
createAndDownloadFile('readme.md', '# createAndDownloadFile')

Since

1.6.0

Category：

Others

指定（某个DOM元素）进入或者退出全屏模式。

Parameters

mode

Type：

Boolean

Default：

true

（可选）是否进入全屏模式。默认进入全屏模式。

el

Type：

String

Default：

'body'

（可选）指定 DOM 节点的选择器。默认节点为 document.body。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item blog">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 fullscreen 单个方法
import fullscreen from '@yaohaixiao/dom.js/fullscreen'

const $list = DOM.getEl('#list')

// 整个页面进入或者全屏模式
DOM.fullscreen(true)
DOM.fullscreen(false)

// 仅 $list 菜单进入或者全屏模式
fullscreen(true, $list)
fullscreen(false, $list)

Since

1.7.0

Category：

Others

getSelectedText() 返回页面中选中的文本内容。

Returns

Type：

String

返回页面中选中的文本内容。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getSelectedText 单个方法
import getSelectedText from '@yaohaixiao/dom.js/getSelectedText'

// 返回页面中选中的文本内容。
DOM.getSelectedText()
getSelectedText()

Since

1.4.0

Category：

Others

getURLProps() 方法用来解析 URL 地址中的相关属性，返回解析 URL 后的对象数据。

Parameters

url

Type：

String

Default：

location.href

（可选）url 参数指定要解析的 URL 地址字符串，默认值：页面当前 URL 地址。

Returns

Type：

Object

返回解析 URL 后的对象数据。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getURLProps 单个方法
import getURLProps from '@yaohaixiao/dom.js/getURLProps'

// 获取当前页面地址：的 URL 信息
DOM.getURLProps()
// => {
//   "protocol":"https",
//   "username":"",
//   "password":"",
//   "hostname":"github.com",
//   "port":"",
//   "host":"github.com",
//   "pathname":"/yaohaixiao/dom.js",
//   "search":"",
//   "path":"/yaohaixiao/dom.js",
//   "hash":"",
//   "href":"https://github.com/yaohaixiao/dom.js",
//   "origin":"https://github.com"
// }

getURLProps('https://yaohaixiao:1232@github.com:2034/yaohaixiao/types.js/blob/main/_getURLPattern.js?search=URLSearchParams#google')
// => {
//   "protocol":"https",
//   "username":"yaohaixiao",
//   "password":"1232",
//   "hostname":"github.com",
//   "port":"2034",
//   "host":"github.com:2034",
//   "pathname":"/yaohaixiao/types.js/blob/main/_getURLPattern.js",
//   "search":"?search=URLSearchParams",
//   "path":"/yaohaixiao/types.js/blob/main/_getURLPattern.js?search=URLSearchParams",
//   "hash":"#google",
//   "href":"https://www.yaohaixiao.com:1232@github.com:2034/yaohaixiao/types.js/blob/main/_getURLPattern.js?search=URLSearchParams#google",
//   "origin":"https://github.com:2034"}
// }

Since

1.4.0

Category：

Others

getURLSearchParams() 方法用来获取 URL 地址字符串中查询字符串解析后的对象数据。

Parameters

url

Type：

String

Default：

location.search

url 参数指定 URL 地址字符串，默认值：当前 URL 地址的查询字符串。

Returns

Type：

Object

返回 URL 地址字符串中查询字符串解析后的对象数据。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getURLSearchParams 单个方法
import getURLSearchParams from '@yaohaixiao/dom.js/getURLSearchParams'

const url = 'http://www.yaohaixiao.com/?s=getURLSearchParams&tag=JavaScript'

// 当前 URL 地址：http://www.yaohaixiao.com/?s=getURLSearchParams
DOM.getURLSearchParams() // -> {s: 'getURLSearchParams'}

getURLSearchParams(url) // -> {s: 'getURLSearchParams', tag: 'JavaScript'}

Since

1.4.0

Category：

Others

getURLSearchParamByName() 方法用来获取当前 URL 地址字符串中查询字符串解析后的对象数据的某个属性值。

Parameters

url

Type：

String

Default：

prop

指定要查询的属性名称。

Returns

Type：

Object

返回 URL 地址字符串中查询字符串解析后的对象数据的属性值。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 getURLSearchParams 单个方法
import getURLSearchParams from '@yaohaixiao/dom.js/getURLSearchParams'

// 当前 URL 地址：http://www.yaohaixiao.com/?s=getURLSearchParams
DOM.getURLSearchParamByName('s') // -> 'getURLSearchParams'

// 当前 URL 地址：'http://www.yaohaixiao.com/?s=getURLSearchParams&tag=JavaScript'
getURLSearchParamByName(tag) // 'JavaScript'

Since

1.7.0

Category：

Others

onClickOutside() 方法用来处理点击 el 元素以外后执行一些操作。通常用于在弹出窗口后菜单后，点击页面其它 DOM 元素，隐藏弹出的窗口或者菜单。

Parameters

el

Type：

HTMLElement

（必须）el 参数指定要 DOM 元素。

callback

Type：

Function

（必须）Function 参数指定点击后要执行的回调函数。

<ul id="list" class="list">
    <li id="home" class="item active">Home</li>
    <li class="item">Blog</li>
    <li class="item">Projects</li>
    <li class="item">About</li>
</ul>

// 窗口可见
<div id="user" class="popper">User</div>

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 onClickOutside 单个方法
import onClickOutside from '@yaohaixiao/dom.js/onClickOutside'

const $list = DOM.getEl('#list')
const $popper = DOM.getEl('#user')

DOM.onClickOutside($popper, () => {
  DOM.hide($popper)
  console.log('关闭用户信息弹窗')
})

onClickOutside($list, () => {
  DOM.hide($list)
  console.log('关闭导航菜单')
})

$list.click() // '关闭用户信息弹窗'

Since

1.4.0

Category：

Others

openURL() 方法打开指定 URL 页面。

Parameters

url

Type：

String

（必须）需要打开的文件 URL 地址。

target

Type：

String

Default：

'_blank'

（可选）打开方式，默认值：_blank - 新窗口打开。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 openURL 单个方法
import openURL from '@yaohaixiao/dom.js/openURL'

// 新窗口打开
DOM.openURL('http://www.yaohaixiao.com')

// 本窗口打开
openURL('https://github.com/yaohaixiao/dom.js', '_self')

Since

1.2.0

Category：

Others

pixel() 方法用来将 CSS 单位值('px')和数值互换。

Parameters

val

Type：

String|Number

（必须）val 参数指定用来转化的 CSS 单位或者数值。

Returns

Type：

String|Number

返回转化后的数值或者 CSS 单位值。

Usage

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 pixel 单个方法
import pixel from '@yaohaixiao/dom.js/pixel'

DOM.pixel('24px') // -> 24
pixel(24) // -> '24px'

Since

1.7.0

Category：

Others

redirect() 方法用来重定向 URL 地址。

Parameters

url

Type：

String

Default：

''

（必须）url 参数指定要跳转的 URL 地址。

asLink

Type：

Boolean

Default：

true

（可选）asLink 参数指定重定向的方式：true - 刷新页面跳转，false - 仅更新 URL 地址，不刷线页面。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 redirect 单个方法
import redirect from '@yaohaixiao/dom.js/redirect'

// 页面整体刷新，跳转到 http://www.yaohaixiao.com/ 站点
DOM.redirect('http://www.yaohaixiao.com/')

// 当前页面 http://www.yaohaixiao.com/，
// 仅更新 URL 路径到 http://www.yaohaixiao.com/?page=2
// 但不刷新页面
getURLProps('http://www.yaohaixiao.com/?page=2', true)

Category：

Others

serialize() 方法用来将 Form 表单中的数据序列化为 key/value 的对象数据或者 URL 地址中查询字符串的格式。

Parameters

formElement

Type：

HTMLElement

（必须）formElement 参数指定 Form 表单元素。

isParams

Type：

Boolean

（可选）isParams 指定是否序列化为查询字符串：

• false：（默认值）序列化为 key/value 的对象数据;
• true: 序列化为查询字符串;

Returns

Type：

Object|String

返回序列化后的数据。

<ul id="list" class="list"></ul>
<form name="form" id="form">
  <input type="text" id="user" name="user" class="user" value="Robert" />
  <input type="checkbox" id="reading" checked="checked" name="hobby" class="checkbox" value="reading" />读书
  <textarea id="desc" name="desc" class="desc">I\'m a programmer</textarea>
</form>'

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 serialize 单个方法
import serialize from '@yaohaixiao/dom.js/serialize'

const $list = DOM.byId('#list')
const $form = DOM.byId('#form')
const $user = DOM.byId('#user')

// serialize() 方法无法序列化非表单元素
DOM.serialize($list) // -> false
DOM.serialize($user) // -> false

// 序列化成查询字符串
serialize($form, true) // -> {desc: "I'm a programmer", hobby: "reading", user: "Robert"}

// 序列化为 key/value 的对象数据
serialize($form) // -> 'user=Robert&hobby=reading&desc=I%27m+a+programmer'

Category：

Others

toURLSearchParams() 方法用来将普通对象转化成 URL 地址中的查询字符串。

Parameters

o

Type：

Object

o 参数指定要转化的普通对象。

Returns

Type：

String

返回转化后的 URL 地址查询字符串。

// 引入 DOM 模块（中的所有工具方法）
import DOM from '@yaohaixiao/dom.js/dom
// 引用 toURLSearchParams 单个方法
import toURLSearchParams from '@yaohaixiao/dom.js/toURLSearchParams'

const queryOne = {name: 'Robert', age: 32}
const queryTwo = {price: 32, group: 4, color: 'red'}

DOM.toURLSearchParams(queryOne) // -> 'name=Robert&age=32'
toURLSearchParams(queryTwo) // -> 'price=32&group=4&color=red'