DOM总结

1.node.appChild(element)

在元素后面追加新的元素

2.node.insertBefore(element,位置)

在元素前面添加新的元素

1.node.removeChild(删除元素)

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

属性值 元素样式

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

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

DOM提供的API方法

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

h5新增方法

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

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

节点获取元素

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

属性操作

自定义属性

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

创建元素

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

注册事件

事件

element.onclick : 点击事件
element.onmouseover : 鼠标经过
element.onmouseout : 鼠标离开
element.onfocus : 鼠标聚焦
element.onblur : 鼠标不聚焦
element.onmousemove : 鼠标事件
element.oncontextmenu : 不能右键
element.onselectstart : 不能选中
element.onkeyup : 键盘上的键松开
element.onkeydown : 键盘上的键按下
element.onkeypress : 键盘上的键按下(无视功能键,比如CTRL、ALT、回车等等)

注:不能添加括号,添加括号就是方法了

侦听事件

addEVentListener(type,函数,事件流)

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

鼠标事件对象

event

在函数里面写上event 简写:e\evt……
event:里面有事件的一系列的数据,比如鼠标位置,事件类型,事件绑定对象等等
可以console.log(event)输出事件对象,可以查看事件的一系列数据
event.target 与 this 的区别
target : 因为谁触发了事件,就返回谁
this : 返回绑定事件对象
阻止默认行为
比如:a标签点击了它,就会触发事件进行跳转链接。
event.preventDefault() 可以阻止默认行为
return false  也可以阻止默认行为  但是在它之后的代码就不能执行了
阻止冒泡event.stopPropagation()
当你点击了子级元素触发事件,但父级元素也会触发事件
event.stopPropagation() 在子级事件中写上,就不会发生冒泡
注:如果每个子级都不想冒泡,必须每个都写上event.stopPropagaation()

键盘事件对象

event

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

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

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页
评论 1

打赏作者

是喜哈哈呀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值