Skip to content

Latest commit

 

History

History
541 lines (401 loc) · 19.6 KB

dom.md

File metadata and controls

541 lines (401 loc) · 19.6 KB

Constants

$Element | null

通过选择器和上下文(可选)找到一个指定元素

$$NodeList

通过选择器和上下文(可选)找到所有符合的元素

Functions

isNonBlankString(str)boolean

检测一个字符串是否包含任何非空格的字符

throwIfWhitespace(str)

如果字符串中包含空格,则抛出错误

classRegExp(className)Regexp

生成一个正则表达式,用于检查一个元素的 className 字符串中是否包含特定的 className

isReal()boolean

是否处于浏览器环境中

isEl(value)boolean

判断一个变量是否是 DOM element

createQuerier(method)function

创建一个 DOM 查询函数,这个函数在原有方法的基础上有额外的指定上下文的功能

createEl([tagName], [properties], [attributes], content)Element

创建 DOM 元素

createElement(tagName, [props], child)Element

创建一个元素,并能添加 props 和 子元素

vjs 的 createEl 将 props 和 attrs 分成了两个参数,但是我们的业务没必要这么做 而且每次想要传 child 参数的时候,还得先传 attrs 参数让我觉得很烦

textContent(el, text)Element

更改 DOM 元素中的文本节点(整个文本内容都会被替换掉)

normalizeContent(content)Array

将要插入到 DOM 元素中的内容标准化

使用 createTextNode 而不是 createElement 避免 XSS 漏洞

isTextNode(value)boolean

判断一个变量是否是 textNode

prependTo(child, parent)

将一个元素插入到另一个中作为第一个子元素

parent(el, classForSelector)Element | null

返回指定元素的最近的命中选择器的父元素

hasClass(el, classToCheck)boolean

检查指定元素是否包含指定 class

addClass(el, classToAdd)Element

给指定元素增加 class

removeClass(el, classToRemove)Element

移除指定元素的指定 class

toggleClass(el, classToToggle, predicate)Element

增加或删除一个元素上的指定的 class

setAttributes(el, attributes)

设置元素的属性

getAttributes(el)Object

1) boolean 的属性,其值为 true/false

getAttribute(el, attribute)string

获取元素的指定属性,element.getAttribute 换一种写法

setAttribute(el, attr, value)

设置元素的指定属性 element.setAttribute 换一种写法

removeAttribute(el, attribute)

移除元素上的指定属性 element.removeAttribute 换一种写法

blockTextSelection()

当拖动东西的时候,尝试去阻塞选中文本的功能

unblockTextSelection()

关闭对文本选中功能的阻塞

getBoundingClientRect(el)Object | undefined

同原生的 getBoundingClientRect 方法一样,确保兼容性

在一些老的浏览器(比如 IE8)提供的属性不够时,此方法会手动补全

另外,一些浏览器不支持向 ClientRect/DOMRect 对象中添加属性,所以我们选择创建一个新的对象, 并且把 ClientReact 中的标准属性浅拷贝过来( x 和 y 没有拷贝,因为这个属性支持的并不广泛)

findPosition(el)Object

1) clientLeft/clientTop 获取一个元素的左/上边框的宽度,不包括 padding 和 margin 的值

getPointerPosition(el, event)Coordinates

1) offsetWidth/offsetHeight: 元素宽/高,包括 border padding width/height scrollbar 2) pageX/pageY: 点击的 x/y 坐标,相对于 document,是个绝对值(当有滚动条时会把滚动条的距离也计算在内) 3) changedTouches: touch 事件中的相关数据

emptyEl(el)Element

清空一个元素

appendContent(el, content)Element

向元素内插入内容

insertContent(el, content)Element

替换元素的内容 感觉名字起得不怎么好

replaceContent(el, content)Element

同 insertContent insertContent 是 vjs 里的函数,但我感觉名字起的不好,我想用这个

$ ⇒ Element | null

通过选择器和上下文(可选)找到一个指定元素

Kind: global constant
Returns: Element | null - 被选中的元素或 null

Param Type Description
selector string css 选择器,反正最后都会被 querySelector 处理,你看着传吧
上下文环境。可选,默认为 Element | string document

$$ ⇒ NodeList

通过选择器和上下文(可选)找到所有符合的元素

Kind: global constant
Returns: NodeList - 被选中的元素列表,如果没有符合条件的元素,空列表

Param Type Description
selector string css 选择器,反正最后都会被 querySelectorAll 处理,你看着传吧
上下文环境。可选,默认为 Element | string document

isNonBlankString(str) ⇒ boolean

检测一个字符串是否包含任何非空格的字符

Kind: global function
Returns: boolean - 是否包含非空格的字符

Param Type Description
str string 待检查的字符串

throwIfWhitespace(str)

如果字符串中包含空格,则抛出错误

Kind: global function
Throws:

  • Error
Param Type Description
str string 待检查的字符串

classRegExp(className) ⇒ Regexp

生成一个正则表达式,用于检查一个元素的 className 字符串中是否包含特定的 className

Kind: global function
Returns: Regexp - 用于检查该类名是否存在于一个元素的 className 字符串中

Param Type Description
className string 就是为了他!

isReal() ⇒ boolean

是否处于浏览器环境中

Kind: global function

isEl(value) ⇒ boolean

判断一个变量是否是 DOM element

Kind: global function
Returns: boolean - 是否是 DOM element

Param Type Description
value Mixed 待检查的变量

createQuerier(method) ⇒ function

创建一个 DOM 查询函数,这个函数在原有方法的基础上有额外的指定上下文的功能

Kind: global function
Returns: function - 查询 DOM 用的函数

Param Type Description
method string 方法名

createEl([tagName], [properties], [attributes], content) ⇒ Element

创建 DOM 元素

Kind: global function
Returns: Element - el 创建的元素

Param Type Description
[tagName] string 元素类型。可选,默认 div
[properties] Object 元素 prop 属性。可选,默认无
[attributes] Object 元素 attr 属性。可选,默认无
content string | Element | TextNode | Array | function 元素内容。可选,默认无

createElement(tagName, [props], child) ⇒ Element

创建一个元素,并能添加 props 和 子元素

vjs 的 createEl 将 props 和 attrs 分成了两个参数,但是我们的业务没必要这么做 而且每次想要传 child 参数的时候,还得先传 attrs 参数让我觉得很烦

Kind: global function
Returns: Element - el 创建的元素
Todo

  • 先写一个这个函数自己用,后面看有没有必要把 createEl 函数换掉
Param Type Description
tagName string DOM 元素标签名
[props] Object 属性
child Element | string 元素的子元素,参数个数不限。可以没有,也可以有多个

textContent(el, text) ⇒ Element

更改 DOM 元素中的文本节点(整个文本内容都会被替换掉)

Kind: global function
Returns: Element - el 更改后的 DOM 元素

Param Type Description
el Element 将要改变文本节点的 DOM 元素
text string 要添加的文本

normalizeContent(content) ⇒ Array

将要插入到 DOM 元素中的内容标准化

使用 createTextNode 而不是 createElement 避免 XSS 漏洞

Kind: global function
Returns: Array - 标准化后的内容

Param Type Description
content string | Element | TextNode | Array | function - string: 标准化为 text node - Element/TextNode: 不做任何处理 - Array: 遍历处理数组元素 - Function: 先运行得到结果再处理

isTextNode(value) ⇒ boolean

判断一个变量是否是 textNode

Kind: global function
Returns: boolean - 是否是 textNode

Param Type Description
value Mixed 待检查的变量

prependTo(child, parent)

将一个元素插入到另一个中作为第一个子元素

Kind: global function

Param Type Description
child Element 最终的子元素
parent Element 最终的父元素

parent(el, classForSelector) ⇒ Element | null

返回指定元素的最近的命中选择器的父元素

Kind: global function
Returns: Element | null - 选择器命中的最近的父元素列表

Param Type Description
el Element 要寻找父元素的指定元素
classForSelector string 目前只支持 class 选择器

hasClass(el, classToCheck) ⇒ boolean

检查指定元素是否包含指定 class

Kind: global function
Returns: boolean - 元素上是否包含指定 class

Param Type Description
el Element 宿主元素
classToCheck string 待检查的 class

addClass(el, classToAdd) ⇒ Element

给指定元素增加 class

Kind: global function
Returns: Element - 添加完 class 后的元素

Param Type Description
el Element 要添加 class 的元素
classToAdd string 要添加的 class

removeClass(el, classToRemove) ⇒ Element

移除指定元素的指定 class

Kind: global function
Returns: Element - 移除指定 class 后的元素

Param Type Description
el Element 要移除 class 的元素
classToRemove string 要移除的 class

toggleClass(el, classToToggle, predicate) ⇒ Element

增加或删除一个元素上的指定的 class

Kind: global function
Returns: Element - 改变完 class 后的元素

Param Type Description
el Element 将要改变 class 的元素
classToToggle string 要添加或删除的 class
predicate function | boolean 添加或删除 class 的依据(额外的判断条件)

setAttributes(el, attributes)

设置元素的属性

Kind: global function

Param Type Description
el Element 要设置属性的元素
attributes Object 要设置的属性集合

getAttributes(el) ⇒ Object

  1. boolean 的属性,其值为 true/false

Kind: global function
Returns: Object - 以 key/value 形式存储的属性

Param Type Description
el Element 要获取属性的元素

getAttribute(el, attribute) ⇒ string

获取元素的指定属性,element.getAttribute 换一种写法

Kind: global function
Returns: string - 获取的属性值

Param Type Description
el Element 要获取属性的元素
attribute string 要获取的属性名

setAttribute(el, attr, value)

设置元素的指定属性 element.setAttribute 换一种写法

Kind: global function

Param Type Description
el Element 要设置属性的元素
attr string 要设置的属性
value Mixed 要设置的属性的值

removeAttribute(el, attribute)

移除元素上的指定属性 element.removeAttribute 换一种写法

Kind: global function

Param Type Description
el Element 要移除属性的元素
attribute string 要移除的属性名

blockTextSelection()

当拖动东西的时候,尝试去阻塞选中文本的功能

Kind: global function

unblockTextSelection()

关闭对文本选中功能的阻塞

Kind: global function

getBoundingClientRect(el) ⇒ Object | undefined

同原生的 getBoundingClientRect 方法一样,确保兼容性

在一些老的浏览器(比如 IE8)提供的属性不够时,此方法会手动补全

另外,一些浏览器不支持向 ClientRect/DOMRect 对象中添加属性,所以我们选择创建一个新的对象, 并且把 ClientReact 中的标准属性浅拷贝过来( x 和 y 没有拷贝,因为这个属性支持的并不广泛)

Kind: global function

Param Type Description
el Element 要获取 ClientRect 对象的元素

findPosition(el) ⇒ Object

  1. clientLeft/clientTop 获取一个元素的左/上边框的宽度,不包括 padding 和 margin 的值

Kind: global function
Returns: Object - 包含位置信息的对象
See: http://ejohn.org/blog/getboundingclientrect-is-awesome/

Param Type Description
el Element 要获取位置的元素

getPointerPosition(el, event) ⇒ Coordinates

  1. offsetWidth/offsetHeight: 元素宽/高,包括 border padding width/height scrollbar 2) pageX/pageY: 点击的 x/y 坐标,相对于 document,是个绝对值(当有滚动条时会把滚动条的距离也计算在内) 3) changedTouches: touch 事件中的相关数据

Kind: global function

Param Type Description
el Element 被点击的元素
event Event 点击事件

emptyEl(el) ⇒ Element

清空一个元素

Kind: global function
Returns: Element - 移除所有子元素后的元素

Param Type Description
el Element 要清空的元素

appendContent(el, content) ⇒ Element

向元素内插入内容

Kind: global function
Returns: Element - 被塞了新内容的元素

Param Type Description
el Element 父元素
content string | Element | TextNode | Array | function 待插入的内容,会先经过 normalizeContent 处理

insertContent(el, content) ⇒ Element

替换元素的内容 感觉名字起得不怎么好

Kind: global function
Returns: Element - el 替换内容后的元素

Param Type Description
el Element 父元素
content string | Element | TextNode | Array | function 参见 normalizeContent 中参数描述 {@link: dom:normalizeContent}

replaceContent(el, content) ⇒ Element

同 insertContent insertContent 是 vjs 里的函数,但我感觉名字起的不好,我想用这个

Kind: global function
Returns: Element - el 替换内容后的元素
Todo

  • 看可不可以直接把 insertContent 函数去掉(需考虑到后续对 vjs 插件的影响);
Param Type Description
el Element 父元素
content string | Element | TextNode | Array | function 参见 normalizeContent 中参数描述 {@link: dom:normalizeContent}