本文详细介绍了JavaScript中DOM的概念，包括如何获取元素、处理事件、进行元素操作，如属性和样式修改，以及节点操作、事件操作。同时，深入探讨了DOM事件流和事件对象，特别是元素的偏移量、可视区和滚动属性的应用。
目录
1、注册事件onclick/addEventListener
一、概念
D: Document文档 -表示的就是整个HTML网页文档
O： Object对象 -表示将网页中的每一个部分都转换为了一个对象
M： Model模型 -使用模型来表示对象之间的关系，这样方便我们获取对象
JS中通过DOM来对HTML文档进行操作
二、 使用
（一）获取元素
| 根据？获取 | 操作 | 结果 |
|---|---|---|
| ID | document.getElementById('id') | 返回对象 |
| 标签名 | document.getElementByTagName('tag') | 返回对象集合 |
| 类名 | document.getElementByClassName('class') | 集合 |
| document.querySelector('.box') | 第一个盒子 | |
| document.querySelectorAll('.box') | 所有盒子 | |
| 获取body | document.body | |
| 获取html | document.documentElement |
（二）事件（鼠标）
| 代码 | 对应事件 |
|---|---|
| onclick | 点击左键 |
| onmouseover | 经过 |
| onmouseout | 离开 |
| onfocus | 获得焦点 |
| onblur | 失去焦点 |
| onmousemove | 移动 |
| onmouseup | 弹起 |
| onmousedown | 按下 |
鼠标实现模块拖拽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 将事件放入windowload内，实现等界面加载完毕再绑定事件
window.onload = function () {
// 获取box对象
var box = document.getElementById('box');
// 鼠标按下
box.onmousedown = function (event) {
event = event || window.event;
// 获取偏移量
var offsetx = event.clientX - box.offsetLeft;
var offsety = event.clientY - box.offsetTop;
// 鼠标移动
document.onmousemove = function (event) {
event = event || window.event;
// 盒子最终位置 = 鼠标坐标 - 偏移量
var x = event.clientX - offsetx;
var y = event.clientY - offsety;
box.style.left = x + 'px';
box.style.top = y + 'px';
}
// 鼠标弹起，销毁移动和弹起事件
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
<style>
#box {
position: absolute;
height: 50px;
width: 50px;
background-color: red;
}
</style>（三）操作
1、属性操作
div：
| element.innerText = '' | 对元素中文字进行赋值 | 不识别html标签 |
| element.innerHTML = '' | 识别html标签 |
获取属性：
| element.属性 | 针对内置属性 |
| element.getAttribute('属性') | 针对程序员自定义属性 |
赋值/移除自定义属性
| element.属性 = '值' | |
| element.setAttribute('属性', '值') | 自定义 |
| element.removeAttribute('index') |
2、样式操作
| element.style.backgroundColor = 'purple' | 利用css直接对样式进行修改 |
| element.classname = 'change' | 将css中提前写好的样式赋予元素实现样式的修改 |
（四）节点操作
1、父节点
parentNode 最近的父节点
2、子节点
childNodes 返回包含指定节点子节点的集合（所有，包含元素节点、文本节点（换行符）等）
只找元素子节点： ul.children
可以按照index选择： ul.children[0]，即为选择第一个子
3、兄弟节点
| nextElementSibling | 下一个兄弟节点 |
| previousElementSibling | 上一个兄弟节点 |
4、创建节点&添加节点
| createElement('tagName') | 创建一个元素节点 |
| appendchild(child) | 用父节点调用：在父节点的末尾插入一个新的子节点 |
| insertBefore(元素节点，位置) insertBefore(child, ul.children[0]) | 在指定位置前插入 |
5、删除节点
removeChild(child) 返回删除的节点
6、复制节点
ul.children[0].cloneNode(空/false/true) //克隆后需利用appendChild址类的方法添加节点 true：深拷贝，全部复制
空/false：浅拷贝，只复制标签，不复制标签内容
（五）事件操作
1、注册事件onclick/addEventListener
eventTarget.addEventlistener(type, listener[ , uselapture])
| type | 事件类型，eg“click”=“onclick”，还有“mouseover”等类型 | |
| listener | 函数，事件发生时调用 | |
| usecapture | 可选参数 | ture 捕获阶段执行（一般不用） |
| false 默认，冒泡阶段执行 | ||
// 平时常用格式
btn.addEventListener('click', function () {
alert('hello');
}, false)2、删除事件（解绑事件）
- 传统方式：
div.onclick = null;
- eventTarget.removeEventlistener(type, listener [ , uselapture]);
eg: div.removeEventlistener('click', fn); //“fn”为提前写好的函数
三、DOM事件流
按顺序执行监听事件
所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发；在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
四、事件对象
div.onclick = function(event){} //“event”在使用时通常用‘e’代替，在写侦听函数中，当作形参，事件一系列相关数据的集合，例如鼠标点击就包含鼠标点击事件的相关信息（坐标等）
| e.target | 返回触发事件的对象 | 标准 |
| e.srcElement | 非标准，ie6-8使用 | |
| e.type | 返回事件类型 | |
| e.cancelBubble | 阻止冒泡 | 非标准，ie6-8使用 |
| e.returnValue | 阻止默认事件 | 非标准，ie6-8使用 |
| e.preventDefault | 非标准，ie6-8使用（比如不让链接跳转） | |
| e.stopPropagation | 阻止冒泡 | 标准 |
| e.clientx/clienty | 返回对象当前坐标x、y |
（一）元素偏移量offset
1、概述
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
2、常用属性：
| offset系列属性 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位的父级元素， 如果父级都没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
| element.offsetWidth | 可以得到元素的大小：宽度和高度， 包含padding+border+width/height |
| element.offsetHeight |
3、offset与style属性的区别
| offset | style |
|---|---|
| 可以得到任意样式表中的样式值 | 只能得到行内样式表中的样式值 |
| 获得的数值没有单位 | 获得的是带有单位的字符串 |
| offsetWidth包含padding和border的值 | style.width不包含padding和border |
| offsetWidth等属性只读，只能获取不能赋值 | style.width可读可写，可以获取可以赋值 |
| 想要获取元素大小位置，用offset合适 | 想要给元素更改样式值，用style改变 |
（二）元素可视区client
1、概述
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态地得到该元素的边框大小、元素大小等。
2、属性
| 系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括内容区的宽/高度、padding，但不含边框，返回数值不带单位 |
| element.clientHeight |
（三）元素滚动scroll
1、属性
| 系列属性 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上/左侧距离，返回数值不带单位 |
| element.scrollLeft | |
| element.scrollWidth | 返回自身实际的宽/高度，不含边框，返回值不带单位 |
| element.scrollHeight |
2、滚动事件onscroll
div.addEventListener('scroll', function(){});
扫一扫
85
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
