参考资料

1. HTML DOM 返回图像映射的某个区域的target的值 实例
2. HTML DOM 创建一个链接指向一个低分辨率的image
3. HTML DOM 返回一个锚的名字 实例
4. HTML DOM 返回一个button所属表的ID 实例
5. HTML DOM为表格指定规则
6. HTML DOM 返回加载的文档的服务器域名 实例
7. HTML DOM 返回一个区域的href属性的锚部分实例
8. HTML DOM 返回文档的最后一次修改时间 实例

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修改类名是更推荐的方式

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