寒假集训——九

ZiminLi

已于 2023-04-01 16:51:55 修改

阅读量890

点赞数

分类专栏：技术栈笔记文章标签：前端

于 2023-01-10 18:35:25 首次发布

本文链接：https://blog.csdn.net/ZiminLi/article/details/128632457

版权

技术栈笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

八十四、DOM

DOM (Document Object Model) :文档对象模型
其实就是操作html中的标签的一些能力
我们可以操作哪些内容
获取一个元素
移除一个元素
创建一个元素
向页面里面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些css样式
…
DOM的核心对象就是document对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM: 页面中的标签,我们通过js获取到以后，就把这个对象叫做DOM对象

1.获取一个元素

通过js代码来获取页面中的标签
获取到以后我们就可以操作这些标签了

（1）getElementByld

getElementById是通过标签的id名称来获取标签的
因为在一个页面中id是唯一的，所以获取到的就是一个元素
获取到的就是页面中的那个id为box的div标签

<body>
<div id="box"></div>
<script>
var box = document . getElementById('box')console. log(box) // <div></div>
</script>
</body>

（2）getElementsByClassName

（3）getElementsByTagName

（4）querySelector

返回一个对象

（5）querySelectorAll

2.操作元素文本内容

innerHTML
innerText
value

3.操作元素样式

style

只能行内样式方法
读写

getComputedStyle

内部样式，外部样式，行内
获取，不能赋值写样式
标准

currentStyle

ie 低版本

4.操作元素类名

.className

classList属性

toggle

切换

5.DOM节点

DOM 的节点我们一般分为常用的三大类元素节点/文本节点/属性节点
什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点(标签节点)
比如我们标签里面写的文字，那么就是文本节点
写在每一个标签上的属性，就是属性节点

（1）元素节点

我们通过getElementBy…获取到的都是元素节点
head / body / div / ul / …
我们都是普通的元素节点
只是所处的位置不一样
各自的功能不一样
我们都可能是父元素
也有可能是子元素
我们都叫元素节点

（2）属性节点

我们通过getAttribute获取的就是元素的属性节点
元素属性
我是一个元素身上的属性
我也是一个节点
用来描述和修饰这个元素
很多元素上都有我
我叫做属性节点

（3）文本节点

我们通过innerText获取到的就是元素的文本节点
文本内容
我是一段文本包含换行和空格
我也是一个节点
很多标签里面都包含我
我叫做文本节点

（4）注释节点

注释内容
我是一段注释
我也是一个节点
我是单独书写的，不会显示在页面
我叫做注释节点

（5）Document

我是一个页面最大的节点
但是我不是一个元素节点
我只是一个作为承载使用的节点
我叫做根节点

（6）html

我是一个页面最大的元素节点
我包含着页面所有的元素节点
我是最大的元素节点
我叫根元素节点

6.获取节点

childNodes：获取某一个节点下所有的子一级节点
children：所有元素
firstChild
firstElementChild
lastChild
lastElementChild
previousSibling
previousElementSibling
nextSibling
nextElementSibling
parentNode
parentElement

7.操作DOM节点

我们所说的操作无非就是增删改查(CRUD)
创建一个节点(因为向页面中增加之前，我们需要先创建一个节点出来)
向页面中增加一个节点
删除页面中的某一个节点
修改页面中的某一个节点
获取页面中的某一个节点

创建一个节点

createElement: 用于创建一个元素节点
创建出来的就是一个可以使用的div元素

//创建一个div元素节点
var oDiv = document . createElement(' div')
console. log(oDiv) // <div></div>

createTextNode: 用于创建一个文本节点

插入节点

appendChild
insertBefore(要插入的节点,谁的节点)

删除节点(节点对象)

remove：删除自己以及后代

替换节点

replaceChild(新的节点,老的节点)

克隆节点

cloneNode()
false不克隆后代
true克隆后代

8.节点属性

我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点
接下来我们就来聊一些各种节点之间属性的区别
我们先准备一段代码

<body>
	<ul test="我是 u1的一个属性">
		<li>hello</li>
	</ul>
	<script>
		//先获取ul
		var oUl = document . querySelector('ul')
		//获取到ul下的第一个子元素节点，是一个元素节点
		var eleNode = oUl. firstElementchild
		//获取到ul的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
		var attrNode = oUl. attributes[0]
		//获取到ul下的第一个子节点，是一个文本节点
		var textNode = oUl. firstChild
	</script>
</body>

nodeType

nodeType: 获取节点的节点类型，用数字表示
nodeType= 1就表示该节点是一个元素节点
nodeType= 2就表示该节点是一个属性节点
nodeType= 3就表示该节点是一个注释节点

console. log(eleNode. nodeType) // 1
console. log(attrNode . nodeType) // 2
console. log(textNode . nodeType) // 3

nodeName

nodeName: 获取节点的节点名称
元素节点的nodeName就是大写标签名
属性节点的nodeName就是属性名
文本节点的nodeName 都是**#text**

console.log(eleNode . nodeName) // LI
console.log(attrNode . nodeName) // test
console.log(textNode. nodeName) // #text

nodeValue

nodevalue: 获取节点的值
元素节点没有nodevalue
属性节点的nodevalue就是属性值
文本节点的nodevalue 就是文本内容

console. log(eleNode. nodevalue) // null
console. log(attrNode . nodevalue) //我是ul的一个属性
console. log(textNode . nodevaTue) //换行+空格

汇总

-	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

9.获取元素尺寸

就是获取元素的"占地面积"

offsetWidth 和offsetHeight

offsetwidth :获取的是元素内容+ padding + border的宽度
offsetHeight :获取的是元素内容+ padding + border的高度

clientWidth和clientHeight

clientwidth :获取的是元素内容+ padding的宽度
clientHeight :获取的是元素内容+ padding的高度

注意:

获取到的尺寸是没有单位的数字
当元素在页面中不占位置的时候，获取到的是0
display: none;拿不到值

10.获取元素偏移量

offsetLeft和offsetTop
clientLeft和clientTop

注：
参考点：是定位父级
如果父级元素都没有定位，偏移量相对于body

11.初识事件

一个事件由什么东西组成
触发谁的事件:事件源
触发什么事件:事件类型
触发以后做什么:事件处理函数

var oDiv = document . queryselector('div')
oDiv. onclick = function () {}
//谁来触发事件=> oDiv =>这个事件的事件源就是oDiv
//触发什么事件=> onclick =>这个事件类型就是click
//触发之后做什么=> function () {} =>这个事件的处理函数

我们想要在点击div以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document. queryselector(' div')
oDiv. onclick = function () {
	console. log('你点击了div')
}

当我们点击div的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数
dom0 类型–后面会覆盖前面的 dom节点.οnclick=function(){}
dom2 绑定多个事件处理函数按照顺序执行 dom节点.addEventListener
dom2兼容性 ie6、7、8 dom节点.attachEvent
事件解绑-dom0 dom节点.οnclick=null
事件解绑dom2
dom节点.removeEventListener
dom节点.detachEvent

12.常见的事件

我们在写页面的时候经常用到的一些事件
大致分为几类,浏览器事件/鼠标事件/键盘事件/表单事件/触摸事件
不需要都记住，但是大概要知道

浏览器事件

load :页面全部资源加载完毕
scroll :浏览器滚动的时候触发
…

鼠标事件

click :点击事件
dblclick :双击事件
contextmenu :右键单击事件
mousedown :鼠标左键按下事件
mouseup :鼠标左键抬起事件
mousemove :鼠标移动
mouseover :鼠标移入事件
mouseout :鼠标移出事件
mouseenter :鼠标移入事件
mouseleave :鼠标移出事件
…

键盘事件

keyup :键盘抬起事件
keydown: 键盘按下事件
keypress :键盘按下再抬起事件
…

表单事件

change :表单内容改变事件
input :表单内容输入事件
submit : 表单提交事件
reset：表单重置事件
focus：获取焦点事件
blur：失去焦点事件
…

触摸事件

touchstart :触摸开始事件
touchend :触摸结束事件
touchmove :触摸移动事件
touchcancel
…

13.事件对象

什么是事件对象?
就是当你触发了一个事件以后，对该事件的一些描述信息
例如:
你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
你触发一个键盘事件的时候，你按的是哪个按钮
…
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象
浏览器给了我们一个黑盒子,叫做window. event,就是对事件信息的所有描述
比如点击事件
你点在了0， 0位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
你点在了10， 10位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
…

oDiv. onclick = function () {
	console.log(window.event.X轴坐标点信息)
	console.log(window.event.Y轴坐标点信息)
}

这个玩意很好用，但是一般来说，好用的东西就会有兼容性问题
在IE低版本里面这个东西好用，但是在高版本IE和Chrome里面不好使了
我们就得用另一种方式来获取事件对象

鼠标事件

clientX clientY 距离浏览器可视窗口的左上角的坐标值
pageX pageY 距离页面文档流的左上角的坐标值
offsetX offsetY 距离触发元素的左上角的坐标值

14.事件的传播

当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
就像上面的图片一样
点击在红色盒子上的时候，会触发红色盒子的点击事件
也是点击在了粉色的盒子上,也会触发粉色盒子的点击事件
也是点击在了body上,也会触发body的点击事件
也是点击在了html上，也会触发html的点击事件

15.阻止事件传播

event.stopPropagation
ie event.cancleBubble=true

16.阻止默认行为

dom0 ：return false
dom2 ：event.preventDefault()
ie ：event.returnValue=false

17.事件委托

就是把我要做的事情委托给别人来做
因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
所以我们就可以把子元素的事件委托给父元素来做

事件触发

点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件,那么就可以触发父元素的点击事件
像下面一段代码，当你点击ul的时候肯定会触发
但是当你点击li的时候，其实也会触发

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<script>
		var oUl = docuemnt. querySelector('ul')
		oUl. addEventListener('click', function (e) {console. log('我是ul的点击事件，我被触发了')
	</script>
</body>

target

target 这个属性是事件对象里面的属性,表示你点击的目标
当你触发点击事件的时候，你点击在哪个元素上, target 就是哪个元素
这个target也不兼容,在IE下要使用srcElement
下面的代码，当你点击ul的时候，target 就是ul
当你点击在li上面的时候，target就是li

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<script>
		var oUl = docuemnt. querySelector('ul')
		oUl. addEventListener('click', function (e) {
			e = e||window. event
			var target = e. target || e. srcElement
			console. log(target)
		})
	</script>
</body>