DOM文档对象模型（思维导图版）-白红宇的个人博客

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

发布日期：2022-02-22 16:04:46 浏览次数：19 分类：技术文章

本文共 2421 字，大约阅读时间需要 8 分钟。

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

dom文档对象模型

一、节点类型

1. document 文档类型

document节点

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

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

多个选择器叠加


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:元素和页面底对齐

今天的分享就到这里啦，文中若有不当之处，若能多多指出，不胜感激~

转载地址：https://blog.csdn.net/Conradine_Lian/article/details/105448594 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：秒懂JS创建对象的方式

下一篇：三分钟搞定JS继承

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

一、节点类型

1. document 文档类型

2. element 元素类型

3. attr 特性类型

4. text 文本类型

二、节点的属性和方法

三、操作节点

四、事件处理程序

五、事件对象

六、事件类型

1. 用户界面类型

2. 焦点事件

3. 鼠标事件

4. 键盘和文本事件

补充

偏移量只读

浏览器窗口的可视大小

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

滚动大小

发表评论

最新留言

关于作者

推荐文章

一、节点类型

1. document 文档类型

2. element 元素类型

3. attr 特性类型

4. text 文本类型

二、节点的属性和方法

三、操作节点

四、事件处理程序

五、事件对象

六、事件类型

1. 用户界面类型

2. 焦点事件

3. 鼠标事件

4. 键盘和文本事件

补充

偏移量 只读

浏览器窗口的可视大小

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

滚动大小

发表评论

最新留言

关于作者

推荐文章

偏移量只读