HTMLElement
HTMLElement 是所有 HTML 元素对应 JS 对象的基类接口
Event
change
- 类型：Event
当用户更改 input、textarea、select元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。
基于表单元素的类型和用户对元素的操作的不同，change 事件触发的时机也不同：
- 当
<input type="checkbox">元素被选中或取消选中时（通过点击或使用键盘）； - 当
<input type="radio">元素被选中时（但不是取消选中时）； - 当用户显式提交改变时（例如：通过鼠标点击了 select的一个下拉选项，通过Input type=date，通过input type=file）
- 当标签的值被修改并且失去焦点后，但未提交时（例如：对textarea、
text、search、url、tel、email或password类型的、input元素进行编辑后）。
HTML 标准列出了应该触发 change 事件的 类型。
Properties
| 属性 / 方法 | 说明 |
|---|---|
style | 行内样式对象 |
className | class 字符串 |
classList | class 操作集合 |
hidden | 是否隐藏 |
offsetWidth / offsetHeight | 布局尺寸 |
offsetTop / offsetLeft | 相对定位 |
getBoundingClientRect() | 位置信息 |
innerText
- 类型：string
- 定义：渲染后的不含标签的纯文本（会受CSS样式影响，因为已经渲染）
box.innerText; // "Hello World"style
类型：CSSStyleDeclaration
我们可以通过dom.style获取元素的内联样式得到样式对象。对象中的所有样式属性均可以被修改。
const el = document.getElementById('box')
// 单个属性
el.style.color = 'red'
el.style.fontSize = '16px'
// 注意 JS 属性名和 CSS 属性名不同
el.style.backgroundColor = 'blue' // background-color → backgroundColor- 当给样式赋值为空字符串时，相当于删除内联样式
- 当给样式的赋值不合法时，赋值语句无效，不会报错
- CSS的短横线命名需要使用驼峰代替
el.style无法获取css中写的样式
我们也可以使用getComputedStyle(dom)获取元素的计算属性，但是这是只读的，无法被修改。
className
class由于和JS中的class关键字重名，因此修改DOM的class属性时需要使用className
<div id="box" class="container active"></div>const el = document.getElementById('box')
console.log(el.className) // "container active"设置 class：
el.className = 'new-class another-class'classList
el.classList 是 操作元素 class 的现代 API，比 className 更灵活、语义清晰，也更安全。它提供了一系列方法来增删切换 class，不需要手动拼接字符串。
| 方法 | 说明 | 示例 |
|---|---|---|
add(class1, class2…) | 添加一个或多个 class | el.classList.add('new', 'big') |
remove(class1, class2…) | 删除一个或多个 class | el.classList.remove('active') |
toggle(class[, force]) | 有就删，没有就加 | el.classList.toggle('hidden') |
contains(class) | 检查 class 是否存在 | el.classList.contains('active') // true |
replace(oldClass, newClass) | 替换 class | el.classList.replace('container', 'wrapper') |
const el = document.getElementById('box')
// 添加
el.classList.add('active')
// 删除
el.classList.remove('container')
// 切换
el.classList.toggle('hidden') // 有就删，没有就加
el.classList.toggle('hidden', true) // 强制添加
el.classList.toggle('hidden', false)// 强制删除
// 判断
if (el.classList.contains('active')) {
console.log('active 存在')
}
// 替换
el.classList.replace('active', 'inactive')dataset
只读属性 dataset 提供了对元素上自定义数据属性（data-*）读/写访问。它暴露了一个字符串映射（DOMStringMap），其中包含每个 data-* 属性条目。
dataset 属性本身不能直接写入（无法修改引用值）。但是 dataset 的单个属性可以被修改
自定义 data 属性的属性名与没有 data- 前缀的 HTML 属性相同，并且在移除单个破折号（-）后，获得属性的“驼峰”命名。
<div id="box" data-id="123" data-user-name="zhangsan"></div>const el = document.getElementById('box')
el.dataset.id // "123"
el.dataset.userName // "zhangsan"
el.dataset.userName='666'//'666'value
value 定义在具体的表单元素接口上，而不是 HTMLElement 的通用属性。
| 元素 | 对应接口 | 是否有 value |
|---|---|---|
<input> | HTMLInputElement | ✅ |
<textarea> | HTMLTextAreaElement | ✅ |
<select> | HTMLSelectElement | ✅ |
<option> | HTMLOptionElement | ✅ |
<button> | HTMLButtonElement | ✅ |
<form> | HTMLFormElement | ❌ |
<div> / <span> | HTMLElement | ❌ |
Methods
click
HTMLElement.click() 方法模拟鼠标单击元素。当在某个元素上调用时，会触发元素的 click 事件（除非该元素设置了 disabled 属性）。
getAttribute
getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）
let attribute = element.getAttribute(attributeName);attribute是一个包含attributeName属性值的字符串。attributeName是你想要获取的属性值的属性名称。
setArrtibute
setAttribute() 方法用于设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
setAttribute(name, value)一个用于指定要设置的属性的名称的字符串。当在 HTML 文档中的 HTML 元素上调用
setAttribute()方法时，该方法会将其属性名称自动转换为全小写形式。一个包含要赋给属性的值的字符串。任何指定的非字符串值都会自动转换为字符串。
对于布尔属性，只要它们出现在元素中，就会被视为是
true。你应该将value设置为空字符串（""）或属性的名称（不带前导或尾随空格）。
//<button>你好，世界</button>
const button = document.querySelector("button");
button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");//按钮处于禁用状态