1、什么是DOM：Document Object Model（文档对象模型） - 操作HTML文档

将每个元素/标签/文本/属性/注释都会看作是一个DOM节点/元素/对象

  面试题：HTML/XHTML/DHTML/XML是什么?
1、HTML - 网页
2、XHTML - 更严格的网页
3、DHTML - Dynamic：动态的网页，其实并不是新技术，也不是新概念，而是现有技术的一个整合统称：让我们的网页再离线版也能具有动态效果
		DHTML:HTML+CSS+JS
4、XML - 全部自定义，数据格式：淘汰了：JSON数据格式

  DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3个方向
1、核心DOM：【无敌】，既可以操作HTML也可以操作XML
	         缺点：API比较繁琐，getAttribute/setAttribute()

2、HTML DOM：只能操作HTML，API简单：缺点：自定义的东西操作不了

3、XML DOM：只能操作XML - 不会学习他

开发建议：优先使用HTML DOM，HTML DOM实现不了再用核心DOM补充

2、DOM树：树根：document - 不需创建，一个页面只有一个document，由js解释器自动创建

    作用：通过树根，可以找到想要的DOM元素/节点/对象

3、每个DOM元素都有三大属性：

1、elem.nodeType：描述节点类型
	document 节点：9
	element 节点：1
	attribute 节点：2
	text 节点：3

	以前有用：判断xx是不是一个页面元素 - 因为以前我们的方法和你们现在的方法不一样

2、elem.nodeValue：获取【属性节点】的值
	
3、***elem.nodeName：获取节点名称/标签名
	注意：返回的是一个全大写组成的标签名

4、*通过 关系 获取元素

父：xx.parentNode
子：xx.children - 只能找到儿子
第一个儿子：xx.firstElementChild;
最后一个儿子：xx.lastElementChild;
前一个兄弟：xx.previousElementSibling;
后一个兄弟：xx.nextElementSibling;

5、*****递归：简单来说就是函数中再次调用了函数本身，迟早有一天会停下来

何时使用：遍历DOM树，专门用于【遍历层级不明确】的树状结构
如何使用：
	function 函数名(根){
		1、第一层要做什么直接做

		2、判断它有没有下一级，如果有下一级，则再次调用此函数，但是传入的实参是自己的下一级
	}
	函数名(实际的根)

算法：深度优先！优先遍历当前节点的子节点，子节点遍历完才会跳到兄弟节点
缺点：同时开启大量的函数调用，浪费的内存，只有一个情况：【遍历层级不明确】

递归 vs 循环
递归：优点：直观，易用
          缺点：性能较差
循环：优点：性能较好
          缺点：难得一批

6、遍历层级不明确的API：TreeWalker：一个在DOM树上行走的人

缺点：只能遍历层级不明确的DOM树，不能遍历层级不明确的数据
如何使用：2步
	1、创建TW
		var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ELEMENT);

	2、反复调用tw的nextNode函数找到节点
		while((node=tw.nextNode())!=null){
			node要干什么
		}

7、*直接找元素：

1、通过HTML的一些特点找元素
	你会的：id/class/标签
	新的：通过name找元素：var elems=document.getElementsByName("name值")

2、通过css选择器查找元素：2个方法 - 更适合用于复杂查找（多句才能找到最终元素）
	1、var elem=document.querySelector("任意css选择器");
		只会找到一个元素，如何同时匹配多个，也只会返回第一个
		没找到null

	2、var elem=document.querySelectorAll("任意css选择器");
		找到了是一个集合
		没找到是一个空集合

面试题：getXXXX和queryXXXX的区别？
	返回的结果不一样：
		1、getXXXX：返回的是一个动态集合HTMLCollection
			特点：每一次DOM树修改过后，js都会悄悄的再次查找元素，保证数据和页面对应，效率相对较低

		2、queryXXX：返回的是一个静态集合Nodelist
			特点：只管查找的一次找出来的结果，后续DOM树的修改，我们的数据也不会变化，效率相对较高
			优点：1、查找简单
			           2、还支持forEach

总结：找元素的方式：

1、直接找元素：getXXX、queryXXX
2、通过节点的关系
3、层级不明确的情况 - 递归

DOM2 - 掘金 (juejin.cn)
DOM3 - 掘金 (juejin.cn)