JS中property与attribute的区别

时间：2022-01-06 20:12:32

property与attirbute都是属性的意思，在JS中很容易混淆，但实际上二者有很大的区别。简单来说，

  • property：是DOM中的属性，是JavaScript中的对像
  • attribute：是HTML标签上的属性，与HTML标签上显示的属性（比如id、class、title等）一一对应

1. property

有以下代码

<input type="radio" name="" class="单选框1">

var OInput = document.getElementsByTagName('input')[0];

console.dir(OInput);

控制台上显示的结果如下：

JS中property与attribute的区别

红色方框中的各个元素就是OInput的properties，这些属性都是DOM中的内置属性，我们不能增加或删除属性，但可以查看和修改属性值。修改方式如下：

// 对象.属性名 或 对象["属性名"]

// 修改

OInput.title = "单选框";

OInput["title"]  = "单选框";

// 查看

OInput.title;

OInput["title"];

细心点我们可以发现，properties没有class属性，但却有className属性；也就是说我们得通过className来查看和修改class属性值。

2. attribute

仔细观察，我们还可以发现在properties中还有一个attributes属性，把它展开如下

JS中property与attribute的区别

我们可以发现里面有三个元素，这三个元素就是HTML标签中的三个属性(attribute)，这就是attriube，我们可以把它看作是OInput对象的一个property。attributes中的元素都是对象，它们都有自己的属性，比如baseURI、name、nodeType、value等。查看和修改attribute的方法如下

// 查看

OInput.getAttribute('class');

// 修改和设置，添加新属性后，HTML标签会自动同步更新

OInput.setAttribute('class', '单选框');  // 等同于OInput.attribute.class.value = '单选框'

// 还可以添加自定义的第三方属性 OInput.setAttribute('class1', '单选框1');

OInput.setAttribute('class1', '单选框1')

// attribute中的属性名和属性值都只能是字符串(string)

3. jQuery中prop和attr方法

prop方法

prop方法对应property，attr方法对应attribute；用法如下

// 查看

$(OInput).prop('class');

$(OInput).attr('class');  

// 设置

$(OInput).prop('class', '单选框');

$(OInput).attr('class', '单选框');

4. properties和attributies相同属性间的联系

一般来说，property的属性值和attribute的属性值会同步改变。比如

$(OInput).attr("class", "单选框1");

$(OInput).prop("title", "这是一个单选框");

// $(OInput).prop("class")和$(OInput).attr("title")的值也会随之改变

注意，attribute的值只能是string类型的，而property的值可以为任何类型；对于某些特殊属性，其值是非字符串类型的；比如input标签中的checked属性，此时情况会变得不一样，具体描述如下：

// OInput.checked只能是是bool类型的，即true或false

// OInput.getAttribute('checked')只能是string类型，即HTML标签上显示的是什么就是什么

// 我们依然可以在attributes中查看checked属性的bool值，可通过如下方法

OInput.attributes.checked.ownerElement.checked

相关文章