DOM （Document Object Model）——文档对象模型
一、对节点的一些了解1、查看元素节点2、遍历节点树3、基于元素节点树的遍历4、节点的属性5、节点的一个方法 Node.hasChildrNodes();6、节点的类型及相对应的数字
二、DOM结构树
一、对节点的一些了解
1、查看元素节点
document 代表整个文档···
document.getElementsByTagName();通过标签名的方式把你这个标签给选出来标签选择器此方法定义在docuement.prototype和Element.prototype上document.getElementsByClassName();返回文档中所有指定类名的元素集合，作为Nodelist对象IE8和IE8以下版本中没有，可以多个class一起在Document.prototype和ELement.prototype类中均有定义document.getElementsByName();只有部分标签name可生效（表单、表单元素、img、ifraem）此方法定义在HTMLDocument.prototype上，即非HTML中的document不能使用（XML document，Element）document.getElementsById();返回对拥有指定Id的第一个对象的引用元素Id在IE8以下的浏览，不区分id的大小写，而且也返回匹配name属性的元素此方法定义在Document.prototype上，即Element节点上不能使用document.querySelector();选出第一个元素在Document.prototype和ELement.prototype类中均有定义document.querySelectorAll();选出一组元素在Document.prototype和ELement.prototype类中均有定义
querySelector和querySelectorAll是CSS选择器， 在IE8之前不兼容，它们有一些缺点：实时性问题，当你已经选出元素之后，无论再怎么修改都与它无关
HTMLDocument.prototype定义了一些常用的属性，body、head分别指代HTML文档中的<body>、<head>标签
当你想选出body或者head标签时，可以直接在控制台写document.body或者document.head即可
Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代元素
当你想选出html标签时，可以直接在控制台写document.documentElement即可
2、遍历节点树
一个元素只有一个父级，有无数个子节点们（直系的）·
parentNode父节点childNodes子节点firstChild / lastChild第一个子节点 / 最后一个子节点previousSibling / nextSibling前一个兄弟节点 / 后一个兄弟节点
3、基于元素节点树的遍历
···
parentElement返回的当前元素额父元素节点 （IE不兼容）children只返回当前元素的元素子节点node.childElementCount === node.children.length当前元素节点的子元素节点个数（IE不兼容）firstElementChild返回的是第一个元素节点（IE不兼容）lastElementChild返回的是最后一个元素节点（IE不兼容）nextElementSibling返回后一个兄弟元素节点（IE不兼容）previousElementSibling返回前一个兄弟元素节点（IE不兼容）
4、节点的属性
（1） nodeName 元素的标签名，以大写形式表示，只读
（2） nodeValue 只有text节点和comment节点有，且展示它的文本内容，可读写
（3） nodeType 判断该节点的类型， 只读取
eg：现在封装一个方法，要求返回div的直接子元素节点，但不允许用children
function retElementChild(node
) {
var temp
= {
length
: 0,
push
: Array
.prototype
.push
,
splice
: Array
.prototypece
},
child
= node
.childNodes
,
len
= child
.length
;
for(var i
= 0; i
< len
; i
++) {
if(child
[i
].nodeType
=== 1) {
temp
.push(child
[i
]);
}
}
return temp
;
}
访问retElementChild(div) 得[strong,span,em,i,b]
（4） attributes 元素节点的属性集合
可以把属性名和属性值都取出来，属性名是只读，属性值可读可写
5、节点的一个方法 Node.hasChildrNodes();
6、节点的类型及相对应的数字
节点类型数字代表
元素节点1属性节点2文本节点3注释节点8document9DocumentFragment11
二、DOM结构树
#mermaid-svg-q1R11zU4OzsC4qpa .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-q1R11zU4OzsC4qpa .label text{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .node rect,#mermaid-svg-q1R11zU4OzsC4qpa .node circle,#mermaid-svg-q1R11zU4OzsC4qpa .node ellipse,#mermaid-svg-q1R11zU4OzsC4qpa .node polygon,#mermaid-svg-q1R11zU4OzsC4qpa .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-q1R11zU4OzsC4qpa .node .label{text-align:center;fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .node.clickable{cursor:pointer}#mermaid-svg-q1R11zU4OzsC4qpa .arrowheadPath{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-q1R11zU4OzsC4qpa .flowchart-link{stroke:#333;fill:none}#mermaid-svg-q1R11zU4OzsC4qpa .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-q1R11zU4OzsC4qpa .edgeLabel rect{opacity:0.9}#mermaid-svg-q1R11zU4OzsC4qpa .edgeLabel span{color:#333}#mermaid-svg-q1R11zU4OzsC4qpa .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-q1R11zU4OzsC4qpa .cluster text{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-q1R11zU4OzsC4qpa .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-q1R11zU4OzsC4qpa text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-q1R11zU4OzsC4qpa .actor-line{stroke:grey}#mermaid-svg-q1R11zU4OzsC4qpa .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-q1R11zU4OzsC4qpa .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-q1R11zU4OzsC4qpa #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-q1R11zU4OzsC4qpa .sequenceNumber{fill:#fff}#mermaid-svg-q1R11zU4OzsC4qpa #sequencenumber{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa #crosshead path{fill:#333;stroke:#333}#mermaid-svg-q1R11zU4OzsC4qpa .messageText{fill:#333;stroke:#333}#mermaid-svg-q1R11zU4OzsC4qpa .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-q1R11zU4OzsC4qpa .labelText,#mermaid-svg-q1R11zU4OzsC4qpa .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-q1R11zU4OzsC4qpa .loopText,#mermaid-svg-q1R11zU4OzsC4qpa .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-q1R11zU4OzsC4qpa .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-q1R11zU4OzsC4qpa .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-q1R11zU4OzsC4qpa .noteText,#mermaid-svg-q1R11zU4OzsC4qpa .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-q1R11zU4OzsC4qpa .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-q1R11zU4OzsC4qpa .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-q1R11zU4OzsC4qpa .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-q1R11zU4OzsC4qpa .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa .section{stroke:none;opacity:0.2}#mermaid-svg-q1R11zU4OzsC4qpa .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-q1R11zU4OzsC4qpa .section2{fill:#fff400}#mermaid-svg-q1R11zU4OzsC4qpa .section1,#mermaid-svg-q1R11zU4OzsC4qpa .section3{fill:#fff;opacity:0.2}#mermaid-svg-q1R11zU4OzsC4qpa .sectionTitle0{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .sectionTitle1{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .sectionTitle2{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .sectionTitle3{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-q1R11zU4OzsC4qpa .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa .grid path{stroke-width:0}#mermaid-svg-q1R11zU4OzsC4qpa .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-q1R11zU4OzsC4qpa .task{stroke-width:2}#mermaid-svg-q1R11zU4OzsC4qpa .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa .taskText:not([font-size]){font-size:11px}#mermaid-svg-q1R11zU4OzsC4qpa .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-q1R11zU4OzsC4qpa .task.clickable{cursor:pointer}#mermaid-svg-q1R11zU4OzsC4qpa .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-q1R11zU4OzsC4qpa .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-q1R11zU4OzsC4qpa .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-q1R11zU4OzsC4qpa .taskText0,#mermaid-svg-q1R11zU4OzsC4qpa .taskText1,#mermaid-svg-q1R11zU4OzsC4qpa .taskText2,#mermaid-svg-q1R11zU4OzsC4qpa .taskText3{fill:#fff}#mermaid-svg-q1R11zU4OzsC4qpa .task0,#mermaid-svg-q1R11zU4OzsC4qpa .task1,#mermaid-svg-q1R11zU4OzsC4qpa .task2,#mermaid-svg-q1R11zU4OzsC4qpa .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-q1R11zU4OzsC4qpa .taskTextOutside0,#mermaid-svg-q1R11zU4OzsC4qpa .taskTextOutside2{fill:#000}#mermaid-svg-q1R11zU4OzsC4qpa .taskTextOutside1,#mermaid-svg-q1R11zU4OzsC4qpa .taskTextOutside3{fill:#000}#mermaid-svg-q1R11zU4OzsC4qpa .active0,#mermaid-svg-q1R11zU4OzsC4qpa .active1,#mermaid-svg-q1R11zU4OzsC4qpa .active2,#mermaid-svg-q1R11zU4OzsC4qpa .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-q1R11zU4OzsC4qpa .activeText0,#mermaid-svg-q1R11zU4OzsC4qpa .activeText1,#mermaid-svg-q1R11zU4OzsC4qpa .activeText2,#mermaid-svg-q1R11zU4OzsC4qpa .activeText3{fill:#000 !important}#mermaid-svg-q1R11zU4OzsC4qpa .done0,#mermaid-svg-q1R11zU4OzsC4qpa .done1,#mermaid-svg-q1R11zU4OzsC4qpa .done2,#mermaid-svg-q1R11zU4OzsC4qpa .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-q1R11zU4OzsC4qpa .doneText0,#mermaid-svg-q1R11zU4OzsC4qpa .doneText1,#mermaid-svg-q1R11zU4OzsC4qpa .doneText2,#mermaid-svg-q1R11zU4OzsC4qpa .doneText3{fill:#000 !important}#mermaid-svg-q1R11zU4OzsC4qpa .crit0,#mermaid-svg-q1R11zU4OzsC4qpa .crit1,#mermaid-svg-q1R11zU4OzsC4qpa .crit2,#mermaid-svg-q1R11zU4OzsC4qpa .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-q1R11zU4OzsC4qpa .activeCrit0,#mermaid-svg-q1R11zU4OzsC4qpa .activeCrit1,#mermaid-svg-q1R11zU4OzsC4qpa .activeCrit2,#mermaid-svg-q1R11zU4OzsC4qpa .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-q1R11zU4OzsC4qpa .doneCrit0,#mermaid-svg-q1R11zU4OzsC4qpa .doneCrit1,#mermaid-svg-q1R11zU4OzsC4qpa .doneCrit2,#mermaid-svg-q1R11zU4OzsC4qpa .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-q1R11zU4OzsC4qpa .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-q1R11zU4OzsC4qpa .milestoneText{font-style:italic}#mermaid-svg-q1R11zU4OzsC4qpa .doneCritText0,#mermaid-svg-q1R11zU4OzsC4qpa .doneCritText1,#mermaid-svg-q1R11zU4OzsC4qpa .doneCritText2,#mermaid-svg-q1R11zU4OzsC4qpa .doneCritText3{fill:#000 !important}#mermaid-svg-q1R11zU4OzsC4qpa .activeCritText0,#mermaid-svg-q1R11zU4OzsC4qpa .activeCritText1,#mermaid-svg-q1R11zU4OzsC4qpa .activeCritText2,#mermaid-svg-q1R11zU4OzsC4qpa .activeCritText3{fill:#000 !important}#mermaid-svg-q1R11zU4OzsC4qpa .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-q1R11zU4OzsC4qpa g.classGroup text .title{font-weight:bolder}#mermaid-svg-q1R11zU4OzsC4qpa g.clickable{cursor:pointer}#mermaid-svg-q1R11zU4OzsC4qpa g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-q1R11zU4OzsC4qpa g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-q1R11zU4OzsC4qpa .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-q1R11zU4OzsC4qpa .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-q1R11zU4OzsC4qpa .dashed-line{stroke-dasharray:3}#mermaid-svg-q1R11zU4OzsC4qpa #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa .commit-id,#mermaid-svg-q1R11zU4OzsC4qpa .commit-msg,#mermaid-svg-q1R11zU4OzsC4qpa .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-q1R11zU4OzsC4qpa g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-q1R11zU4OzsC4qpa g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-q1R11zU4OzsC4qpa g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-q1R11zU4OzsC4qpa .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-q1R11zU4OzsC4qpa .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-q1R11zU4OzsC4qpa .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-q1R11zU4OzsC4qpa .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-q1R11zU4OzsC4qpa .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-q1R11zU4OzsC4qpa .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-q1R11zU4OzsC4qpa .edgeLabel text{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-q1R11zU4OzsC4qpa .node circle.state-start{fill:black;stroke:black}#mermaid-svg-q1R11zU4OzsC4qpa .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-q1R11zU4OzsC4qpa #statediagram-barbEnd{fill:#9370db}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-state .divider{stroke:#9370db}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-q1R11zU4OzsC4qpa .note-edge{stroke-dasharray:5}#mermaid-svg-q1R11zU4OzsC4qpa .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-q1R11zU4OzsC4qpa .error-icon{fill:#522}#mermaid-svg-q1R11zU4OzsC4qpa .error-text{fill:#522;stroke:#522}#mermaid-svg-q1R11zU4OzsC4qpa .edge-thickness-normal{stroke-width:2px}#mermaid-svg-q1R11zU4OzsC4qpa .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-q1R11zU4OzsC4qpa .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-q1R11zU4OzsC4qpa .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-q1R11zU4OzsC4qpa .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-q1R11zU4OzsC4qpa .marker{fill:#333}#mermaid-svg-q1R11zU4OzsC4qpa .marker.cross{stroke:#333}
:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}
#mermaid-svg-q1R11zU4OzsC4qpa {
color: rgba(0, 0, 0, 0.75);
font: ;
}
node
Document
HTMLDocument
CharacterData
Text
Comment
Element
此框忽略请看后面
HTMlElement
HTMLHeadElement
HTMLBodyElement
HTMLTitleElement
HTMLDaragraphElement
HTMLInputElement
HTMLTableElement
HTMLetc
Attr
