js常见问题-节点中property和attribute的区别

最新推荐文章于 2025-12-30 12:48:39 发布

原创最新推荐文章于 2025-12-30 12:48:39 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

javascript常见问题专栏收录该内容

8 篇文章

订阅专栏

本文探讨了JavaScript中attribute（HTML特性）与property（对象属性）的区别，包括取值与赋值方式，以及两者同步与异步更新的特性。通过实例演示了如何操作DOM的属性和特性，并揭示了它们在编程实践中的关键应用。

JS中attribute和property的区别

文章目录

JS中attribute和property的区别

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

1.attribute和property介绍

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
      </style>
</head>

<body>
      <div id="div1" data-val='11' class="divClass" title="divTitle" title1="divTitle1">zhzihzio</div>
      <form action="submit" method="post">
            <label for="Name">Number:</label>
            <input type=“text“ name="Name" id="Name" autocomplete='off' />
            <button id='test' action='submit'>按钮</button>
      </form>

      <div style="height:1px;overflow:hidden;background:red"></div>

      <script>
            var in1 = document.getElementById("div1");
            console.log(in1);
            console.log(in1.id);          //div1
            console.log(in1.className);        //divClass
            console.log(in1.title);          //divTitle
            console.log(in1.attributes['data-val'].value)  //11
            console.log(in1.dataset.val)  //11
            console.log(in1.title1);       //undefined
            console.log(in1.attributes['title1'].value)  //divTitle1
      </script>
</body>

</html>

Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等。

而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

attributes是属于property的一个子集

2.attribute和property的取值和赋值

attribute用setAttribute()和getAttribute()来操作即可

**setAttribute()的两个参数，都必须是字符串。**即对特性Attribute职能赋值字符串，而对属性Property就可以赋任何类型的值了。

var ti = div1.getAttribute("title1");
div1.setAttribute('class', 'a');
div1.setAttribute('title', 'b');
div1.setAttribute('title1', 'c');
div1.setAttribute('title2', 'd');

Property赋值

div1.className = 'a';
div1.align = 'center';
div1.AAAAA = true;
div1.BBBBB = [1, 2, 3];

3. 更改property和attribute其中一个值，会出现什么结果?

in1.value='new value of prop';

console.log(in1.value);               // 'new value of prop'
console.log(in1.attributes.value);         // 'value="1"'

in2.setAttribute('value','ni')
console.log(in2.value);          //ni
console.log(in2.attributes.value); //value='ni'

对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的。