DOM文档对象模型（思维导图版）

最新推荐文章于 2024-02-01 16:59:57 发布

Conradine_Lian

最新推荐文章于 2024-02-01 16:59:57 发布

阅读量679

点赞数 2

文章标签： js javascript dom 前端

本文链接：https://blog.csdn.net/Conradine_Lian/article/details/105448594

版权

今天我们一起用思维导图帮大家梳理一下DOM文档对象模型的知识点，来看一看吧！

dom文档对象模型

一、节点类型

1. document 文档类型

document节点

documemtElement属性始终指向页面中的<html>元素

document.documentElement==document.childNodes[1]
// chrome浏览器将doctype作为第一个子节点

多个选择器叠加

<p class="mysection active"></p>
document.querySelector('.mysection.active');//不加空格，空格表示后代选择器
documnet.getElementsByClassName('mydiv active'); 
// IE9+ 支持，空格指的是类名的分隔符，不是后代选择器

焦点管理

document.activeElement属性,返回获取焦点的元素.默认返回body元素，如果在文档加载过程中可能返回null。
document.hasFocus()方法,用来确定文档是否获取焦点。返回true/false
focus()方法，使元素获取焦点

2. element 元素类型

element节点

特性的获取、设置、删除方法

getAttribute(‘特性名’); 获取特性。可以获取自定义属性。获取没有设置属性值的属性或不存在的属性时,返回null
getAttribute(‘style’)；返回style特性值中包含的css文本
dom.style；返回一个对象
setAttribute(‘特性名’,‘特性值’); 设置特性，存在替换，不存在添加。可以设置自定义属性
removeAttribute(‘特性名’);移除特性 mydiv.className=’’;//清空特性class的值

3. attr 特性类型

attr节点
bug：IE7attributes属性会打印所有属性,而不是只打印符合条件的元素
解决：if(mydiv.attributes[i].specified==true){//specified解决IE的问题}

4. text 文本类型

text节点
bug：创建后添加的文本,和原来的原本是两个文本节点,不符合原有文本样式
解决：使用元素的normalize()方法规范化文本，合并为一个文本节点

二、节点的属性和方法

节点的属性和方法

firstChild.nodeName.toLowerCase() == 'h1'//判断firstChild是否是h1标签

childNodes，firstChild，lastChild：获取的子节点中包含空的文本节点。
children，childElementCount，firstElementChild，lastElementChild，获取元素子节点，不包含空文本节点。

三、操作节点

操作节点

四、事件处理程序

IE 事件冒泡流（子元素->父元素）；Netscape是事件捕获流（父元素->子元素）
浏览器中大部分事件都是冒泡事件流 div->body->html->document

事件处理程序

五、事件对象

事件对象

六、事件类型

1. 用户界面类型

用户界面类型

2. 焦点事件

焦点事件

3. 鼠标事件

鼠标事件
使用键盘tab键可以获取焦点回车，只响应点击事件，不响应按下抬起事件。
响应顺序：mousedown->mouseup->click 都可以冒泡

滚轮事件

mousewheel事件鼠标滚轮事件鼠标拖动滑块使页面滚动不能触发
event.wheelDelta //向上滑动:180 向下滑动:-180
火狐：DOMMouseScroll事件;event.detail 向上滚动：-3；向下滚动：3

4. 键盘和文本事件

键盘事件

	event.shiftKey //是否同时按下 shift键
	event.ctrlKey //是否同时按下 ctrl键
	event.altKey //是否同时按下 alt键
	event.metaKey//是否同时按下 window键

补充

偏移量只读

offsetHeight=边框+内边距+width
offsetWidth=边框+内边距+height
offsetTop=与父元素的上边距；上边框和页面顶端的距离,如果有定位,返回与最近有定位的父元素的距离
offsetLeft=与父元素的左边距
offsetParent属性，返回值：dom元素的基准父元素默认是body,除非给定位

浏览器窗口的可视大小

document.documentElement.clientHeight
document.documentElement.clientWidth
随着窗口的变化而改变

元素内部空间的大小 client 不带边框

clientHeight: 不涉及滚动条时,clientHeight=offsetHeight-边框
clientWidth: 不涉及滚动条时,clientWidth=offsetWidth-边框
页面可见区域宽： document.body.clientWidth;
页面可见区域高： document.body.clientHeight;

滚动大小

scrollHeight: 没有滚动条时=clientHeight
scrollWidth：没有滚动条时=clientWidth
scrollLeft：滚动条向左滚动的大小
scrollTop：滚动条向上滚动的大小 IE7及以下 document.body.scrollTop
- 为style.top 赋值时，scrollTop的值也会改变
- document 或 window 触发
- document.documentElement.scrollTop获取窗口滚动条向上滚动的大小
scrollIntoView(false);参数:true（默认）:元素和页面顶对齐； false:元素和页面底对齐