Element 元素模块

DOM 元素相关操作方法。

isElement(element)

判断传入的参数是否是元素节点。

参数

参数	类型	必填	说明
element	Element	是	要判断的元素

返回值

Boolean - true 表示是元素节点

示例

Qilin.Element.isElement(document.body)           // true
Qilin.Element.isElement(document.querySelector('div'))  // true
Qilin.Element.isElement('div')                  // false

---

isContains(parentNode, childNode)

判断某个节点是否包含指定节点（父子或祖孙关系）。

参数

参数	类型	必填	说明
parentNode	Element	是	父节点
childNode	Element	是	子节点

返回值

Boolean - true 表示包含

示例

const parent = document.querySelector('.parent')
const child = document.querySelector('.child')
Qilin.Element.isContains(parent, child)    // true/false

---

isParentNode(parentNode, childNode)

判断某个节点是否是指定节点的直接父节点。

参数

参数	类型	必填	说明
parentNode	Element	是	父节点
childNode	Element	是	子节点

返回值

Boolean - true 表示是直接父节点

---

addClass(element, className)

给某个元素添加指定类名。

参数

参数	类型	必填	说明
element	Element	是	元素节点
className	String	是	类名，多个类名以英文逗号分隔

示例

Qilin.Element.addClass(el, 'active')
Qilin.Element.addClass(el, 'active,highlight')

---

removeClass(element, className)

移除某个元素的指定类名。

参数

参数	类型	必填	说明
element	Element	是	元素节点
className	String	是	类名，多个类名以英文逗号分隔

示例

Qilin.Element.removeClass(el, 'active')
Qilin.Element.removeClass(el, 'active,highlight')

---

hasClass(element, className)

判断某个元素是否包含指定类名。

参数

参数	类型	必填	说明
element	Element	是	元素节点
className	String	是	类名，多个类名以英文逗号分隔

返回值

Boolean - true 表示包含所有指定类名

示例

Qilin.Element.hasClass(el, 'active')              // true/false
Qilin.Element.hasClass(el, 'active,highlight')   // 需都包含才返回true

---

getCssSelector(selector)

判断选择器字符串是哪种类型的选择器。

参数

参数	类型	必填	说明
selector	String	是	选择器字符串

返回值

Object - { type: 'id'|'class'|'attribute'|'tag', value: ... }

示例

Qilin.Element.getCssSelector('#app')         // { type: 'id', value: 'app' }
Qilin.Element.getCssSelector('.btn')        // { type: 'class', value: 'btn' }
Qilin.Element.getCssSelector('div')         // { type: 'tag', value: 'div' }

---

getNodeDistance(element, parentNode)

获取某个元素距离指定祖先元素的距离。

参数

参数	类型	必填	说明
element	Element	是	指定元素
parentNode	Element	否	父元素或祖先元素，默认 document.body

返回值

Object - { top, left, right, bottom }

示例

const distance = Qilin.Element.getNodeDistance(el, container)
// { top: 100, left: 50, right: 200, bottom: 300 }

---

getChildNode(element, selector)

获取某个元素节点下指定选择器的子元素节点。

参数

参数	类型	必填	说明
element	Element	是	元素节点
selector	String	否	选择器，不传查询全部

返回值

Array<Element> - 子元素节点数组

示例

Qilin.Element.getChildNode(parent, '.item')
Qilin.Element.getChildNode(parent)  // 全部子元素

---

getSiblingNode(element, selector)

获取某个元素的兄弟元素节点。

参数

参数	类型	必填	说明
element	Element	是	元素节点
selector	String	否	选择器，不传查询全部

返回值

Array<Element> - 兄弟元素节点数组

---

getNodeCssStyle(element, cssName)

获取某个元素的指定样式。

参数

参数	类型	必填	说明
element	Element	是	元素节点
cssName	String	是	样式名

返回值

String - 样式值

示例

Qilin.Element.getNodeCssStyle(el, 'font-size')    // '16px'
Qilin.Element.getNodeCssStyle(el, 'color')        // 'rgb(0, 0, 0)'

---

remToPx(rem)

将 rem 单位转换为 px 单位。

参数

参数	类型	必填	说明
rem	Number	是	rem 数值

返回值

Number - px 数值

示例

// 假设 html font-size 为 16px
Qilin.Element.remToPx(1)    // 16
Qilin.Element.remToPx(2)    // 32

---

pxToRem(px)

将 px 单位转换为 rem 单位。

参数

参数	类型	必填	说明
px	Number	是	px 数值

返回值

Number - rem 数值

---

stringToDom(HTMLString)

将字符串类型的 DOM 转换为 DOM 元素节点。

参数

参数	类型	必填	说明
HTMLString	String	是	字符串类型的 DOM

返回值

Element | HTMLCollection - DOM 元素节点或节点集合

示例

const el = Qilin.Element.stringToDom('<div class="box">hello</div>')
// 单个元素返回 Element
const els = Qilin.Element.stringToDom('<span>a</span><span>b</span>')
// 多个元素返回 HTMLCollection

---

getNodeWidth(element)

获取某个元素的总宽度（包含滚动内容）。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认整个页面

返回值

Number - 元素总宽度

---

getNodeHeight(element)

获取某个元素的总高度（包含滚动内容）。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认整个页面

返回值

Number - 元素总高度

---

getNodeContentWidth(element)

获取某个元素的内容宽度（不含 padding）。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认 body

返回值

Number - 内容宽度

---

getNodeContentHeight(element)

获取某个元素的内容高度（不含 padding）。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认 body

返回值

Number - 内容高度

---

getNodeScrollTop(element)

获取某个元素在 Y 轴上的滚动距离。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认窗口

返回值

Number - 滚动距离

---

getNodeScrollLeft(element)

获取某个元素在 X 轴上的滚动距离。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认窗口

返回值

Number - 滚动距离

---

setNodeScrollTop(element, number, time)

设置某个元素在 Y 轴上的滚动距离。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认窗口
number	Number	否	滚动距离，默认 0
time	Number	否	动画持续时间，默认 0（无动画）

返回值

Promise - 滚动完成后 resolve

示例

// 立即滚动到顶部
Qilin.Element.setNodeScrollTop(el, 0)

// 带动画滚动
Qilin.Element.setNodeScrollTop(el, 0, 500).then(() => {
  console.log('滚动完成')
})

---

setNodeScrollLeft(element, number, time)

设置某个元素在 X 轴上的滚动距离。

参数

同 setNodeScrollTop

---

TriggerScrollTopOrBottom(element, callback)

监听某个元素滚动至顶部或底部的事件。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认窗口
callback	Function	是	回调函数，接收 { state: 'top'|'bottom', target }

示例

Qilin.Element.TriggerScrollTopOrBottom(el, (options) => {
  if (options.state === 'top') {
    console.log('滚动到顶部')
  } else {
    console.log('滚动到底部')
  }
})

---

getNodeBounding(element)

获取某个元素距离可视窗口的位置。

参数

参数	类型	必填	说明
element	Element/String	否	元素节点或选择器，默认 body

返回值

Object - { top, bottom, left, right }

示例

const pos = Qilin.Element.getNodeBounding('.box')
// { top: 100, bottom: 200, left: 50, right: 300 }