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标签（<!DOCTYPE html>）-----------------------文档类型节点10
C.Element 网页的各种html标签（<body> <a>）---------------------------元素节点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返回节点的文本值 可读可写
<div id="div">hello word</div>
var div = document.getElementById("div")
div.nodeValue//null
div.firstChild.nodeValue
只有文本节点有
7.节点的属性 textContent
textContent返回当前的节点和他所有后代节点的文本。忽略标签。
<div id=”div”>我是<span>span</span></div>
Document.getElementById(‘div’).textContent //我是span
同样也是一个可读可写的属性。如果写入的内容包含标签，也会把标签当成文本
div.textContent=’<p>我是p</p>’
8.节点的属性 nextSibling
NextSibling返回当前节点的下一个兄弟节点（同级标签）
<div id=’d1’>hello</div> <div id=’d2’>word</div>
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
网友评论