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.
网友评论