DOM操作 和 BOM操作(1)，最新“美团+字节+腾讯”三面问题

补充说明:

所谓的伪数组

支持 []语法 和 length 属性

可以执行的函数方法 和 数组不同

DOM操作

---

1, 本质是 获取 和 操作 设定 标签对象

2, 获取 标签对象

方便的,不兼容低版本IE的

document.querySelector(‘条件’);

独立的标签对象

可以直接操作

document.querySelectorAll(‘条件’);

标签对象伪数组

[]语法获取一个独立的标签对象 或者 循环遍历操作

支持 forEach

兼容所有浏览器的

document.getElementById(‘id属性值’);

独立的标签对象

document.getElementsByClassName(‘class属性值’);

标签对象伪数组

不能forEach

document.getElementsByTagName(‘标签名称’);

标签对象伪数组

不能forEach

document.getElementsByName(‘name属性值’);

标签对象伪数组

可以forEach

特殊标签

document.documentElement

html标签

document.body

body标签

document.head

head标签

document.title

title标签的内容

3, 操作设定标签

(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操作_获取浏览器相关数据

---

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

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

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

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

G-1710872106937)]
[外链图片转存中…(img-TjfqFZVh-1710872106938)]
[外链图片转存中…(img-yvqcjzsl-1710872106938)]
[外链图片转存中…(img-5o0sVuiT-1710872106939)]

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

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-zfnlylor-1710872106939)]