本文详细介绍了如何在JavaScript中通过DOM操作HTML页面元素，包括获取元素、修改样式、类名和属性，以及处理元素内容、尺寸和偏移量。同时涵盖了BOM和DOM获取窗口尺寸的区别。
DOM介绍
- DOM - Document Object Model
- 文档对象模型
- 是浏览器提供的一套可以操作浏览器文档相关内容的方法或属性
- DOM中的顶级对象是
document对象- DOM操作就是操作文档中的元素（标签）相关内容
- 操作页面元素的样式
- 操作页面元素的类名
- 操作页面元素的属性
- 操作页面元素的内容
- 操作页面元素
- …
- DOM操作就是操作文档中的元素（标签）相关内容
- DOM操作流程
- 获取操作的DOM元素
- 根据需求操作DOM元素
- …
获取页面DOM元素
- js中获取的页面元素，都是复杂数据类型
- 非常规获取页面元素
document.documentElement- 获取页面中的html标签元素
document.head- 获取页面中的head标签元素
document.body- 获取页面中的body标签元素
document.forms- 获取页面中的所有表单标签元素组成的伪数组
document.images- 获取页面中的所有img标签元素组成的伪数组
document.scripts- 获取页面中的所有script标签元素组成的伪数组
- 常规获取页面元素
- 通过标签id值获取
- 语法：
document.getElementById(id值) - 返回值：页面中对应id值的标签元素，如果没有则返回
null
- 语法：
- 通过标签类名获取
- 语法：
document.getElementsByClassName(类名) - 返回值：页面中所有对应类名的标签元素组成的伪数组，如果没有则返回空伪数组
- 语法：
- 通过标签名获取
- 语法：
document.getElementsByTagName(标签名) - 返回值：页面中所有对应标签名的标签元素组成的伪数组，如果没有则返回空伪数组
- 语法：
- 通过选择器获取
- 语法：
document.querySelector(选择器)- 注意：此处选择器写法和css中的一样
- 注意：此方法获取元素是H5新增，低版本IE不能使用
- 返回值：页面中对应选择器的第一个标签元素，如果没有则返回
null
- 语法：
- 通过选择器获取
- 语法：
document.querySelectorAll(选择器)- 注意：此处选择器写法和css中的一样
- 注意：此方法获取元素是H5新增，低版本IE不能使用
- 返回值：页面中所有对应选择器的标签元素组成的伪数组，如果没有则返回空伪数组
- 注意：
- 通过
querySelectorAll获取的标签元素伪数组自带了forEach方法（和数组的forEach方法作用一样），可以使用forEach遍历 - 其他的标签元素伪数组，没有
forEach方法
- 通过
- 语法：
- 通过标签id值获取
- 注意：页面元素是在js中的说法，本质上就是html中的标签
操作标签元素样式
- 获取元素的样式
- 获取元素样式
- 语法1：
元素.style.样式名 - 语法2：
元素.style['样式名'] - 返回对应的样式值，只能获取元素的行内样式，若没有则返回空字符串
''
- 语法1：
- 获取元素样式（万能获取）
- 语法1：
window.getComputedStyle(元素).样式名 - 语法2：
window.getComputedStyle(元素)['样式名'] - 以字符串的形式返回元素对应的样式值（带单位）
- 注意：不能兼容低版本IE
- 低版本IE获取样式语法（了解）：
元素.currentStyle.样式名
- 语法1：
- 获取元素样式
- 设置元素样式
- 语法1：
元素.style.样式名 = 样式值 - 语法2：
元素.style['样式名'] = 样式值
- 设置的样式都是添加给元素的行内样式
- 语法1：
- 操作元素样式注意事项
- 获取的样式值在js中都是以字符串形式返回
- 如果样式名是多单词组成的则使用驼峰写法
- 比如：
background-color ==> backgroundColor
- 比如：
- 或者也可以使用数组关联法
- 比如：
background-color ==> ['background-color']
- 比如：
操作标签元素类名
- 操作元素类名的目的：为了可以批量操作元素样式
- className
- 获取元素类名
- 语法：
元素.className - 返回值：以字符串的形式返回元素的所有类名
- 语法：
- 设置元素类名
- 语法：
元素.className = 类名 - 注意：覆盖性设置
- 语法：
- 获取元素类名
- classList
- 元素都具有
classList属性，值是该元素所有类名组成的伪数组 - 这个伪数组提供了多个API方法用于操作元素类名
- 添加类名：
元素.classList.add(类名) - 移除类名：
元素.classList.remove(类名) - 切换类名：
元素.classList.toggle(类名)- 如果类名存在则移除，如果不存在则添加
- 判断类名是否存在：
元素.classList.contains(类名)- 返回布尔值，如果存在则返回
true，不存在则返回false
- 返回布尔值，如果存在则返回
- 添加类名：
- 元素都具有
操作标签元素属性
- 在标签内的除了标签名以外的内容就是是标签的属性
- 标签属性分类（按照书写分类）
- 原生属性
- 是W3C规范中规定好的属性名
- 普通标签：
id, class, src, href, title... - 表单内的标签：
name, type, value, placeholder, readOnly, checked...
- 非H5自定义属性
- 在标签中自行定义的属性名
- H5自定义属性
- 为了规范自定义属性的书写
- 只要是以
data-开头的属性都是H5自定义属性
- 只要是以
- 为了规范自定义属性的书写
- 注意：在标签中有一些属性比较特殊
- 这类属性的属性值是什么不重要，甚至可以没有属性值，重要的是标签是否具有该属性
- 而这类属性在js中获取到的属性值为布尔值，而且设置的时候也是使用布尔值进行设置
- 所以我们将这类属性称为布尔属性，大部分的布尔值属性都是标签元素的原生属性
- 原生属性
- js操作元素的属性
- 原生属性
- 获取：
元素.属性名 - 设置：
元素.属性名 = 属性值- 注意：操作类名时，因为
class在js中具有特殊含义，所以改为使用className
- 注意：操作类名时，因为
- 获取：
- 操作属性（一般操作自定义属性）
- 获取：
元素.getAttribute(属性名)- 注意：属性名不存在则返回
null
- 注意：属性名不存在则返回
- 设置：
元素.setAttribute(属性名, 属性值)- 存在修改，不存在新增
- 移除：
元素.removeAttribute(属性名) - 注意：
- 这一套语法可以操作任意类型属性
- 元素的原生布尔属性不能使用此方法进行操作，因为此方法只能设置属性的字面值（自动作为字符串属性值）
- 获取：
- H5自定义属性
- 元素都具有
dataset属性，值为一个对象- 这个对象中的数据，都是由该元素的H5自定义属性名与属性值组成的键值对
- 所以对该元素的H5自定义属性操作就是对
元素.dataset进行数据操作
- 获取：
元素.dataset.属性名 - 设置：
元素.dataset.属性名 = 属性值 - 移除：
delete 元素.dataset.属性名
- 元素都具有
- 原生属性
操作标签元素内容
- innerText
- 操作元素的文本内容
- 获取：
元素.innerText - 设置：
元素.innerText = 文本内容
- innerHTML
- 操作元素的超文本内容
- 获取：
元素.innerHTML - 设置：
元素.innerHTML = 超文本内容
- value
- 操作大部分表单元素的内容
- 获取：
元素.value - 设置：
元素.value = 内容
- 注意：所有的元素内容设置都是覆盖性设置
获取DOM元素尺寸
- 有两套获取DOM元素尺寸的语法
- offset
- 语法：
元素.offsetWidth- 获取元素的
内容 + padding + border区域的宽度
- 获取元素的
- 语法：
元素.offsetHeight- 获取元素的
内容 + padding + border区域的高度
- 获取元素的
- 语法：
- client
- 语法：
元素.clientWidth- 获取元素的
内容 + padding区域的宽度
- 获取元素的
- 语法：
元素.clientHeight- 获取元素的
内容 + padding区域的高度
- 获取元素的
- 语法：
- offset
获取DOM元素偏移量
- offsetParent
- 语法：
元素.offsetParent- 获取元素的相对定位的父级（定位父级）
- 注意：如果元素一直找到
body都没有定位父级则默认将body作为元素的定位父级
- 语法：
- offset
- 语法：
元素.offsetTop- 获取元素相对于定位父级的上偏移量
- 语法：
元素.offsetLeft- 获取元素相对于定位父级的左偏移量
- 偏移量：元素的 上/左 边相对于定位父级的 上/左 边的距离
- 语法：
- client（不常用）
- 语法：
元素.clientTop- 获取元素的上边框宽度
- 语法：
元素.clientLeft- 获取元素的左边框宽度
- 即元素的
内容+padding区域的 左/上 边到元素 左/上 边的距离
- 语法：
获取可视窗口尺寸
- BOM获取（包含滚动条）
window.innerWidthwindow.innerHeight
- DOM获取（不包含滚动条）
document.documentElement.clientWidthdocument.documentElement.clientHeight
1350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
