DOM（1）node的属性

        DOM

node 节点 attribute 属性 comment注释
1. 什么是 DOM？
Dom是js操作网页的接口，全称为“文档对象模型”（Document Object Model）
2.DOM树：浏览器会根据Dom模型，将结构化文档（html）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）

3.节点 node
DOM的最小组成单位就是node 文档的树形结构（DOM树）就是由各种不同类型的节点组成，每个节点可以看作文档树的一片叶子。

4.节点的7种类型 nodeType
A.Document整个文档树的顶层节点------------------------------------------------文档节点9
B.DocumentType标签（）-----------------------文档类型节点10
C.Element 网页的各种html标签（ ）---------------------------元素节点1
D.Attribute 网页元素的属性（例如class=“a” src=“img.png”）------属性节点2
E.Text 标签之间或标签包含的文本-------------------------------------------------文本节点3
F.Comment 注释--------------------------------------------------------------------------注释节点8
G.DocumentFragment 文档的片段 //不常用---------------------------------文档片断节点11

5.节点的属性 nodeName
A.文档节点---------------------------#document
B.文档类型节点--------------------文档的类型
C.元素节点--------------------------大写的标签名
D.属性节点--------------------------属性的名称
E.文本节点---------------------------#text
F.注释节点---------------------------#comment
G.文档片断节点--------------------#document-fragment

6.节点的属性nodeValue
nodeValue返回节点的文本值 可读可写

hello word
var div = document.getElementById("div")
div.nodeValue//null
div.firstChild.nodeValue

只有文本节点有

7.节点的属性 textContent
textContent返回当前的节点和他所有后代节点的文本。忽略标签。

我是span
Document.getElementById(‘div’).textContent  //我是span

同样也是一个可读可写的属性。如果写入的内容包含标签，也会把标签当成文本

div.textContent=’
我是p
’

8.节点的属性 nextSibling
NextSibling返回当前节点的下一个兄弟节点（同级标签）

hello
 
word
Var div1 = document.getElementById(‘div1’)
Var div2 = document.getElementById(‘div2’)

注意：换行符会影响结果（回车）
如果不存在下一个兄弟节点 则会返回一个null

遍历所有节点

var el = document.getElementById(‘div1’).firstChild
while(el!==null){
console.log(el.nodeName)
el=el.nextSibling
}

9.节点的属性parrntNade
返回当前节点的父级节点。只可能是document文档节点或元素节点

10.节点的属性 parentElement
返回当前节点的父级元素节点。没有返回null

11.节点的属性 firstChild lastChild
firstChild返回当前节点中的第一个子节点
lastChild 返回当前节点中的最后一个子节点
没有则返回null

12.节点的属性 childNodes
childNodes返回当前节点的所有子节点。
是一个nodelist数据

2018-7-17