学习日志

DOM可以做什么

DOM可以干五件事，包含：增、删、改、查和事件绑定

DOM树

1、节点的分类（nodeType）

元素节点：标签 1

属性节点：标签的属性 2

文本节点：标签后的换行符 3

文档节点：document 9

​ 注释：8

2、节点名称：（nodeName）

元素节点 标签名相同

属性节点 属性名相同

文本节点 #text

文档节点 #document

html:

3、节点的值（nodeValue）

元素节点的 undefined 或null

文本节点的 文本本身

属性节点的 属性值

DOM操作的流程

构建DOM树(先在头脑中构建DOM树)

查找触发事件的元素

绑定事件处理函数

遍历原理：深度优先遍历

1.什么是深度优先遍历（DFS算法）？

​ 深度优先遍历是从某个顶点出发，访问此顶点，然后从未被访问的邻接点出发深度优先遍历，直到所有和邻接点相同的路径都被访问到了。回溯到某个未被访问的分支，继续执行遍历。

DOM遍历：是当同时有子节点和兄弟节点时，优先遍历子节点。只有所有子节点遍历完后，才能遍历兄弟节点

2.什么是广度优先遍历（BFS算法）？

​ 广度优点遍历是从某个顶点出发，访问此顶点，然后访问所有未被访问的邻接点进行广度优点遍历，遍历完成后继续访问未被访问的分支节点执行遍历

递归问题

递归的效率极低

按HTML查找（4个特征）

按照id查找：使用Dom是点击按钮效果

按照标签名查找

按照class查找

只要有其中的一个类名都能找到

按照name查找

按照选择器查找

*当查找条件非常复杂时，使用选择器查找，无论藏的多深的元素，css的选择器永远只需要一句很简洁的话就可找到元素

查找一个元素： var elem=parent.querySelector("selector")

查找多个元素： var elems=parent.querySelectorAll("selector")

注：按HTML vs 按选择器（面试题）

返回值

1.按HTML，返回动态集合，不实际存储所有内容，只返回本次所需的内容，如果重复访问集合，就需要重新查找DOM树，优点是首次查找速度快，缺点是反复访问集合，会导致反复查找DOM树（会根据页面元素的变化而变化）；

2.selector API，返回非动态集合，可以直接存储所有数据，即使反复访问集合，也不需要反复查找DOM树

首次查询效率

1.按HTML效率更高，仅返回需要的内容，不需要准备完整数据；

2.selector API低，第一次要返回完整数据

易用性

1.按HTML繁琐；

2.selector API简单

什么时候使用

1.如果只凭一个条件即可获得想要的元素时，首选按HTML查找；

2.如果需要多级复杂条件查找才能获得想要的元素时，用selector API

修改元素

内容

elem.innerHTML

elem.textContent

elem.innerText

elem.value

练习：

不全

属性

获取属性 var value=elem.getAttribute("属性名")

修改属性： elem.setAttribute("属性名",属性值)

移除属性 ： elem.removeAttribute("属性名")

判断是否含有属性 var bool=elem.hasAttribute("属性名")

HTML DOM （核心dom）

缺点：不是万能的，需要核心DOM的补充

获取属性

​ elem.属性名

修改属性

​ elem.属性名=值

判断是否包含属性

​ elem.属性名!==""

移除属性

​ elem.属性名=""

特例：class属性

​ class属性，不能直接用 “ . ” 访问，因为class属性是ES中的关键词，所以DOM不能再使用class作为属性。如果操作页面上的class属性，只能改名为“ .className”。使用"元素“.className"属性，等效于使用<元素 class="xxx">属性，直接修改class

实例：

元素.className="xxx"

提示：元素.classList

1.元素.classList.add("class名")

2.元素.classList.remove("class名")

例子：换肤效果

css:

html:

js:

保存颜色：

状态属性

html

js

不全

扩展（自定义）属性

普通自定义：

html:

js:

问题：无法访问扩展属性

HTML5自定义属性

定义自定义扩展属性

所有自定义扩展属性名前必须加data-前缀：

访问自定义扩展属性

如果添加自定义属性时，添加了data-前缀，则可用dataset自动收集所有data-开头的属性，然后用 . 访问

提示：elem.dataset.属性名

查找带有自定义扩展属性的元素

课堂练习：

​ 创建表单，用于收集用户的基本信息“姓名，性别，爱好，工作...”,用户填写完成后提交基本信息，并打印在页面心创建的列表中，要求列表使用自定义属性，使列表达到隔行换色的效果。

答案：

html

注：

1、文本内容

2、 checked 标签 带有一个预选定复选框的 HTML 表单：

js:

样式

内联样式

解决读取问题

获取样式时，要用专门的方法getComputedStyle(元素)，获得计算后的完整样式

内部/外部样式表(不建议)

提示：获取的是style标签中和link标签中的样式

实例：

// 获取页面中的所有样式

var sheet=document.styleSheets[i];

// 获取页面中的具体样式表，如果获得的是keyframes，就需要继续找子rule

var rule=sheet.cssRules[i];

// 通过rule下的style属性修改属性值

rule.style.样式属性=值

最好的修改样式的方法

如果批量修改多个css属性时，首选用class，修改class属性，批量应用样式

实例：

​ var d1=ducment.getElementById("d1");

​ d1.className="disBlock";

​ d1.className="disNone";

优化样式修改

因为每修改一次样式，都可能导致重排重绘网页，所以，应该尽量减少修改样式的次数，使用 “ 元素.style.cssText属性 ” 代替，单独设置的 “ 元素.style.css属性 ”

实例：

​ 元素.style.cssText="width:100px; height:100px"

注意：此时浏览器只需要一次重排重绘网页，对比单独设置：

​ 元素.style.width="100px"

​ 元素.style.height="100px"

单独设置导致网页在短时间内进行两次重排重绘

添加和删除元素

添加

创建新元素对象

var elem=document.createElement("标签名")

实例：

​ var a=document.createElement("a")

设置关键属性

为创建好的对象添加属性

​ a.href="url";

​ a.innerHTML="文本"

将元素添加到DOM树

文档片段

创建文档片段对象

var frag=document.createDocumentFragment();

将多个平级子元素临时添加到文档片段对象中

frag.appendChild(child)

将文档片段整体一次性添加到DOM树上指定父元素下

parent.appendChild(frag)

注意：frag不会成为页面元素，添加子元素后，frag自动释放

删除

parent.removeChild(child)

今日感受：

内容太多，基础太差，感觉很难，需要记忆的很多