跳到主要内容

JavaScript DOM 属性

什么是 DOM 属性？​

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

基础概念

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

常用 DOM 属性​

1. 内容操作属性​

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

innerHTML​

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

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

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

textContent​

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

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

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

innerText​

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

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

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

2. 属性操作方法​

使用 getAttribute() 和 setAttribute()​

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

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

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

直接访问属性​

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

// 获取和设置元素的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 属性用于直接设置内联样式：

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

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

classList​

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

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. 元素尺寸和位置属性​

尺寸属性​

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

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

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

位置属性​

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. 表单元素特有属性​

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

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：动态切换样式​

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

<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 属性实现简单的表单验证：

<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 属性实现实时内容预览：

<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 属性，但有一些区别：

// 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. 实现一个表单，包含用户名、密码和确认密码字段，在用户输入时实时验证密码是否匹配。

进一步学习资源​

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