什么是 DOM 的 Property，以及和 HTML Attribute 的区别

最新推荐文章于 2024-10-29 14:54:04 发布

西门吹雪在编程

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量732

点赞数 21

分类专栏：前端开发文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_55213370/article/details/141364267

版权

前端开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

DOM Property 是指在 JavaScript 中，文档对象模型（DOM）元素属性所对应的 JavaScript 对象的属性。这些属性可以直接通过 JavaScript 代码进行访问和修改，而这些变动会实时反映在网页显示上。

DOM（Document Object Model）是表示 HTML 或 XML 页面内容的对象模型。它提供了一种结构化的表示方式，使我们可以利用编程语言（如 JavaScript）来操控文档的内容和样式。

HTML 中的每一个标签都会在 DOM 中映射成一个对象，这些对象的属性（Property）可以通过 JavaScript 进行读取和修改。DOM Property 和 HTML Attribute 是有区别的，尽管它们经常被混淆。HTML Attribute 是在 HTML 文档中定义的，而 DOM Property 是通过 JavaScript 访问和修改这些数据的方式。

例如，假设有一个简单的 HTML：

<!DOCTYPE html>
<html>
<head>
  <title>DOM Property 示例</title>
</head>
<body>
  <input type="text" id="myInput" value="初始值">
  <script>
    var inputElement = document.getElementById(`myInput`);
    console.log(inputElement.value); // 输出：初始值
    inputElement.value = `修改后的值`;
    console.log(inputElement.value); // 输出：修改后的值
  </script>
</body>
</html>

在这个例子中，input 元素在 HTML 中定义了一个属性 value，而在 JavaScript 中，通过 DOM Property value，我们可以读取和修改输入框的值。从代码中可以看到，通过inputElement.value访问 input 元素的值，并修改为新的字符串。

再来详细说明 DOM Property 和 HTML Attribute 的区别：

HTML Attribute 是作为 HTML 元素的一部分在页面内容中定义的，创建时是固定的。
DOM Property 是在创建 HTML 元素对象后，通过 JavaScript 动态访问和修改的。

通过简单的例子进一步解释：

<!DOCTYPE html>
<html>
<head>
  <title>Attribute vs Property</title>
</head>
<body>
  <input type="text" id="example" value="test">
  <script>
    var input = document.getElementById(`example`);
    
    // 修改 Attribute
    input.setAttribute(`value`, `new attribute value`);
    // 读取 Attribute
    console.log(input.getAttribute(`value`)); // 输出：new attribute value
    
    // 修改 Property
    input.value = `new property value`;
    // 读取 Property
    console.log(input.value); // 输出：new property value
    
    // 注意 Attribute 和 Property 之间的差异
    console.log(input.getAttribute(`value`)); // 还是输出：new attribute value
  </script>
</body>
</html>

在这个例子中，通过 input.setAttribute(value, new attribute value) 修改了 input 元素的 HTML Attribute，但通过 input.value = new property value` 修改了 DOM Property 时，它们是互相独立的。

DOM Property 不仅仅是用于表单元素的属性，更广泛地存在于 DOM 对象的其他部分，如元素的文本内容、样式、层级和其他特征。例如：

<!DOCTYPE html>
<html>
<head>
  <title>更多 DOM Property</title>
</head>
<body>
  <div id="myDiv">这里是一个 div 元素</div>
  <script>
    var divElement = document.getElementById(`myDiv`);
    
    // 修改文本内容
    divElement.textContent = `修改后的文本内容`;
    console.log(divElement.textContent); // 输出：修改后的文本内容
    
    // 修改样式
    divElement.style.color = `red`;
    divElement.style.fontSize = `20px`;
    console.log(divElement.style.color); // 输出：red
    console.log(divElement.style.fontSize); // 输出：20px
    
    // 修改 class 属性
    divElement.className = `myClass`;
    console.log(divElement.className); // 输出：myClass
    
    // 修改自定义属性
    divElement.dataset.customAttribute = `customValue`;
    console.log(divElement.dataset.customAttribute); // 输出：customValue
  </script>
</body>
</html>

在这个例子中，通过访问 DOM Property 设置和获取元素的文本内容（textContent）、样式（style）、类名（className）以及自定义属性（dataset）。DOM Property 提供了一种直接且高效的方式来操控网页内容和样式。

另外，DOM Property 非常适合用于与用户交互的动态页面中。例如，用户填写表单内容后，你可以实时获取用户填写的数据，并进行验证或其他处理：

<!DOCTYPE html>
<html>
<head>
  <title>用户输入示例</title>
  <script>
    function validateInput() {
      var userInput = document.getElementById(`userInput`).value;
      var messageElement = document.getElementById(`message`);

      if (userInput.length < 5) {
        messageElement.textContent = `输入的文本太短，请输入至少 5 个字符。`;
        messageElement.style.color = `red`;
      } else {
        messageElement.textContent = `输入有效！`;
        messageElement.style.color = `green`;
      }
    }
  </script>
</head>
<body>
  <input type="text" id="userInput" oninput="validateInput()">
  <p id="message"></p>
</body>
</html>