DOM操作 和 BOM操作，超详细

(1) 内容

标签对象.innerHTML

支持解析标签

标签对象.innerText

不支持解析标签

标签对象.value

标签的数据

(2) 标签属性

标签支持的

标签对象.属性

id,class,title 标签的布尔属性

标签不支持的

标签对象.setAttribute(‘属性’ , 属性值)

设定

标签对象.getAttribute(‘属性’)

获取

标签对象.removeAttribute(‘属性’)

删除

(3) class操作方法

标签对象.className 直接操作和设定

标签对象.classList.add()

原始属性值基础上新增

标签对象.classList.remove()

原始属性值基础上删除

标签对象.classList.toggle()

原始属性值基础上切换

标签对象.classList.replace(属性值1 , 属性值2)

原始属性值基础上替换

(4) 样式

设定

标签.style.属性 = 属性值

设定的是行内样式

获取

标签.style.属性

只能获取 行内样式属性

window.getComputedStyle(标签).属性

标准浏览器获取执行属性

标签.currentStyle.属性

IE浏览器获取执行属性

(5) 标签占位

标签.offsetWidth

标签.offsetHeight

内容+padding+border

标签.clientWidth

标签.clientHeight

内容+padding

标签.clientTop

标签.clientLeft

border 上 左

标签.offsetTop

标签.offsetLeft

定位父级 上 左

BOM操作_三大弹窗

---

• window.alert()

警告框

• window.prompt()

输入框

• window.confirm()

确认框

点击确定返回值是 true

点击取消返回值是 false

BOM操作_获取浏览器相关数据

---

浏览器的相关数据

浏览器上卷 左移 的 距离

有文档类型声明

document.documentElement.scrollTop

document.documentElement.scrollLeft

没有文档类型声明

document.body.scrollTop

document.body.scrollLeft

总有一个数值 是 0 另一个 可以获取到正确的数据

可以使用 逻辑赋值 ||

var 变量 = document.documentElement.scrollTop || document.body.scrollTop

浏览器视窗窗口宽度高度

包含滚动条

window.innerWidth

window.innerHeight

不包含滚动条

有文档类型声明

document.documentElement.clientWidth

document.documentElement.clientHeight

没有文档类型声明

document.body.clientWidth

document.body.clientWidth

总结兼容语法:

一种情况有值 一种情况没有值

使用 逻辑或 做 逻辑赋值

一种情况有 这个方法 一种情况 没有这个方法

使用 if判断 做兼容

BOM操作常见事件:

---

鼠标事件

click 左键单击

dblclick 左键双击

contextmenu 右键单击

mousedown 鼠标按键按下

mouseup 鼠标按键抬起

mousemove 鼠标按键移动

mouseover 鼠标移入

mouseout 鼠标移出

mouseenter 鼠标移入

mouseleave 鼠标移出

键盘事件

keydown 按键按下

keyup 按键抬起

keypress 类似按键按下

表单事件

focus 获取焦点事件

blur 失去焦点事件

change 失去焦点并且数据改变事件

input 输入事件

submit 提交事件

触摸事件

只有移动端设备支持事件

手机 pad…

touchstart 触摸开始

touchend 触摸结束

touchmove 触摸移动

特殊事件

transitionstart 过渡开始

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。

uy9ic-1712095662938)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。

[外链图片转存中…(img-T3gLu0JI-1712095662938)]
[外链图片转存中…(img-l7ymwMCE-1712095662939)]