1. nodeType
作用: 返回一个整数值, 代表节点类型
首先来总结一下关于 nodeType 的种类
文档节点 (document node) 对应常量 Node.DOCUMENT_NODE.
属性节点(attribute node), 对应常量 Node.ATTRIBUTE_NODE.
文本节点(text node), 对应常量 Node.TEXT_NODE. 文本节点既包括空格也包括换行
元素节点(element), 对应常量 Node.ELEMENT_NODE.
文档片段节点 (document fragment node) 对应常量
- Node.DOCUMENT_FRAGMENT_NODE
- .
注释节点 (comment node) 对应常量 Node.COMMENT_NODE.
文档类型节点(documentType node), 对应常量
- Node.DOCUMENT_TYPE_NODE
- .
image.PNG
image.PNG
2. nodeName
作用: 返回当前节点名称
文档节点的 nodeName 就是 #document
属性节点的 nodeName 是属性名称
文本节点的 nodeName 是 #text
元素节点的 nodeName 是大写的标签
注释节点的 nodeName 是 #comment
文档类型的 nodeName 是文档类型
文档片段节点的 nodeName 是 #document_fragment
image.PNG
3.nodeValue
作用: 返回一个字符串, 表示当前节点的文本值
文本节点的 nodeValue 是该文本内容
注释节点的 nodeValue 是该注释的文本值, 就是你的注释
属性节点的 nodeValue 是该属性的名称
其他节点的 nodeValue 是 null
image.PNG
4.textContent
作用: 返回当前节点和其子节点的所有内容
"=" 是替换, 如果前面的字符串非空, 就直接替换为'='后边的内容. 如果前面字符串是空的, 此时 "=" 相当于 "+", 起连接作用
"+" 是连接, 把后边的内容直接给连接到前面内容里边
image.PNG
5.baseURL
作用: 返回当前页面的一个网址 URL
随便一个网站里面, 先鼠标右键, 选择检查元素, 再在控制台输入 console.log(document.baseURL)回车键即可.
这是我在小米官网里面输入的返回的网址, 然后再控制台点击这个网址, 你会发现会直接跳到原网页
image.PNG
6.nextSibling
作用: 返回当前节点的后面紧跟着的第一个同级节点, 如果该节点没有同级节点返回 null
image.PNG
image.PNG
其实这两张图里面的代码一样, 只不过第一个 id 为 e2 和 id 为 hi 的 demo 连接在一起, 而第二张图里面没有连接在一起, 导致里面产生一个文本节点使得 id 为 e2 和 id 为 hi 的节点没有 "紧跟" 的关系, 因此结果为 false
7.previousSibling
作用: 返回当前节点前面相邻的第一个同级节点, 如果该节点没有同级节点返回 null
image.PNG
image.PNG
这个问题跟上面的问题是一个类型, 文本节点包括空格和换行
8.ownerDocument
作用: 返回当前节点的顶级节点, 如果没有返回 null
image.PNG
9.parentElement
作用: 返回当前元素的父元素节点, 如果其没有父元素节点或者其父节点类型不是元素节点返回 null
image.PNG
10.parentNode
作用: 返回当前元素的父节点. 文档节点和文档片段节点都是 null
image.PNG
image.PNG
11.firstChild lastChild
image.PNG
id 为 bod 的第一个儿子是 id 为 hello 的, 最后一个儿子是 id 为 e2 的
12.childNodes
作用: 返回一个节点数组, 该数组里面包含的是当前节点的所有子节点
image.PNG
image.PNG
13.isConnected
作用: 返回一个布尔值, 判断当前节点是否在文档中
image.PNG
在该代码中, span 不属于该节点, 因此返回 false, 当插入节点之后, 返回 true.
来源: http://www.jianshu.com/p/cdc311d5f7d7