一，简介
DOM（Document Object Model）的缩写，即文档对象模型。是针对XML并经过扩展用于HTML的应用程序编程接口（API）
所以DOM本质上是一种接口（API)，是专门操作网页内容的API标准
DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点。借助DOM提供的API，开发人员可以删除、添加、替换或修改任何节点
DOM：
核心DOM 能够操作所有结构化文档（HTML XML）——万能 - 繁琐
HTML DOM 专门操作HTML内容的API——常用的API --> 简化
二，获取元素的方式总结
1、根据 id 的属性的值获取元素，返回值是一个元素对象
document.getElementById(“id属性的值”);
2、根据标签名获取元素，返回值是包含多个元素对象的伪数组
document.getElementsByTagName(“标签名字”);
下面的几个，有的浏览器不支持。
3、根据 name 属性的值获取元素，返回值是包含多个元素对象的伪数组
document.getElementsByName(“name属性的值”);
// 通过 name 属性获取元素适用于表单标签，基本标签没有 name 属性
//基本标签：div,p,h1,ul,li,br等
//表单标签：input, select,option,form,textarea,datalist,label等
4、根据 class 类样式的名字获取元素，返回值是包含多个元素对象的伪数组
document.getElementsByClassName(“class类样式的值”);
ie8等低版本浏览器不支持此方法。此方法属于 h5 的
5、根据 CSS 选择器获取元素，返回值是一个元素对象
document.querySelector("#id属性的值");
document.querySelector(“标签的名字”);
document.querySelector(".class类样式的值");
6、根据 CSS 选择器获取元素，返回值是包含多个元素对象的伪数组
document.querySelectorAll("#id属性的值");
document.querySelectorAll(“标签的名字”);
document.querySelectorAll(".class类样式的值");
注意：以上方法获取的元素的集合都是伪数组
判断伪数组的方式是伪数组不能调用数组的方法。
伪数组怎么变为真数组？
定义一个空数组，把伪数组的所有内容复制过去即可。
2.1、通过节点查找
三个元素不需要找，直接用
document.documentElement <html>
document.head <head>
document.body <body>
1） 父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的直接子代节点
node.firstChild 获得node下的第一个子节点
node.lastChild 获得node下最后一个子节点
2）兄弟关系
node.previusSibling 返回当前节点的前一个兄弟节点
node.nextSibling 返回当前节点的下一个兄弟节点
节点树：包含了所有节点（元素，文本） 完整的结构
节点树：包含了所有节点（元素，空格，文本） 完整的结构
1）父子关系
elem.parentElement 返回父元素对象
elem.children 返回子元素对象集合 IE8支持
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素对象
2）兄弟关系
elem.previusELementSibling 返回当前元素的前一个兄弟元素
elem.nextElementSibling 返回当前元素的下一个兄弟元素
元素树 ： 仅包含元素节点的树形结构
1485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
