文档对象模型
DOM是document object model，它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口。把文档中的代码翻译成一个对象模型，就是文档对象模型。
浏览器会根据DOM文档对象模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。这些节点之间在文档模型数据结构中存在某种关系: 根节点、父子节点 、兄弟节点等。
当网页被加载时，浏览器会创建页面的文档对象模型，模型被结构化为对象树：
节点
1.DOM节点，网页中所有内容都是节点（标签、属性、文本、注释等），DOM中的每个节点代表一个对象。
2.整个文档是一个文档节点，每个标签元素是一个元素节点，标签元素内的文本是文本节点，每个标签属性是属性节点，注释是注释节点。
3.只有一个根节点document，除了根节点外所有节点都有唯一的一个父节点。
4.document是window对象的属性。
元素的属性也是独立节点 叫属性节点 但是不是元素节点的子节点。
一般地，节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也不相同。
1.nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值。
2.nodeName属性返回节点的名称。
3.nodeValue属性返回或设置当前节点的值，格式为字符串。
12种节点
nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值
元素节点
属性节点
文本节点
CDATA节点
实体引用名称节点
实体名称节点
处理指令节点
注释节点
文档节点
文档类型节点
文档片段节点
DTD声明节点
获取元素的方式
1.通过 id 获取:(查找速度最快)
1)语法格式： var 元素对象 = document.getElementById ("id 属性名称")
2)作用：通过页面中某个元素的 id 属性来获取这个元素对象
3)返回值：这个方法执行后会有一个返回值，如果获取到则返回当前对象，否则返回 null
<div id="box-baba">
<div class="box1">0311<a>AOTU</a></div>
<div class="box1">0816</div>
<div class="box1">0530</div>
<div class="box4">0729</div>
</div>
<p> <input type="checkbox" name="time" value="2022">2022
<input type="checkbox" name="time" value="2021">2021
</p>
//通过id名获取
var div1=document.getElementById("box-baba");
console.log(div1,111);
//不存在的id名，获取的是null
var div2=document.getElementById("box5");
console.log(div2,222);
2.通过类名获取
1)语法格式： var 元素对象集 = document.getElementsByClassName ("类名称")
2)作用：根据元素的样式名称来获取元素集（也就是元素的 class 属性来获取）
3)返回值：这个方法返回类数组，获取了该节点的所有标签，不存在的class名，获取的是空类数组
//通过class名获取
//返回值是类数组，获取了该节点的所有标签
var arr=document.getElementsByClassName("box1");
console.log(arr,333);
//不存在的class名，获取的是空类数组
var arr1=document.getElementsByClassName("box");
console.log(arr1,444);
3.通过标签名获取
1)语法格式： var 返回对象集 = document.getElementsByTagName ("标签名称")
2)作用：根据指定的标称名称返回这些对象
3)返回值：返回值是类数组，获取了所有标签，不存在的标签，获取的是空类数组
//通过标签获取
//返回值是类数组，获取了所有标签
var ins=document.getElementsByTagName("div");
console.log(ins,555);
//不存在的标签，获取的是空类数组
var ins1=document.getElementsByTagName("i");
console.log(ins1,666);
4.通过name属性获取
1)语法： var 元素对象集 = document . getElementsByName ("name 属性名")
2)作用：根据 name 属性来获取元素对象的集合
3)返回值是类数组，获取了所有name名属性的标签，不存在的name属性名，获取的是空类数组
var year = document.getElementsByName('time');
console.log(year,"jjjjj");
var year1 = document.getElementsByName('sex');
console.log(year1,"zxzxzx");
根据选择器获取
根据指定选择器获取元素对象有两种方式：一是获取单个，一是获取多个。可以像CSS后代选择器一样选择。
1.获取单个（返回第一个）
语法格式：var 元素对象 = document.querySelector ("选择器名称")
2.获取多个（是个集合）
语法格式： var 元素对象 = document.querySelectorAll ("选择器名称")
//有多个选择器符合，只会获取第一个元素
var s1=document.querySelector(".box1");
console.log(s1,777);
//没有选择器符合,获取null
var s2=document.querySelector("#box5");
console.log(s2,888);
//获取符合选择器的所有元素，返回值是一个类数组
var s3=document.querySelectorAll(".box1");
console.log(s3,999);
//没有符合选择器的，返回值是一个空类数组
var s4=document.querySelectorAll(".box");
console.log(s4,000);
系统提供的直接获取的方式
document.body //body标签
document.forms //form表单们
document.anchors //a标签们
document.images //图片们
document.links //连接们
document.URL //当前文档的网址
通过关系获取
父级
标签的父元素和父节点是同一个,除了html标签。
html的父元素是null，因为html标签之外没有其他标签，而html的父节点是document对象
var h=document.querySelector("html");
console.log(h.parentNode,111);
console.log(h.parentElement,222);
<div id="box-baba">
<div class="box1">0311<a href="#">AOTU</a></div>
<div class="box1">0816</div>
<div class="box1">0530</div>
<div class="box4">0729</div>
</div>
<p>
<input type="checkbox" name="time" value="2022">2022
<input type="checkbox" name="time" value="2021">2021
</p>
var box1=document.querySelector(".box1");
console.log(box1.parentElement,666);
console.log(box1.parentNode,777);
子级
标签的子元素和子节点不一定是同一个，因为文本节点也是节点之一。当标签换了行，标签后面紧跟的子节点就是一个空的文本节点。childNodes节点把换行和空格也当成是节点信息
children：返回值是子元素们，没有返回空数组。childNodes：返回值是子节点们 没有返回空数组。
var p1=document.querySelector("p");
console.log(p1.children,111);
console.log(p1.childNodes,222);
兄弟
nextSibling：下一个兄弟节点，没有返回null。nextElementSibling：下一个兄弟元素 没有返回null。previousSibling：上一个兄弟节点，没有返回null。previousElementSibling：上一个兄弟元素，没有返回null。
previousSibling会匹配字符，包括换行和空格，而不是节点，previousElementSibling则直接匹配节点。nextSibling和nextElementSibling也是类似的
<div id="box-baba">
<div class="box1">0311<a href="#">AOTU</a></div>
<div class="box1">0816</div>
<div class="box1">0530</div><div class="box4">0729</div>
</div>
var box2=document.querySelector(".box4");
console.log(box2.nextElementSibling,111);
console.log(box2.nextSibling,222);
console.log(box2.previousElementSibling,333);
console.log(box2.previousSibling,444);
标签没有换行所以它的上一个兄弟节点就是div标签，而不是空的文本节点。换了行就是空的文本节点。
<div id="box-baba">
<div class="box1">0311<a href="#">AOTU</a></div>
<div class="box1">0816</div>
<div class="box1">0530</div>
<div class="box4">0729</div>
</div
第1个子节点（下标取1）和最后一个子节点（下标取length属性减1）
<p>
<input type="checkbox" name="time" value="2022">2022
<input type="checkbox" name="time" value="2021">2021
</p>
var p1=document.querySelector("p");
console.log(p1.firstElementChild,111);
console.log(p1.firstChild,222);
console.log(p1.lastElementChild,333);
console.log(p1.lastChild,444);
父元素中的第几个子元素/节点，可以通过下标获取
<div id="box-baba">
<div class="box1">0311<a href="#">AOTU</a></div>
<div class="box1">0816</div>
<div class="box1">0530</div>
<div class="box4">0729</div>
</div>
var divs=document.querySelector("#box-baba");
console.log(divs.children[1]);//第二个子元素
console.log(divs.childNodes[1]);//第二个子节点
获取自己是父元素中的第几个子元素/节点
自己封装的函数，调用者是父元素中的第几个元素，然后返回值就是父元素中的第几个元素的下标。
Object.prototype.indexOf1=function() {
//this就是调用者
var arr=this.parentElement.children;
//arr就是当前调用者的父元素的子元素，类数组中至少包含了调用者自己或以上
for (let i = 0;i<arr.length;i++) {
if(this==arr[i]){
return i;
};
};
};
<body>
<div id="box-baba">
<div class="box1">
<span>0311</span>
<a href="#">AOTU</a>
</div>
<div class="box2">0816</div>
<div class="box3">0530</div>
<div class="box4">0729</div>
</div>
</body>
<script>
var box1=document.querySelector(".box1");
console.log(box1.indexOf1());
</script>
