03-DOM – nobility blog

DOM

共有六种文档节点，所有节点都继承自Node接口，所以有一些共同的属性和方法；当一个节点是父节点时还会继承ParentNode接口，只有文档节点和元素节点才能成为父节点；当一个节点是子节点时还会继承ChildNode接口，除拉文档节点都可能成为子节点

Document：整个文档树的顶层节点
DocumentType：doctype文档声明标签元素节点
Element：网页的各种HTML标签
Attr：HTML标签的属性
Text：标签之间或标签包含的文本
Comment：注释

Node接口

静态属性

属性名	属性值	描述
`Node.DOCUMENT_NODE`	9	文档节点
`Node.DOCUMENT_TYPE_NODE`	10	文档声明标签元素节点
`Node.ELEMENT_NODE`	1	HTML元素节点
`Node.ATTRIBUTE_NODE`	2	HTML标签的属性节点
`Node.TEXT_NODE`	3	文本节点
`Node.COMMENT_NODE`	8	注释节点

实例属性

节点信息属性

属性名	描述
`Node.prototype.nodeType`	该节点的类型，对应`Node`的静态常量属性
`Node.prototype.nodeName`	该节点的节点名；文档节点=`#docment`，文档声明节点=文档类型，HTML元素节点=大写的标签名，HTML属性节点=属性名，文本节点=`#text`，注释节点=`#comment`
`Node.prototype.nodeValue`	该节点的文本值，可读写；注意：只有属性节点、文本节点和注释节点有文本值，其他一律返回`null`，自动转义HTML标签
`Node.prototype.textContent`	该节点的和他所有后代节点的文本值，可读写，会忽略标签，自动转义HTML标签
`Node.prototype.baseURI`	该网页的绝对路径，若设置了base标签则返回base的URL值
`Node.ownerDocument`	返回顶层文档对象，即`document`对象，`docment`对象已经是顶层对象了，所以会返回`null`

节点位置属性

属性名	描述
`Node.prototype.nextSibling`	该节点后的一个兄弟节点，没有则是`null`
`Node.prototype.previousSibling`	该节点前一个兄弟节点，没有则是`null`
`Node.prototype.parentNode`	该节点的父节点，没有则是`null`；从DOM树可以看出父节点永远不可能是属性节点、文本节点和注释节点；若该节点未插入到DOM树中时父节点就是`null`，顶层文档对象没有父节点也是`null`
`Node.prototype.parentElement`	该节点的父元素节点，没有则是`null`，与`parentNode`不同的是只会是元素节点，不会是文档节点
`Node.prototype.firstChild`	该节点的第一个子节点，没有则是`null`；不会是属性节点
`Node.prototype.lastChild`	该节点的最后一个子节点，没有则是`null`；不会是属性节点
`Node.prototype.childNodes`	以`NodeList`结构存储着该节点所有子节点，但不包括属性节点
`Node.prototype.isConnected`	判断该节点是否插入到DOM树中

实例方法

子节点增删改查操作

方法名	描述
`Node.prototype.hasChildNodes()`	判断当前节点是否有子节点，但不包括属性节点
`Node.prototype.cloneNode(flag)`	返回当前节点的克隆节点，当`flag`为`true`时会克隆子节点
`Node.prototype.contains(node)`	判断当前节点是否包含`node`节点；包括当前节点本身、子节点和后代节点都会返回`true`
`Node.prototype.appendChild(node)`	将`node`节点，在自己子节点的最后追加，并返回插入的节点
`Node.prototype.insertBefore(newNode,childNode)`	将`newNode`插入到该节点的子节点`childNode`之前，并返回插入的节点；若`childNode`不是子节点就会报错，若为`null`会插入到最后
`Node.prototype.removeChild(childNode)`	将该节点中的`childNode`子节点删除并返回
`Node.prototype.replaceChild(newChild,oldChild)`	将该子节点中的`oldChild`替换为`newChild`，并返回`oldChild`

其他操作

方法名	描述
`Node.prototype.isEqualNode(node)`	判断该节点是否与`node`相同，即节点类型、属性、子节点都相同
`Node.prototype.isSameNode(node)`	判断该节点与`node`是同一个节点
`Node.prototype.getRootNode()`	获取顶层顶层文档对象，即`document`对象，对于`document`来说不会返回`null`
`Node.prototype.normalize()`	合并该节点中子节点是相邻的文本节点

ParentNode接口

实例属性

属性名	描述
`ParentNode.children`	以`HTMLCollection`结构存储着该节点所有子元素节点
`ParentNode.firstElementChild`	该节点的第一个子元素节点，没有则是`null`；不会是属性节点
`ParentNode.lastElementChild`	该节点的最后一个子元素节点，没有则是`null`；不会是属性节点
`ParentNode.childElementCount`	该节点的元素子节点个数

实例方法

方法名	描述
`ParentNode.append(...node)`	在当前节点的父节点最后插入一组节点，无返回值；若参数是字符串会自动转化为文本节点
`ParentNode.prepend(...node)`	在当前节点的父节点最前插入一组节点，无返回值；若参数是字符串会自动转化为文本节点
`ParentNode.querySelector(selector)`	返回以当前元素为根元素匹配给定选择器的第一个元素
`ParentNode.querySelectorAll(selector)`	返回以当前元素为根元素匹配给定选择器的所有元素以`NodeList`形式存储

ChildNode接口

方法名	描述
`ChildNode.remove()`	删除当前节点，无返回值
`ChildNode.before(...node)`	在当前节点前面插入一组节点，无返回值；若参数是字符串会自动转化为文本节点
`ChildNode.after(...node)`	在当前节点后面插入一组节点，无返回值；若参数是字符串会自动转化为文本节点
`ChildNode.replaceWith(...node)`	替换当前节点为一组节点，无返回值；若参数是字符串会自动转化为文本节点

NodeList接口和HTMLCollection接口

都是存储多个节点的数据结构，主要区别是NodeList可以包含各种类型的节点，HTMLCollection只能包含HTML元素节点

NodeList接口

由Node.prototype.childNodes属性和ParentNode.querySelectorAll(selector)方法获得的节点集合就是这种数据结构

该集合是一个伪数组结构，拥有length属性和数组下标，同时还拥有数组的forEach()方法和ES6的遍历接口，若还想使用其他数组的方法就需要将该集合转化为真正的数组

HTMLCollection接口

由ParentNode.children属性、document对象的集合属性和部分document选择器方法获得的节点集合就是这种数据结构

该集合是一个伪数组结构，拥有length属性和数组下标，此外没有数组的任何方法，若想使用数组方法就需要将该集合转化成真正的数组，但是拥有一个特殊的取得元素的方法

方法名	描述
`HTMLCollection.prototype.namedItem(id)`	返回具有该`id`或`name`值的元素

document节点

document对象继承了EventTarget接口、Node接口和ParentNode接口

实例属性

快捷元素选择属性

方法名	描述
`document.doctype`	文档声明节点
`document.documentElement`	HTML根元素
`document.body`	body元素节点
`document.head`	head元素节点
`document.activeElement`	当前获得焦点的元素节点
`document.fullscreenElement`	当前全屏状态的元素节点

节点集合属性

属性名	描述
`document.links`	以`HTMLCollection`结构存储着页面设置了`href`属性的`a`标签节点
`document.forms`	以`HTMLCollection`结构存储着页面中的`form`表单元素节点
`document.images`	以`HTMLCollection`结构存储着页面中的`img`图片元素节点
`document.embeds`	以`HTMLCollection`结构存储着页面中的`embed`标签节点
`document.scripts`	以`HTMLCollection`结构存储着页面中的`script`标签节点
`document.styleSheets`	以`HTMLCollection`结构存储着页面中的`style`标签节点

文档信息属性

属性名	描述
`document.URL`	存储当前文档`URL`地址
`document.title`	存储着文档标题
`document.characterSet`	存储着文档字符编码
`document.referrer`	存储着文档访问者来着那里
`document.cookie`	存储着文档的`cookie`信息

实例方法

选择元素方法

方法名	描述
`document.getElementsByTagName(tag)`	标签选择器，以`HTMLCollection`形式返回所有选中的标签元素
`document.getElementsByClassName(className)`	类名选择器，以`HTMLCollection`形式返回所有选中的标签元素
`document.getElementsByName(name)`	name选择器，选择具name属性并且是该选择器值的标签元素
`document.getElementById(id)`	id选择器，选择具有id属性并且是该选择器值的标签元素

创建元素方法

方法名	描述
`document.createElement(tag)`	创建元素节点，包括自定义标签；就是标签名不要加尖括号，否则会报错
`document.createTextNode(str)`	创建文本节点，会自动转义HTML标签
`document.createAttribute(attr)`	创建属性节点
`document.createComment(com)`	创建注释节点
`document.createEvent(event)`	创建事件对象

element节点

HTML元素对象继承了Node接口、ParentNode接口和ChildNode接口，以及EventTarget事件接口，对于一下特殊的HTML元素对象还有自己独特的属性和方法

属性操作

属性

属性名	描述
`Element.attributes`	以`NamedNodeMap`结构存储着所有属性节点对象，`NamedNodeMap`是一个伪数组结构，既可以使用数组下标也可以使用key获得属性对象，属性对象也继承`Node`接口，所以可以使用`nodeValue`属性修改属性值，`nodeName`属性获取属性名
`Element.dataset`	以`data-`为前缀的自定义属性集合，自定义属性命名必须使用中划线分隔多个单词，不能使用驼峰命名法，到js中会被自动转义成驼峰命名法

方法

方法名	描述
`Element.getAttribute(name)`	根据属性名获取属性值，没有返回`null`
`Element.getAttributeNames()`	获取所有属性名的数组
`Element.setAttribute(key,value)`	设置属性名和属性值
`Element.hasAttribute(name)`	根据属性名判断是否有该属性
`Element.hasAttributes()`	判断是否有属性
`Element.removeAttribute(name)`	根据属性名删除属性

CSS操作

属性名	描述
`Element.className`	以字符串形式存储`class`属性的属性值
`Element.classList`	以`DOMTokenList`数据结构存储着每个`class`的属性值
`Element.style`	以`CSSStyleDeclaration`数据结构存储着css内敛样式；`CSSStyleDeclaration`数据结构以对象形式存储着各个css的属性值和属性名，只不过属性名从中划线连接变成了驼峰命名法

DOMTokenList接口

该集合是一个伪数组结构，拥有length属性和数组下标，同时还拥有一个value属性以字符串形式存储class属性值

实例方法

方法名	描述
`DOMTokenList.prototype.add(className)`	添加一个类名，无返回值
`DOMTokenList.prototype.add(className)`	删除一个类名，无返回值
`DOMTokenList.prototype.contains(className)`	判断是否有该类名
`DOMTokenList.prototype.replace(oldClass,newClass)`	将旧的类名替换为新的类名
`DOMTokenList.prototype.toggle(className)`	切换该类名，有就移除，没有就添加

CSSStyleDeclaration接口

以对象形式存储着所有的css属性，这些属性名采用驼峰命名法存储，若未设置这些属性则就是空字符串，若是获取不存在的css属性才会返回undefined

实例属性

属性名	描述
`CSSStyleDeclaration.prototype.cssText`	内敛样式文本属性内容
`CSSStyleDeclaration.prototype.length`	设置样式的个数

实例方法

方法名	描述
`CSSStyleDeclaration.prototype.getPropertyPriority(property)`	获取该css属性的优先级，若是`important`就返回该字符串，否则就是空字符串
`CSSStyleDeclaration.prototype.getPropertyValue(property)`	获取该css属性的属性值
`CSSStyleDeclaration.prototype.removeProperty(property)`	删除该css属性的属性值
`CSSStyleDeclaration.setProperty(property,value[,important])`	设置该css属性为该属性值，可以指定`important`

文本操作

属性名	描述
`Element.innerHTML`	元素内部的HTML代码
`Element.outerHTML`	整个元素的HTML代码
`Element.innerText`	与`Node.prototype.textContent`效果一样，建议使用`Node`接口中的标准方法

节点操作

这两个方法其实是继承的NonDocumentTypeChildNode接口方法

属性名	描述
`Element.nextElementSibling`	下一个兄弟元素节点
`Element.previousElementSibling`	上一个兄弟元素节点

盒模型属性

这些属性返回的都是整数，小数会被四舍五入掉，除拉设置滚动的位置的属性之外都是只读属性

client

方法名	描述
`Element.clientHeight`	元素的高度 $内容+padding$ ，仅对块元素有效，行内元素永远是0
`Element.clientWidth`	元素的宽度 $内容+padding$ ，仅对块元素有效，行内元素永远是0
`Element.clientLeft`	左边框宽度
`Element.clientTop`	上边框宽度

scroll

属性名	描述
`Element.scrollHeight`	元素总高度 $内容+padding$ ，包括溢出内容部分
`Element.scrollWidth`	元素总高度 $内容+padding$ ，包括溢出内容部分
`Element.scrollLeft`	当前元素内容水平向右滚动的距离，可读写
`Element.scrollTop`	当前元素内容垂直向下滚动的距离，可读写，为整个网页设置要使用HTML根元素
`Element.scrollIntoView()`	这是一个方法，使当前元素滚动到可视区位置

offset

属性名	描述
`Element.offsetParent`	最近开启定位的祖先元素
`Element.offsetHeight`	元素高度 $内容+padding+border$
`Element.offsetWidth`	元素宽度 $内容+padding+border$
`Element.offsetLeft`	元素左偏移量
`Element.offsetTop`	元素上偏移量

事件操作

为元素节点的事件属性绑定监听函数，这些属性名都是与HTML的事件属性是一致的，唯一不同的是js中绑定的是事件监听函数，而HTML是绑定执行的js语句，这种方式若绑定多个会被覆盖掉

方法名	描述
`Element.focus()`	触发该元素的获得焦点事件，焦点会移入到当前元素
`Element.blur()`	触发该元素的失去焦点事件，焦点会移开到当前元素
`Element.click()`	触发该元素的点击事件

文本节点

实例属性

属性名	描述
`Text.prototype.data`	文本节点的文本内容
`Text.prototype.length`	文本节点的文本内容长度
`Text.prototype.wholeText`	文本节点的文本内容，相邻的两个文本节点会合并成一个文本内容，但是节点不会合并
`Text.nextElementSibling`	下一个兄弟元素节点
`Text.previousElementSibling`	上一个兄弟元素节点

实例方法

这些方法都没有返回值

方法名	描述
`Text.prototype.appendData(str)`	文本节点后追加字符串
`Text.prototype.deleteData(start,length)`	删除文本节点子串，从`start`开始，删除`length`个字符
`Text.prototype.insertData(start,str)`	插入文本子节点内容，在`start`位置，插入`str`
`Text.prototype.replaceData(start,length,str)`	替换文本节点内容，从`start`开始，删除`length`个字符，并将删除部分替换为`str`
`Text.prototype.subStringData(start,length)`	返回文本节点子串，，从`start`开始，`length`个字符的子串
`Text.prototype.remove()`	删除当前文本节点
`Text.prototype.splitText(start)`	从`start`位置开始将该文本节点分为两个文本节点