1、DOM概念：Document Object Model

提供了专门用于操作HTML文档的API

DHTML：动态的HTML，一切实现网页动态效果的技术的统称——HTML+CSS+JS(DOM)

HTML/XHTML/DHTML/XML分别指的是什么？

①HTML：网页

②XHTML：更严格的网页

③DHTML：动态的网页

④XML：数据格式

DOM：本来是可以操作一切结构化文档（HTML/XML）的：3部分

（1）核心DOM：万能！但是API比较繁琐：

elem.setAttribute("属性名","属性值")

（2）HTML DOM：只能操作HTML文档，API非常的简单：

elem.属性名=值;

（3）XML DOM：已经淘汰很多年了

建议：以后优先使用HTML DOM，HTML DOM实现不了，在用核心DOM补充

2、DOM树：保存所有网页内容的树状结构

树根：document,不需要创建，由浏览器的js解释器自动创建，一个页面只有一个树根

DOM节点/对象/元素：一个标签、文本、属性、注释等等

每个DOM节点/对象/元素都有三大属性：

1、xx.nodeType：获取xx的节点类型
    document:9
    元素标签:1
    文本节点:3
    属性节点:2
    
2、属性节点.nodeValue：获取属性节点的节点值
    getAttribute("")能直接获取到属性的值
    
3、***xx.nodeName：获取属性节点的名称：
    直接找儿子的话，可能找到多种标签，但是我们希望对不同的标签执行不同的操作
    特殊：**获取出来的标签都是全大写**

3、通过节点之间关系获取元素：

1、父：elem.parentNode;
2、子：elem.children; - 集合：只能找到儿子级
3、第一个儿子：elem.firstElementChild;
4、最后一个儿子：elem.lastElementChild;
5、前一个兄弟：elem.previousElementSibling;
6、后一个兄弟：elem.nextElementSibling;

4、【递归】：函数中，再一次调用函数自己——深度优先算法

作用：专门用于【遍历层级不明确的树状结构】

如何实现：2步

（1）创建函数，传入实参树根，形参接住，直接做第一层要做的操作

function f1(root){
    直接做第一层要做的操作;
    //判断自己有没有下一级，如果有再次【调用】此方法，但传入的实参已经变成了你的下一级
}

（2）调用函数

f1(实际的根元素)

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

5、遍历API——深度优先算法

专门用于【遍历层级不明确的树状结构】

如何实现：2步

（1）创建treewalker对象

var tw=document.createTreeWalker(root,NodeFilter.SHOW_ALL/SHOW_ELEMENT);

（2）反复调用nextNode方法：

while((node=tw.nextNode())!=null){
    node;//当前节点做什么操作
}

注意：此方法必须跳过起点

6、纯循环

遍历层级不明确的树状结构

7、查找元素：

1、按照HTML的特点去查找元素：4个

 var elem=document.getElementById("id");

找到了是单个元素，没找到一定是null

var elem=document.getElementsByTagName/ClassName/Name("标签/class名/name值")

找到了是个集合，没找到一定是一个空集合[]

2、按照CSS选择器进行查找：2个

（1）单个元素，没找到一定是null，如果有多个，也只会找到第一个

var elem=document.querySelector("任意css选择器")

（2）多个元素：找到的是一个集合，没找到空集合

var elem=document.querySelectorAll("任意css选择器")

getXXX和querySelectXXX的区别？

1、返回结果不同：

getXXX - 返回是一个动态集合（每次DOM树修改，都会悄悄的再次查找）

querySelectXXX - 返回是一个静态集合（每次DOM树修改，不会再次查找，只管第一次找到的结果）

2、动态集合，不支持forEach;静态集合，支持forEach

3、复杂查找时，尽量使用

var elem=document.querySelectorAll("任意css选择器")

JS第四周——day2