JavaScript DOM 属性

什么是 DOM 属性？

DOM（Document Object Model）属性是网页元素的特性，通过 JavaScript 可以获取和修改这些属性，从而动态改变网页内容、样式和行为。DOM 属性允许我们访问和操作 HTML 元素的各种特征，如文本内容、CSS 样式、元素尺寸等。

基础概念

DOM 属性是 JavaScript 访问 HTML 元素各种特性的接口，通过属性我们可以"读取"和"修改"元素的状态。

常用 DOM 属性

1. 内容操作属性

这些属性允许我们获取和设置元素的文本内容或 HTML 内容：

innerHTML

innerHTML 属性获取或设置元素内部的 HTML 内容。

javascript

// 获取内容
const content = document.getElementById("myDiv").innerHTML;

// 设置内容
document.getElementById("myDiv").innerHTML = "<b>新的HTML内容</b>";

textContent

textContent 属性获取或设置元素的文本内容（不包含 HTML 标签）。

javascript

// 获取文本
const text = document.getElementById("myDiv").textContent;

// 设置文本
document.getElementById("myDiv").textContent = "这是纯文本内容";

innerText

innerText 类似于 textContent，但它会考虑 CSS 样式，只返回可见文本。

javascript

document.getElementById("myDiv").innerText = "这是通过innerText设置的文本";

注意

使用 innerHTML 设置内容时可能存在安全风险（XSS攻击），处理用户输入时应优先考虑使用 textContent。

2. 属性操作方法

使用 getAttribute() 和 setAttribute()

这些方法用于获取和设置元素的 HTML 属性：

javascript

// 获取属性
const href = document.getElementById("myLink").getAttribute("href");

// 设置属性
document.getElementById("myLink").setAttribute("href", "https://example.com");
document.getElementById("myImage").setAttribute("alt", "一张示例图片");

直接访问属性

很多常见属性可以直接通过点符号访问：

javascript

// 获取和设置元素的id
const elementId = document.getElementById("myElement").id;
document.getElementById("myElement").id = "newId";

// 获取和设置元素的类名
const className = document.getElementById("myElement").className;
document.getElementById("myElement").className = "new-class";

3. 样式操作属性

style 属性

style 属性用于直接设置内联样式：

javascript

const element = document.getElementById("myElement");

// 设置样式
element.style.color = "blue";
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";
element.style.display = "none"; // 隐藏元素

classList

classList 提供了操作元素类名的方法：

javascript

const element = document.getElementById("myElement");

// 添加类
element.classList.add("highlight");

// 删除类
element.classList.remove("old-class");

// 切换类（有则删除，无则添加）
element.classList.toggle("active");

// 检查是否包含某个类
if (element.classList.contains("important")) {
  console.log("这是一个重要元素！");
}

4. 元素尺寸和位置属性

尺寸属性

javascript

const element = document.getElementById("myElement");

// 获取元素高度和宽度（包含内边距和边框）
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;

// 获取元素内容区域的高度和宽度（不包括内边距和边框）
const clientWidth = element.clientWidth;
const clientHeight = element.clientHeight;

位置属性

javascript

const element = document.getElementById("myElement");

// 获取元素相对于父元素的位置
const offsetLeft = element.offsetLeft;
const offsetTop = element.offsetTop;

// 获取元素相对于视口的位置
const rect = element.getBoundingClientRect();
console.log(`距离视口顶部: ${rect.top}px`);
console.log(`距离视口左边: ${rect.left}px`);

5. 表单元素特有属性

表单元素拥有一些特殊的属性：

javascript

const inputElement = document.getElementById("myInput");
const selectElement = document.getElementById("mySelect");

// 获取或设置输入框的值
console.log(inputElement.value);
inputElement.value = "新的输入值";

// 检查复选框或单选按钮是否被选中
const isChecked = document.getElementById("myCheckbox").checked;
document.getElementById("myRadio").checked = true; // 选中单选按钮

// 获取下拉菜单选中的值
const selectedValue = selectElement.value;
// 设置下拉菜单选中项
selectElement.value = "option2";

实际应用案例

案例1：动态切换样式

下面是一个通过按钮切换元素样式的示例：

html

<div id="targetBox" class="box">这是一个可以改变样式的盒子</div>
<button id="toggleBtn">切换样式</button>

<script>
  document.getElementById("toggleBtn").addEventListener("click", function() {
    const box = document.getElementById("targetBox");
    
    // 切换高亮类名
    box.classList.toggle("highlight");
    
    // 变更文本
    if (box.classList.contains("highlight")) {
      box.textContent = "样式已激活！";
    } else {
      box.textContent = "这是一个可以改变样式的盒子";
    }
  });
</script>

案例2：表单验证

使用 DOM 属性实现简单的表单验证：

html

<form id="myForm">
  <input type="text" id="username" placeholder="用户名 (至少5个字符)">
  <span id="usernameError" style="color: red; display: none;">用户名太短</span>
  <br />
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function(event) {
    const username = document.getElementById("username");
    const errorSpan = document.getElementById("usernameError");
    
    // 验证用户名长度
    if (username.value.length < 5) {
      // 阻止表单提交
      event.preventDefault();
      
      // 显示错误信息
      errorSpan.style.display = "inline";
      
      // 给输入框添加错误样式
      username.classList.add("error-input");
    } else {
      errorSpan.style.display = "none";
      username.classList.remove("error-input");
    }
  });
</script>

案例3：实时内容更新

使用 DOM 属性实现实时内容预览：

html

<div>
  <textarea id="markdownInput" placeholder="在此输入内容..."></textarea>
  <div id="preview">预览区域</div>
</div>

<script>
  const textarea = document.getElementById("markdownInput");
  const preview = document.getElementById("preview");
  
  // 监听输入事件
  textarea.addEventListener("input", function() {
    // 更新预览内容
    preview.textContent = textarea.value;
  });
</script>

属性和特性的区别

在 DOM 编程中，有两个相似但不同的概念：

• HTML 特性(Attributes)：在 HTML 中定义的特性，如 <div id="myDiv" data-custom="value">
• DOM 属性(Properties)：对象的属性，如 element.id 或 element.style

通常，HTML 特性会自动映射为 DOM 属性，但有一些区别：

javascript

// HTML: <input id="myInput" value="原始值">
const input = document.getElementById("myInput");

// 用户在输入框中输入"新值"

console.log(input.getAttribute("value")); // 输出：原始值 (HTML特性不变)
console.log(input.value); // 输出：新值 (DOM属性反映当前状态)

DOM 属性操作的最佳实践

1. 避免频繁操作 DOM：DOM 操作开销较大，应尽量减少
2. 批量修改：如果需要多次修改，考虑使用文档片段或一次性更新
3. 使用适当的属性：
   • 文本内容使用 textContent
   • HTML 内容使用 innerHTML（注意安全风险）
   • 表单值使用 .value
4. 优先使用 classList 操作类名：比直接操作 className 更安全和方便

总结

DOM 属性是 JavaScript 操作网页的重要工具，通过它们我们可以：

• 读取和修改元素内容
• 获取和设置元素属性
• 操作元素样式
• 获取元素尺寸和位置信息
• 处理表单数据

掌握 DOM 属性的用法是构建交互式网页应用不可或缺的基础，通过合理使用这些属性，我们可以创建动态、响应式的用户界面。

练习任务

1. 创建一个页面，包含一个按钮和一个 div，点击按钮时切换 div 的背景颜色。
2. 创建一个简单的待办事项列表，用户可以添加新项目、标记完成和删除项目。
3. 实现一个表单，包含用户名、密码和确认密码字段，在用户输入时实时验证密码是否匹配。

进一步学习资源

• MDN Web Docs: HTML DOM 参考手册
• JavaScript.info: DOM 操作
• W3Schools: HTML DOM 属性

通过掌握 DOM 属性，你已经迈出了成为前端开发者的重要一步，继续练习和实践将帮助你更深入地理解这些概念。