前端进阶-DOM文档对象

努力学习的廖同学

已于 2023-12-11 14:40:27 修改

阅读量80

点赞数

文章标签：前端

于 2023-10-17 21:12:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56770663/article/details/133891036

版权

本文详细介绍了DOM的概念，如何获取和操作DOM节点，包括自定义属性设置、节点属性、节点操作以及各种JavaScript事件，如UI事件、焦点事件、鼠标事件等。此外，还讲解了事件处理、事件流机制、事件委托和阻止事件冒泡的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是 DOM

DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。

2、DOM 节点的获取与操作

2.1 设置自定义属性

id.setAtteribute('data-name','imooc')

id.getAttribute('data-name')

2.2 节点属性

nodeType（节点类型）nodeName、nodeValue、tagName、childNodes

<div id="john" name="myname">John</div>
var id = document.getElementById("john");
id.nodeType  //1
id.nodeName  //DIV
id.nodeValue  //null

var idattr =id.getAttributeNode("name");
id.nodeType  //2
id.nodeName  //name
id.nodeValue  //myname

var idtext =id.firstChild
id.nodeType  //3
id.nodeName  //#text
id.nodeValue  //John

2.3 节点的操作

<div id="id" class="class" onclick=fn>11</div>
document.getElementById("id"):通过元素的id获取元素对象
document.getElementsByTagName("div"):通过元素的标签名获取元素对象合集
document.getElemensByClassName("class"):通过元素的class属性获取元素对象合集

//里面的选择器要加符号
id=document.querySelector("#id"):通过CSS选择器获取元素对象
document.querySelectorAll(".class"):通过CSS选择器获取元素对象合集 特别，返回数组


node=document.createElement("tagname"):创建一个新的元素节点
const myText = document.createTextNode('Hello, world!');


id.appendChild(myText);将一个节点添加到另一个节点的子节点列表的末尾

id.parentNode.removeChild(id);
childs = id.childNodes; 
id.removeChild(childs[i]); 

childNodes属于NodeList集合，它会返回所有的子节点，包括文本、标签、注释等等。
children数据HTMLCollection集合，它会返回所有HTML元素节点。

childNodes:获取一个节点的所有子节点
firstChild:获取一个节点的第一个子节点
lastChild:获取一个节点的最后一个子节点
nextSibling:获取一个节点的下一个兄弟节点
previousSibling:获取一个节点的上一个兄弟节点

id.innerHTML="xxx":获取或设置一个元素的HTML内容
document.write("xxx")
id.style.display=none:获取或设置一个元素的CSS样式
id.src="xxx":获取或设置一个元素的CSS样式

id.addEventListener(event,function,useCapture):为一个元素添加事件监听器
// event 描述事件名称的字符串，例如：click，mousemove等等事件，注意：不是onclick，是click，不要使用“on"前缀。
//function 当事件发生后，需要执行的操作
//useCapture 可选，true--在捕获阶段执行，false(默认)----在冒泡阶段执行。具体请看下面。


id.removeEventListener(event,function):移除一个元素的事件监听器

3、js事件

事件三要素：事件源(谁)，事件类型(什么事件)，事件处理程序(做啥)

3.1 事件类型

参考

JS的事件类型（详解）_js 事件分类_搞前端的小菜的博客-优快云博客

3.1.1 ui事件：

window.onload，window.unonload，window.onresize，window.onscroll，selectionchange(document.getSelection() 选中文本信息)

3.1.2 焦点事件

最主要的两个是btn.focus和btn.blur

3.1.3 鼠标事件：btn.ondblclick

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移出事件是mouseout。

mouseenter：鼠标移入子元素时不会再次触发mouseenter事件，对应的移出事件是mouseleave。

3.1.4 键盘事件

(1) keydown：(2) keypress：(3) keyup：

然后值得注意的是，当发生keydown和keyup事件的时候，event对象的keyCode为该键的键值。

3.1.5 鼠标坐标

clientX,clientY: 鼠标在可视区的坐标,可视区即展示在用户面前的页面区域

pageX,pageY: 鼠标在整个html页面的坐标。一般实际应用使用pageX和pageY

screenX,screenY: 鼠标在电脑屏幕的坐标，即整个电脑屏幕，15寸这个s

3.1.6元素的位置和大小-三大系列

利用元素位置实现内容与图片懒加载，以后补充。。。

3.2 事件处理程序

3.2.1事件绑定

dom0是给元素添加私有属性，只能添加一个

dom2是给元素的原型对象的事件池添加方法，添加多个，会去重

3.2.2 移除事件绑定

dom0

dom2

区别load,DOMContentLoaded

如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

window.onload和$(document).ready()区别

3.2.3 事件的传播机制

事件流:事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

事件传播机制:false(默认)----在冒泡阶段执行

过程：当前元素的某个事件行为被触发，浏览器首先会从最外层的window向当前这个元素一层一层的查找，这个叫捕获阶段（目的是为冒泡阶段传播提供路径）。目标阶段：匹配事件源时，将当前元素的对应事件行为触发之后，如果绑定了方法则执行对应的绑定方法，冒泡阶段：按照捕获阶段的路径，从内到外将所有的祖先元素(一直到window)相应的事件依次触发，有绑定方法则执行