JS中的DOM

最新推荐文章于 2024-12-06 13:07:24 发布

原创最新推荐文章于 2024-12-06 13:07:24 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了DOM（文档对象模型）的概念及其基本操作，包括查询、创建、添加、删除、克隆和替换元素的方法。同时，文章深入探讨了DOM元素类型、自定义属性、样式读写、文档碎片等高级主题。

1.DOM的概念及作用

DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r2E5f4U7-1588756398359)(C:\Users\Administrator\Desktop\第二阶段大纲\img\wps0.png)]

2.DOM的基本操作

查询（获取元素）

getElementById()：获取特定 ID 元素的节点–最优

getElementsByTagName()：获取相同元素的节点列表，返回类数组，使用[0]来获取

getElementsByClassName()：获取相同类名的节点列表（IE8及以下不支持），返回类数组

querySelector()：通过选择器获取元素，如果获取多个只返回第一个。

querySelectorAll()：通过选择器获取元素，可同时获取多个元素，类数组。

创建、添加、删除、克隆、替换

document.createElement() 创建一个元素节点

父节点.appendChild(元素节点) 把元素节点插入到父节点的内部最后的位置

父节点.insertBefore(新的元素节点,存在元素节点) 在父节点内,把新的元素节点插入到已经存在的元素切点的前面

父节点.removeChild(node) 删除父节点内部的子节点

obj.cloneNode(）克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆。

父节点.replaceChild(新添加的节点 , 被替换的节点) 替换子节点

3.DOM元素类型

节点可以分为元素节点、属性节点和文本节点…，他们分别用不同的数字代表类型。

例如：元素(1) 属性(2) 文本(3) 注释(8)

每个节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue

4.自定义属性及getAttribute等方法

getAttribute() 获取特定元素节点属性的值，某些低版本浏览器IE8不支持

setAttribute() 设置特定元素节点属性的值，某些低版本浏览器不支持

removeAttribute() 移除特定元素节点属性，某些低版本浏览器不支持

5.outerHTML/innerHTML/innerText

innerHTML：读写元素节点里的内容（包括元素）,从节点起始位置到终止位置的全部内容,包括内部的元素。

outerHTML：读写元素节点里的内容（包括元素）,除了包含innerHTML全部内容外, 还包含元素节点本身。

innerText：读写某个元素节点的文本内容

6.childNodes节点的集合

childNodes 获取当前元素节点的所有子节点,这里面包含空白节点，但在IE9之前，IE浏览器会自动忽略空白节点.

重点：

元素选择(利用方法获取元素 + innerHTML)

节点选择(通过元素节点，属性节点，文本节点进行获取) + (childNodes+nodeType+nodeValue)

childNodes与children的区别

children不考虑空白节点，而childNodes考虑空白节点，而且它们都是类数组。

高级选取：第一个子节点，最后一个子节点，上一个兄弟节点，下一个兄弟节点(包含空白和不包含空白等分成8个属性)

firstChild:第一个子节点(包含空白)

firstElementChild:第一个子节点(不包含包含空白)

7.节点的高级选取

document:获取整个文档对象document

document.documentElement 获取的html标签元素

document.title 获取title标题元素

document.body 获取body标题元素

parentNode 获取当前节点的父节点

8.读写css样式的值

获取css属性值：offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent（定位父级）

获取样式及兼容问题：getComputedStyle / currentStyle

9.文档碎片（createDocumentFragment）

文档碎片在理论上可以提高DOM操作的执行效率，将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素–面试

10.强化练习

动态创建表格和删除操作

进度条–案例素材中有结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ks30Sm0F-1588756398371)(C:\Users\Administrator\Desktop\第二阶段大纲\img\wps4.jpg)]

简易年历–案例素材中有结构

隔行变色–(索引 % 2 确定是否添加背景)

网页换肤–自定义属性

自动登录勾选提示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O2nxyGl5-1588756398377)(C:\Users\Administrator\Desktop\第二阶段大纲\img\wps5.jpg)]

点击按钮换图片(配合css过度效果的特效)–百度和京东轮播图

tab切换案例

扩展案例： QQ延迟提示框(定时器)