参考资料

1. HTML DOM 节点
2. HTML DOM 给image加上border
3. HTML DOM 改变一个iframe的src
4. HTML DOM 改变链接的target属性实例
5. HTML DOM单元格内容水平对齐
6. HTML DOM在下拉列表中选择多个选项
7. HTML DOM 返回文档中第一个图像的ID
8. 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修改类名是更推荐的方式

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