节点
Kraken 提供了大部分 W3C(whatwg)标准的节点相关 API 实现。 以下列出目前已经支持的 API 及其属性与方法,详细文档请参考标准。
Node
接口说明
Node
接口是诸如 Element
、Document
、DocumentFragment
所基于的抽象基类,提供了一些通用的属性和方法。
继承关系:Node
→ EventTarget
属性
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。
继承关系:Element
→ Node
→ EventTarget
属性
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 元素。由于比较常用的 offsetHeight
、offsetTop
等属性在 W3C 规范中是在该接口实现,因而标准容器规范决定纳入 HTMLElement
接口。
继承关系:HTMLElement
→ Element
→ Node
→ EventTarget
属性
offsetHeight
Number 只读
返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。offsetWidth
Number 只读
返回该元素的像素宽度,宽度包含该元素的水平内边距和边框,且是一个整数。offsetTop
Number 只读
返回当前元素相对于其 offsetParent 元素的上边界内边距的距离。offsetLeft
Number 只读
返回当前元素相对于其 offsetParent 元素的左边界内边距的距离。
方法
无
参考
Text
接口说明
Text
接口表示 Element
的文本内容。
继承关系:Text
→ Node
→ EventTarget
构造函数
Text()
创建并返回一个 Text 对象。
const text = new Text(str);
入参
str
String
文本内容。
属性
无