DOM和BOM详细讲解

1.什么是DOM：document object model
DOM:专门操作网页内容的一套函数和对象
DOM还是一个标准，由W3C指定
为什么：
广义js= ECMAScript + DOM + BOM
核心语法 +操作网页内容的一套函数和对象+访问浏览器软件信息对象
要想操作网页内容，为页面添加交互效果，其实只能用DOM函数和对象。
问题：早期DOM没有标准
解决:W3C指定了同意的DOM函数和对象的标准
几乎所有u浏览器100%兼容
特例：IE8
何时：只要操作网页内容，为网页添加交互行为，只能用DOM
包括：5件事：增加元素、删除元素、修改元素、查询元素、事件绑定
2.DOM树：
什么是：在内存中，集中保存一个网页中所有内容的树形结构
为什么：树形结构是最直观的保存上下级包含关系的数据结构，而网页中的HTML标签，刚好也是父子嵌套的上下级包含关系，所以网页中的每一项内容在内存中都是存在一颗树形结构上的
如何：
1.当浏览器读取到一个.html文件时,会先在内存中创建一个document对象,作为真棵树的树根对象
2.开始扫描.html中每个元素,文本等内容每扫描到一项内容，就在document下对应位置创建一个节点(node)对象。
3.查找元素:
1.不需要查找,就可直接获得:
Document.documentElement
Document.head
Document.body
2.按节点间关系查找：
树上的每个节点都不是孤立存在的，都和上下左右的节点之间的各种各样的关系，可以互相访问到
包括：
节点树：包含所有节点内容的完整树结构
2大类关系：
1.父子关系：
节点.parentNode 获得当前节点的父节点
父节点.chiIdNodes 获得当前父节点下的所有直接子节点的集合。
强调：chiIdNodes返回的是一个类数组对象，今后我都简称集合
父节点.firstChild 获得当前父节点下的第一个子节点
父节点.laseChild 获得当前父节点下的最后一个直接子节点。
2.兄弟关系：
节点.previousSibling 获得当前节点平级的前一个相邻的兄弟节点
节点.nextsibling 获得当前节点平级的下一个相邻的节点
问题：同时包含看不见的换行和空字符，也是节点对象，严重干扰查找。
解决：元素树
元素树：仅包含元素节点的树结构
说明：元素树不是一颗新树，而是原来节点树中添加了仅指向元素节点的新属性而形成的一颗子树结构
2大类关系：
2.父子关系：
节点.parentElement 获得当前节点的父节点
说明：其实也可以用parentNode
父节点.chiIdren 获得当前父节点下的所有直接子节点的集合。
强调：chiIdren 返回的是一个类数组对象，今后我都简称集合
父节点.firstElementChild 获得当前父节点下的第一个子节点
父节点.laseElementChild 获得当前父节点下的最后一个直接子节点。
2.兄弟关系：
节点.previousElementSibling 获得当前节点平级的前一个相邻的兄弟节点
节点.nextElementSibling 获得当前节点平级的下一个相邻的节点
总结：今后只要按照节点间关系查找就都用元素树的属性代替节点树的旧属性
何时：今后只要已经获得一个节点对象，找周围附近的节点时，就用节点间关系查找。
鄙视(笔试)：定义一个函数，遍历一个指定的父元素下的所有后代元素；
1.定义一个函数,仅遍历直接子元素
2.如果当前子元素有更夏季的直接子元素，则对当前子元素继续调用当前函数，查找子元素
3.按HTML特征查找：
4种
1.按id属性查找
Var 元素=document.getElementById(“id”)
在整个页面中查找id为指定名名称的一个元素
返回值：如果找到，返回一个元素对象
如果没找到。返回null
强调：只能用document调用。不能在随意父元素上调用
2.按标签查找
Var 集合=父元素。GetElementsByTagName(“标签名”)
在指定的父元素下查找所有变签名为指定标签名的后代元素
返回值：如果找到，返回多个元素组成的集合：[].length=0
强调:
1.可在任意父元素下查找。通常指定在某个父元素下查找后代，是为了减少查找范围，提高查找效率。
2.不止查找直接子元素，而是在所有后代中查找。
比如：nav.getElementsByTagName(“li”)

3.按calss属性查找 Var 集合=父元素.getElementsByClassName(“类名”) 在指定父元素内，查找calss属性中包含指定类名的所有元素 返回值：如果找到，返回多个元素组成的集合 如果没找到，返回空集合:[].length=0

强调:
1.可限制在任意父元素内查找,减少查找范围
2.不仅查找直接子元素,且在所有后代中查找。
3.如果一个元素同时被多个calss修饰，则使用其中一个class，就可以找到改元素，无需所有class都满足
比如：nav.getElementsByClassName(“active”)

4.按name属性查找
Var 集合=document.getElementsByName(“name名”)
在整个网页中查找name属性值为指定name名的元素.
返回值：如果找到，返回多个元素组成的集合
如果没找到，返回空集合:[].length=0
强调：
1.只能用document调用,不能用随意一个父元素调用.
何时:在表单中查找表单元素时
问题：所有返回集合的查找函数，在任何情况下都会返回一个集合，即使只找到一个元素，也放在一个集合中返回。
比如:

Var 集合=document.getElementsByName(“uname”)
集合:[]
如果想使用集合中返回的这唯一的一个对象,应该?
解决:var 文本框对象=
Document.getElementsByName(“uname”)[0]
其中:[0]表示取出集合中仅有的一个元素对象，单独使用.
以上四种查找方式，最大的问题是：
一次只能用一个特征作为查找条件。
如果查找条件非常繁琐：
4.用选择器当条件查找元素：
2个函数: 1.只查找一个符合条件的元素
var元素=父元素.querySelector(“任意复杂的选择器”)
返回值：如果找到，返回一个元素对象
如果没找到返回-1
2.查找多个符合条件的元素：
Var 集合=父元素.querySelectorAll(“可以放任意复杂的选择器”)
在指定父元素下查找符合选择器要求的多个元素
返回值：如果找到返回多个元素的集合
如果没找到返回[]length=0
强调：1.可以以任意父元素调用来限制查找的范围
2.()中的选择器参数,不用每次都写完整,只要以.前的父元素为起点开始写就行!

• ul.querySelectorAll(“li li”)
• • 4.