节点

Kraken 提供了大部分 W3C(whatwg)标准的节点相关 API 实现。 以下列出目前已经支持的 API 及其属性与方法,详细文档请参考标准。


Node

接口说明

Node 接口是诸如 ElementDocumentDocumentFragment 所基于的抽象基类,提供了一些通用的属性和方法。

继承关系:NodeEventTarget

属性

  • childNodes NodeList 只读
    返回一个包含了该节点所有子节点的实时的 NodeList。NodeList 是动态变化的。如果该节点的子节点发生了变化,NodeList 对象就会自动更新。

  • firstChild Node 只读
    返回该节点的第一个子节点 Node,如果该节点没有子节点则返回 null。

  • lastChild Node 只读
    返回该节点的最后一个子节点 Node,如果该节点没有子节点则返回 null。

  • previousSibling Node 只读
    返回当前节点同辈的前一个节点 Node,如果该节点不存在则返回 null。

  • nextSibling Node 只读
    返回当前节点同辈的后一个节点 Node,如果该节点不存在则返回 null。

  • parentNode Node 只读
    返回当前节点的父节点 Node,如果该节点不存在则返回 null。

  • parentElement Element 只读
    返回当前节点的父节点 Element,如果该节点不存在则返回 null。

  • nodeName String 只读
    返回当前节点的名称。如果节点是 Element,则等同于 Element.tagName 属性的值。

  • nodeType Enum(Number) 只读
    返回一个与该节点类型对应的无符号短整型的值。

  • nodeValue String
    返回或设置当前节点的值。

方法

  • hasChildNodes
    返回一个布尔值,来表示该元素是否包含有子节点。

  • contains
    返回一个布尔值,来表示传入的节点是否为该节点的后代节点。

  • cloneNode
    返回一个布尔值,来表示该元素是否包含有子节点。

  • isEqualNode
    判断两个节点是否相等。当两个节点的类型、内容和属性相同,这两个节点就是相等的。

  • isSameNode
    判断两个节点是否相同。也就是是否引用同一个对象。

  • insertBefore
    在参照节点之前插入一个新节点,如果新节点已存在,则做位置移动。

  • appendChild
    将一个节点添加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中,那么只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。

  • removeChild
    从父节点中删除一个指定的子节点。被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的 DOM 树中,因此,你还可以把这个节点重新添加回文档中。

  • replaceChild
    用指定的节点替换当前节点的一个子节点,并返回被替换掉的节点。

参考


Element

接口说明

Element 是一个通用性非常强的节点基类,绝大部分的节点都继承于此,如 div、img。

继承关系:ElementNodeEventTarget

属性

  • attributes NamedNodeMap 只读
    返回一个与该元素相关的所有属性集合 NamedNodeMap。

  • id String
    返回或设置元素的 id。

  • className Node
    返回或设置元素的 class。

  • tagName String 只读
    返回当前元素的标签名。

  • clientHeight Number 只读
    返回当前元素的内部高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

  • clientWidth Number 只读
    返回当前元素的内部宽度(单位像素),包含内边距,但不包括垂直滚动条、边框和外边距。

  • scrollHeight Number 只读
    返回当前元素的滚动高度(单位像素),包含内边距、由于溢出导致的视图中不可见内容,但不包括水平滚动条、边框和外边距。

  • scrollWidth Number 只读
    返回当前元素的滚动宽度(单位像素),包含内边距、由于溢出导致的视图中不可见内容,但不包括垂直滚动条、边框和外边距。

  • scrollTop Number
    返回或设置元素垂直滚动的距离(单位像素)。

  • scrollLeft Number
    返回或设置元素水平滚动的距离(单位像素)。

方法

  • getAttribute
    返回元素指定属性的属性值。如果指定的属性不存在,则返回 null。

  • hasAttribute
    返回一个布尔值,来表示改元素是否包含有指定的属性。

  • setAttribute
    设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性。

  • removeAttribute
    从指定的元素中删除一个属性。

  • getBoundingClientRect
    回元素的大小及其相对于视口的位置。

  • getElementsByTagName
    返回一个动态的包含所有指定 tagName 的元素的 HTML 集合 HTMLCollection。注意只有 element 的后代元素会被搜索,不包括元素自己。

  • insertAdjacentElement
    将一个指定元素节点插入到被调用元素的给定位置。

  • scrollBy
    将元素的内容滚动一段特定距离。

  • scrollTo
    将元素的内容滚动到相对元素的指定坐标位置。

参考


HTMLElement

接口说明

HTMLElement 接口适用于所有 HTML 元素。由于比较常用的 offsetHeightoffsetTop 等属性在 W3C 规范中是在该接口实现,因而标准容器规范决定纳入 HTMLElement 接口。

继承关系:HTMLElementElementNodeEventTarget

属性

  • offsetHeight Number 只读
    返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

  • offsetWidth Number 只读
    返回该元素的像素宽度,宽度包含该元素的水平内边距和边框,且是一个整数。

  • offsetTop Number 只读
    返回当前元素相对于其 offsetParent 元素的上边界内边距的距离。

  • offsetLeft Number 只读
    返回当前元素相对于其 offsetParent 元素的左边界内边距的距离。

方法

参考


Text

接口说明

Text 接口表示 Element 的文本内容。

继承关系:TextNodeEventTarget

构造函数

Text()

创建并返回一个 Text 对象。

  1. const text = new Text(str);

入参

  • str String
    文本内容。

属性

参考