DOM总结

增

1.node.appChild(element)

在元素后面追加新的元素
1

2.node.insertBefore(element,位置)

在元素前面添加新的元素
1

删

1.node.removeChild(删除元素)

删除元素 node表示父级元素
这里父级元素删除子级元素
1
2

改

属性值 元素样式

element.style.css属性名 = 属性值
element.className = 类名（这里的类名会覆盖掉其他的类名，可以把其他的类名也给写上。比如："dmeo box")
element.src\href\value\placeholder\disabled…… = 相关属性值(宽度、高度这种不行，需要采用style\className)
element.innerText\innerHTML 修改普通元素内容
1
2
3
4

注：1.属性名采用驼峰命名法
2.属性值、类名都需要引号 引起来

查

DOM提供的API方法

document.getElementById  获取元素id
以下方法我只获取的到元素，但是操作不了元素 2022-8-2  不知道原因
document.getElementByTagName 获取元素名
document.getElementByClassName 获取元素类名 
1
2
3
4

h5新增方法

document.querySelector()  只能获取到第一个元素\class\id
document.querySelectorAll() 可以获取到所有元素\class\id
1
2

注：获取元素时如果是：类名需要在前面添加一个点(.) id加上一个(#)

节点获取元素

获取父级元素:element.parentNode   注：1.后面没有括号 2.获取到离元素最近的元素（亲爸爸）、（上一级）
获取子级元素:element.children     可以添加索引号
	获取到第一个子级写法element.children[0]
	获取到最后一个子级写法element.children[父级.length - 1]
获取兄弟元素:element.nextElementSibling    下一个兄弟元素
			element.previousElementSibling   上一个兄弟元素
1
2
3
4
5
6

属性操作

自定义属性

element.getAttribute(属性名) : 获取到自定义属性
element.setAttribute(属性名,属性值) : 修改自定义属性
element.removeAttribute(属性名) : 移除属性
1
2
3

创建元素

document.createElement(创建元素名)   需要搭配 ##增 里面的方法
1

注册事件

事件

element.onclick : 点击事件
element.onmouseover : 鼠标经过
element.onmouseout : 鼠标离开
element.onfocus : 鼠标聚焦
element.onblur : 鼠标不聚焦
element.onmousemove : 鼠标事件
element.oncontextmenu : 不能右键
element.onselectstart : 不能选中
element.onkeyup : 键盘上的键松开
element.onkeydown : 键盘上的键按下
element.onkeypress : 键盘上的键按下（无视功能键，比如CTRL、ALT、回车等等）
1
2
3
4
5
6
7
8
9
10
11

注：不能添加括号，添加括号就是方法了

侦听事件

addEVentListener(type,函数,事件流)

type : 这里写事件类型，但是侦听事件前面不能加“on”
函数 : 1.这里可以写匿名函数 2.可以把函数剥离开，在函数位置写上函数名（不能添加括号）
事件流 : 事件流分三个阶段：1.捕获阶段(true) 2.冒泡阶段(false) 3.目标阶段
捕获阶段 : 从上往下依次触发事件，比如：这里有两个盒子都注册了事件，父级box,子级dmeo,点击子级会先触发父级然后触发子级
冒泡阶段 : 从里到外依次触发事件，比如：这里有两个盒子都注册了事件，父级box,子级dmeo,点击子级会先触发子级然后触发父级
注：事件流写上true就为捕获阶段，false\空 就为冒泡阶段
1
2
3
4
5
6

鼠标事件对象

event

在函数里面写上event 简写：e\evt……
event:里面有事件的一系列的数据，比如鼠标位置，事件类型，事件绑定对象等等
可以console.log(event)输出事件对象，可以查看事件的一系列数据
1
2
3

event.target 与 this 的区别

target : 因为谁触发了事件，就返回谁
this : 返回绑定事件对象
1
2

阻止默认行为

比如：a标签点击了它，就会触发事件进行跳转链接。
event.preventDefault() 可以阻止默认行为
return false  也可以阻止默认行为  但是在它之后的代码就不能执行了
1
2
3

阻止冒泡event.stopPropagation()

当你点击了子级元素触发事件，但父级元素也会触发事件
event.stopPropagation() 在子级事件中写上，就不会发生冒泡
注：如果每个子级都不想冒泡，必须每个都写上event.stopPropagaation()
1
2
3

键盘事件对象

event

键盘事件对象后鼠标事件对象相似
1

获取按下的值event.key 和 event.keyCode

event.key : 返回按下键盘对应的值 比如按下 a 返回 a 按下 A 返回 A (不过有兼容性问题：火狐浏览器有的版本就不行)
event.keyCode : 返回按下键盘值对应的ACSLL码上的值 比如按下 1 返回ACSLL上的值是49（不过已经弃用，还是用event.key）
1
2