DOM属性总结

1. nodeType
作用：返回一个整数值，代表节点类型
首先来总结一下关于nodeType的种类

• 元素节点(element),对应常量Node.ELEMENT_NODE. 1

• 属性节点(attribute node)，对应常量Node.ATTRIBUTE_NODE. 2

• 文本节点(text node),对应常量Node.TEXT_NODE.文本节点既包括空格也包括换行 3

• 文档节点(document node)对应常量Node.DOCUMENT_NODE. 9

• 文档片段节点(document fragment node)对应常量 11
  Node.DOCUMENT_FRAGMENT_NODE.

• 注释节点(comment node)对应常量Node.COMMENT_NODE. 8

• 文档类型节点(documentType node),对应常量Node.DOCUMENT_TYPE_NODE. 10

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.