DOM学习（day1）

了解DOM

DOM全称:
Document(文档) Object(对象) Model(模型)

DOM是一套标准——W3C
统一操作网页内容的对象、属性和方法标准！
所以，用DOM操作网页，几乎所有浏览器100%兼容
DOM可以操作网页内容的一套对象,属性和方法的集合

DOM用处: 增删改查+事件绑定

DOM树:
1.什么是DOM树?
内存中存储一个网页所有内容的树形结构

2.为什么是树形结构?
树形结构是展现上下级包含关系最直观的结构,而且因为网页的HTML内容刚好也是上下级嵌套的结构!

3.如何使用
(1).当浏览器获得一个HTML文件后,就会扫描文件的内容
(2).为整个网页文件创建一个树根节点对象:document对象
(3).浏览器1每扫描到一个网页内容(元素,文本,注释,属性),就会创建一个节点对象来保存这个内容.并将这个节点挂到DOM树上的指定位置

名词解释:
节点(node):网页中任何一项内容,存在树上时,都是把保存在一个节点对象中的标签(tag):一对儿<>包裹一个标签名,称为一个标签
比如：
有两个标签： 是结束标签
程序通常不关注单个标签
元素（element）：一对儿开始标签+结束标签以及中间的内容整体称为一个元素！
单标记元素自成一个元素对象。比如
DOM程序通常关心的都是元素整体！
增删改查都是对一个元素整体而言的！不会进行对某个标签操作。
每个元素在DOM树上都是一个元素节点对象！

**

查找：4种

**
1.不需要查找就可以直接获得的元素对象：
document.documnetElement 元素
document.head 元素
document.body 元素
document.forms[i] 元素

2.按节点间关系查找：
节点树：包含所有网页内容的完整树结构
(1).何时用？使用前提：
已经通过其它查找方式，获得了一个元素，找周围附近的有关系的元素时，才用按节点间关系查找
(2).每个节点对象都包括：2大类关系，6个属性
a.父子关系：4个属性
1).节点对象.parentNode 获得当前节点的父节点对象
2).节点对象.childNodes 获得当前节点下的所有直接子节点对象的集合----类数组对象
3).节点对象.firstChild 获得当前节点下的第一个直接子节点对象
4).节点对象.lastChild 获得当前节点下的最后一个直接子节点对象
b.兄弟关系：2个属性：
1).节点对象.previousSibling 获得当前节点平级前一个兄弟节点对象
2).节点对象.nextSibling 获得当前节点平级后一个兄弟节点对象
缺陷：看见的换行和空字符都是节点，严重干扰我们去查找元素，所以按节点间关系查找，推荐用元素树，不用节点树
元素树：
元素树是什么：仅包含元素节点的树结构
说明：元素树不是一颗新树，仅仅是依附在节点树上，添加了一些专门指向元素的新属性，形成的一颗子树
元素树的优点：不包含看不见的回车，空格，不会干扰查找
元素树也包含2大类关系，6个属性：
a.父子关系：4个属性
1). 元素对象.parentElement 获得当前元素的父元素对象
说明: 能当父节点的一定是拥有开始标签和结束标签的元素节点对象。所以，parentNode只可能拿到元素节点对象。所以，其实parentNode和parentElement可以通用！
2). 元素对象.children 获得当前元素下的所有直接子元素对象的集合——类数组对象
3). 元素对象.firstElementChild 获得当前元素下的第一个直接子元素对象
4). 元素对象.lastElementChild 获得当前元素下的最后一个直接子元素对象
b. 兄弟关系: 2个属性:
前一个 兄弟
1). 元素对象.previousElementSibling 获得当前节点平级前一个兄弟节点对象
2). 元素对象.nextElementSibling 获得当前节点平级后一个兄弟节点对象
3. 按HTML特征查找: 4种:
(1). 按id查找一个元素:
var 元素=document.getElementById(“id名”)
强调:
a. 必须用document对象调用该方法
b. 如果找到，只返回一个元素对象
c. 如果没找到，返回null
(2). 按标签名查找多个元素:
var 集合=任意父元素.getElementsByTagName(“标签名”)
获得多个元素按标签名
强调:
a. 可用任意父元素调用，使用不同的父元素调用，其实等效于限制查找范围，仅在当前父元素下。
b. 如果找到，返回包含所有符合条件的元素的类数组对象
c. 如果没找到，返回length为0的空类数组对象: [].length=0
d. 不但在直接子元素中查找，而且在所有后代中查找符合要求的元素。
e. 坑: 如果即使只找到一个元素，也会返回一个类数组对象，其中包含一个元素。如果想使用这仅有的一个元素，必须再加[0]才能从类数组对象中取出保存在0位置的一个元素使用。
(3). 按class名查找多个元素：
var 集合=任意父元素.getElementsByClassName(“class名”)
获得多个元素按class名
强调:
a. 也可用任意父元素调用，限制查找范围
b. 如果找到，返回包含所有符合条件的元素的类数组对象
c. 如果没找到，返回length为0的空类数组对象: [].length=0
d. 不但在直接子元素中查找，而且在所有后代中查找符合要求的元素。
e. 坑: 如果即使只找到一个元素，必须加[0]，从类数组对象中取出元素对象后，才能操作找到的一个元素对象
f. 当一个元素被多个class修饰时，只用其中一个class，就能找到该元素。
(4). 按name属性查找：专门用于查找有name属性的表单元素
var 集合=document.getElementsByName(“name名”)
强调:
a. 必须用document调用
b. 如果找到，返回所有符合条件的表单元素的集合
c. 如果没找到，返回length为0的空类数组对象: [].length=0
d. 坑: 如果即使只找到一个元素，必须加[0]，从类数组对象中取出元素对象后，才能操作找到的一个元素对象
4. 按选择器查找:
(1). 只查找一个元素：
var 元素=任意父元素.querySelector(“任意选择器”);
(2). 如果查找多个元素:
var 集合=任意父元素.querySelectorAll(“任意选择器”);
强调:
a. 都可用任意父元素调用，来限制查找范围
b. 返回值:
1). querySelector(): 如果找到返回一个元素对象，如果没找到返回null
2). querySelectorAll(): 如果找到返回多个元素组成的类数组对象，如果没找到返回length为0的空类数组对象。

返回值规律:
5. 如果返回一个元素对象的函数，没找到，返回null
6. 如果返回多个元素的函数，没找到都返回length为0的空类数组对象。