02-Node接口

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)	替换当前节点为一组节点，无返回值；若参数是字符串会自动转化为文本节点