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延迟提示框(定时器)