20200901冯佳丽

学习日志

DOM可以做什么

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

DOM树

1598960998532

1、节点的分类(nodeType)

元素节点:标签 1

属性节点:标签的属性 2

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

文档节点:document 9

​ 注释:8

2、节点名称:(nodeName)

元素节点 标签名相同

属性节点 属性名相同

文本节点 #text

文档节点 #document

html:

1598963138264

1598963216272

3、节点的值(nodeValue)

元素节点的 undefined 或null

文本节点的 文本本身

属性节点的 属性值

1598963094474

1598963307293

DOM操作的流程

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

查找触发事件的元素

绑定事件处理函数

遍历原理:深度优先遍历

1.什么是深度优先遍历(DFS算法)?

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

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

2.什么是广度优先遍历(BFS算法)?

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

递归问题

递归的效率极低

按HTML查找(4个特征)

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

1598924928637

1598925127210

按照标签名查找

1598925203721

1598925349223

按照class查找

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

1598926895546

按照name查找

1598927198585

1598927397171

按照选择器查找

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

1598927537977

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

1598927628377

查找多个元素: 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

1598928200177

elem.textContent

1598928305944

elem.innerText

1598928356154

elem.value

1598928446093

1598928611530

练习:

1598929869678

不全

1598930017141

1598930080393

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

1598930650431

1598930371929

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

1598930842357

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

1598930926753

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

1598930941735

HTML DOM (核心dom)

缺点:不是万能的,需要核心DOM的补充

获取属性

​ elem.属性名

修改属性

​ elem.属性名=值

判断是否包含属性

​ elem.属性名!==""

移除属性

​ elem.属性名=""

1598931290882

特例:class属性

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

实例:

元素.className="xxx"

提示:元素.classList

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

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

1598931520872

1598931584299

例子:换肤效果

css:

1598931690128

html:

js:

1598931837223

保存颜色:

1598931855714

1598932190572

状态属性

html

1598941522690

1598941920351

js

不全

扩展(自定义)属性

普通自定义:

html:

1598941963153

js:

1598941992023

问题:无法访问扩展属性

HTML5自定义属性
定义自定义扩展属性

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

访问自定义扩展属性

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

提示:elem.dataset.属性名

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

1598942526439

课堂练习:

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

答案:

html

注:

1、

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

1598951587362

js:

1598951623377

1598951644029

样式

内联样式

1598947276018

解决读取问题

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

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

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

实例:

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

var sheet=document.styleSheets[i];

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

var rule=sheet.cssRules[i];

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

rule.style.样式属性=值

1598947919961

最好的修改样式的方法

如果批量修改多个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)

今日感受:

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

评论