Element

element 是文档中的基类，所有Document对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性

Element继承了Node接口

属性类

attributes 返回和元素相关的属性集合NamedNodeMap
classList 返回一个可操作类名的对象
getAttribute 获取元素上指定的属性值
getAttributeNames 返回元素所有的属性名称
hasAttribute 查看元素是否包含指定的属性
hasAttributeNs 知识该元素是否包含有指定的属性
removeAttribute 从指定的元素中删除一个属性
removeAttributeNs 移除元素的指定属性
setAttribute 设置指定元素上的某个属性值，如果已存在则更新该值，否则使用指定的名称和值添加
setAttributeNs 添加一个新属性火更改具有给定命名空间和名称的一个属性的值
toggleAttrbute 切换给定元素的某个布尔值属性的状态。如果属性不存在就添加，存在就删除

视口类

clientHeight 表示内部相对于外层元素的高度
clientLeft 表示元素距离它左边届的宽度
clientTop 表示元素距离它上边界的高度
clientWidth 表示该元素内部的宽度
scrollHeight 表示元素的滚动视图高度
scrollLeft 表示元素横向滚动条距离最左的位移
scrollTop 表示该元素纵向滚动条距离
scrollWidth 表示元素的滚动视图宽度

移动类

鼠标拖动

插入删除类

after 在元素后面的第一个位置插入新元素或多个新元素
before 在元素前面的第一个位置插入新元素或多个新元素
append 在元素的最后一个子节点插入一组node对象或者DomString。
- append 可以增加DomString对象，appendChild 只能接受Node对象 #Tex
- append 没有返回值， append返回追加的node对象
- append 可以追加多个节点和字符串， appendChid 只能追加一个节点
remove 删除元素
insertAdjacentText 将一个个顶的文本节点插入在相对于被调用的元素给定的位置
insertAdjacentElement 将一个给定的元素节点插入到相对于被调用的元素给定的位置
insertAdjacenetHTML 将文本解析为elemtn元素，并将结果节点插入都DOM树中的指定位置，不会重新解析它正在使用的元素，不会破坏元素内的现有元素，避免了额外的序列化步骤，比innerHTML操作更快
- ‘beforebegin’：元素自身的前面。
- ‘afterbegin’：插入元素内部的第一个子节点之前。
- ‘beforeend’：插入元素内部的最后一个子节点之后。
- ‘afterend’：元素自身的后面。

Node

node是一个接口，各种类型的DOM APi对象都继承自该借口。

访问类

firstChild 返回第一个子节点Node，如果没有则返回null。第一个子节点一般是一个#Text 节点
firstElementChild 返回第一个节点类型为1的节点
lastChild 返回最后一个节点，可能是#Text， 如果没有返回null
lastElementChild 返回最后一个节点类型为1的节点
nextSibling 返回该节点同级的下一个节点Node，如果没有返回null，可能是#Text
nextElementSibling 返回该节点同级的下一个第一个节点类型为1的节点
previousSibling 返回同级节点的前一个节点。可能是#Text， 如果没有返回null
previousElementSibling 返回该节点同级的前一个节点Node，如果没有返回null，可能是#Text
parentNode 返回dom树中的父节点
parentElement 返回Dom树中的type为1的节点
nodeType 1 = 为ELEMENT_NODE 2 = TEXT_NODE 8 COMMENT_NODE

插入删除类

appendChild 将指定的childNode参数作为最后一个子节点添加到当前节点。如果存在dom树中，先从树中移除在添加
cloneNode 克隆一个Node，可选克隆节点下所有内容，默认为所有
hasChidNodes 表示该元素是否包含有子节点
insertBefore 在当前节点下增加一个子节点。并使该节点位于参考节点的前面
removeChild 移除当前字节的一个子节点。这个子节点必须存在当前节点中
replaceChild 对参考节点替换子节点为另一个节点

子类

HTMLCollection 该接口表示一个包含了元素的通用集合，提供了用于选择元素的方法和属性
该集合是实时更新的 不会包含文本节点 。 通常由 Element。children属性， getElementByTagName方法获取
NodeList nodeList对象是节点的集合，通常由childNodes属性是nodeList的实例， 该集合是实时集合，会包含文本节点
如果是querySelectorAll 获取的NodeList集合就是静态的，对文档模型的变动都不会影响集合内容

EventTarget

event是一个dom接口，可以接受事件创建侦听器。
addEventListenner 添加时间侦听。

  • capture 表示该类型的事件捕获阶段传播到该eventTarget
  • once 只调用一次
  • passive 永远不会调用
  • signal AbortSignal abort方法被调用时， 监听器会被移除

removeEventListenner 移除一个事件侦听器。
dispatchEvent派发事件

CustomEvent

该事件有程序创建，可以有任意自定义功能的事件

  1. // 添加一个适当的事件监听器
  2. el.addEventListener("evl1", function(e) { process(e.detail) })
  4. // 创建并分发事件
  5. let event = new CustomEvent("evl1", {"detail":{"hazcheeseburger":true}})
  6. el.dispatchEvent(event)

Document

表示任何在浏览器中载入的网页，是网页内容的入口，也就是dom树的根。

是doument对象的构造函数

DOMparser

可以将存储在字符串中的XML或HTM源代码解析为一个DOM Document

也可以使用XMLSerializer接口执行相反的操作

let doc = domparser.parseFromString(string, mimeType)
let parser = new DOMParser(),
    doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

// string 需要解析的源字符串
/*
mimeType
mimeType    doc.constructor
text/html    Document
text/xml    XMLDocument
application/xml    XMLDocument
application/xhtml+xml    XMLDocument
image/svg+xml    XMLDocument

*/

//serializeToString 解析element到源字符串

let inp = document.createElement('input');
let XMLS = new XMLSerializer();
let inp_xmls = XMLS.serializeToString(inp); // 先将一个 DOM 节点转换为字符串。

// 将新建的节点添加到 DOM 中。
document.body.insertAdjacentHTML('afterbegin', inp_xmls);

继承图
image.png