HTML DOM 属性

HTML DOM 属性格式化

详细介绍

HTML DOM 属性格式化是指通过JavaScript访问和修改HTML元素的属性值，以及控制这些属性的显示方式。DOM属性提供了与HTML元素交互的接口，允许动态改变网页内容和行为。

常用DOM属性

核心属性

• innerHTML - 获取或设置元素的HTML内容

• textContent - 获取或设置元素的文本内容

• value - 获取或设置表单元素的值

• className - 获取或设置元素的class属性

• id - 获取或设置元素的id属性

• style - 访问元素的样式属性

表单相关属性

• disabled - 禁用表单元素

• checked - 复选框/单选按钮的选中状态

• selected - 下拉选项的选中状态

• readOnly - 设置表单元素为只读

其他常用属性

• src - 获取或设置元素的src属性

• href - 获取或设置元素的href属性

• title - 获取或设置元素的title属性

• alt - 获取或设置元素的alt属性

用法

获取属性值

let element = document.getElementById("myElement");
let value = element.value; // 获取value属性
let html = element.innerHTML; // 获取innerHTML

设置属性值

element.value = "新值";
element.innerHTML = "<strong>新内容</strong>";
element.className = "new-class";

使用setAttribute/getAttribute

element.setAttribute("data-custom", "value"); // 设置自定义属性
let attrValue = element.getAttribute("data-custom"); // 获取属性值

实例

修改元素内容

<div id="content">原始内容</div>
<script>
  document.getElementById("content").innerHTML = "更新后的内容";
</script>

切换类名

<div id="box" class="default">盒子</div>
<script>
  let box = document.getElementById("box");
  box.className = "active"; // 替换所有类名
  box.classList.add("highlight"); // 添加类名
  box.classList.remove("default"); // 移除类名
</script>

表单控制

<input type="text" id="username" value="guest">
<script>
  let input = document.getElementById("username");
  input.value = "admin"; // 修改输入值
  input.disabled = true; // 禁用输入框
</script>

功能

1. 动态内容更新 - 无需刷新页面即可修改内容

2. 样式控制 - 通过修改class或style属性改变外观

3. 表单交互 - 获取和设置表单值，控制表单状态

4. 属性操作 - 读取和修改标准及自定义属性

5. 元素状态控制 - 显示/隐藏元素，启用/禁用控件

CSS扩展

通过style属性

element.style.color = "red";
element.style.backgroundColor = "#f0f0f0";
element.style.fontSize = "16px";

通过classList

element.classList.add("active"); // 添加类
element.classList.remove("inactive"); // 移除类
element.classList.toggle("visible"); // 切换类

获取计算样式

let styles = window.getComputedStyle(element);
let color = styles.getPropertyValue("color");

注意事项

• 通过style属性设置的样式是内联样式，优先级较高

• 使用classList修改类名是更推荐的方式

• 获取计算样式是只读的，不能用于修改样式