简单记录如何使用DOM获取元素

1、什么是DOM：Document Object Model
专门用于操作网页内容（HTML/CSS）的API
w3c DOM标准，浏览器厂商几乎100%的实现了DOM标准

DOM：3部分
*核心DOM：可以操作一切结构化文档（HTML/XML）,缺点：语法有点复杂

*HTML DOM：只能操作HTML，语法简单

XML DOM：只能操作XML

实际开发：优先使用HTML DOM，HTML DOM实现不了就用核心DOM补充

2、DOM树：树根：document
每个DOM节点（对象/元素），都有三大属性：
1、elem.nodeType：描述节点类型，返回一个数值
document节点：9
element节点：1
判断当前的节点是不是一个标签，是一个标签的话，结果一定为1

2、elem.nodeValue:描述节点的值
	获取的是：属性的值，但是我们有更简单的方法

3、*elem.nodeName：描述节点的名称
	document节点：#document
	element节点：标签名，只不过是全大写的
        用于判断当前的元素是什么标签

3、通过关系获取元素
1、父子：
父亲：xx.parentNode - 父亲只有一个
儿子：xx.children - 集合
第一个儿子：xx.firstElementChild - 单个元素
最后一个儿子：xx.lastElementChild - 单个元素

2、兄弟：
前一个兄弟：xx.previousElementSibling - 单个元素
后一个兄弟：xx.nextElementSibling - 单个元素

children只能找到儿子元素

4、*****递归：函数中又一次调用了函数自己
何时使用：只要【层级不明确】的时候，用于遍历不确定层级深度的树状结构！！！

如何实现递归：
1、创建一个函数
   直接做第一层的操作

2、判断有没有儿子，如果有的话，继续调用此函数只不过传入的实参已经发生了变成了儿子

算法：深度优先！优先遍历当前节点的子节点
  子节点遍历完，才会跳到兄弟节点

递归 vs 循环
递归：优点：直观，易用
  缺点：占用更多的内存空间，效率低：因为同时开启的函数很多，最先开启的，最后结束（少用：【层级不明确】）
循环：优点：几乎不占资源
  缺点：难度高，代码量巨大，代码不固定

5、遍历API：可以实现在层级不明确的时候，找到所有人
TreeWalker：按照深度优先的算法遍历所有的元素
如何：
1、创建tw
var tw=document.createTreeWalker(起点,NodeFilter.SHOW_ALL/SHOW_ELEMENT,null,false);

2、tw.nextNode();//找到节点，但是一次只能找到一个
   真正的用法：
	while((node=tw.nextNode())!=null){
		node.style.xx
	}

总结：不管是遍历API、还是纯循环、还是递归，都是希望获得层级不明确的所有的元素
1、最好的一定是递归：因为他既可以获取HTML/也可以获取数据
2、层级不明确的HTML
3、层级不明确的数据

6、查找元素：
1、按HTML查找元素：4种
1、id：var elem=document.getElementById(“id值”);//单个元素找到了就是单个元素，没找到是null
2、标签名：var elems=document.getElementsByTagName(“标签名”);//集合找到就是集合，没找到是空集合
3、class名：var elems=document.getElementsByClassName(“class值”);//集合找到就是集合，没找到是空集合
4、name名：var elems=document.getElementsByName(“name值”);//集合找到就是集合，没找到是空集合，不用

2、按CSS选择器查找元素：2个
1、确定只会找到一个元素
var elem=document.querySelector(“任意css选择器”);
万一选择器匹配到的多个元素，只会返回第一个
没找到null

2、希望查找多个元素
	var elems=document.querySelectorAll("任意css选择器");

总结：查找元素：
1、6个查找元素API
2、通过关系查找元素
3、层级不明确的时候使用递归