HTML attribute 和 DOM property 的区别

栏目: Html · 发布时间: 4年前

内容简介:文章目录jQuery对象有两个方法
  • Home
  • Programming >Front end >Javascript
  • HTML attribute 和 DOM property 的区别

文章目录

前言

jQuery对象有两个方法 $(selector).prop()$(selector).attr() ,这两个方法分别对应 DOM 对象的 property 属性和 HTML 标签的 attribute 。那么 propertyattribute 之间有什么区别呢,一般为了区分我们把 property 翻译为属性,而把 attribute 翻译为特性。在 JS 中这两者还是存在一定的差异的。

语意

property 我们可以理解为事物本身的属性,与身俱来的,比如我们的头发是蛋白质构成的,那么蛋白质可以称为一个属性,这不可改变,改变了头发就不是头发了。

attribute 可以认为是附加在物体上的一些特性,比如我们可以改变头发的物理形状,烫卷拉直,或者改变头发的颜色,这样头发还是头发,但是外观变了。

在前端领域,我们可以认为 property 是一个 DOM 对象创建的时候就会初始化在对象中的一些属性(我们也可以自定义属性),而 attribute 是附在 HTML 文档中的某个元素上的特性,我们可以改变删除自定义一个特性,但是对 property 不可以,对于 DOM 内置的属性我们无法删除,也只能按照规定类型赋值,并且内置属性会在每次 DOM 对象初始化的时候产生,比如 name 属性,无论我们设置什么类型的值,最后返回的都是字符类型。但是对于我们自定义的 DOM 属性,则可以是任何 JS 支持的数据类型,而 attribute 的数据类型只能是字符串。

node.getAttribute(attr) 中的参数 attr 是大小写不敏感的。

两者之间的关系

对于非自定义的 attribute 特性,它和 property 之间有一一对应的关系,比如: idclasstitle等

<div id="test" class="button" foo="1"></div>
<script>
    document.getElementById('test').id; // return string: "test"
    document.getElementById('test').className; // return string: "button"
    document.getElementById('test').foo; // return undefined 因为foo是一个自定义的attr特性
</script>

当我们通过 property 属性进行设置或获取 class 时,我们需要使用 className ,因为在 jsclass 是关键字。

DOM 对象内置的 property 改变的时候通常对应的 attribute 也会改变。

<div id="test" class="button"></div>
<script>
    var div = document.getElementById('test');
    div.className = 'red-input';
    div.getAttribute('class'); // return string: "red-input"
    div.setAttribute('class','green-input');
    div.className; // return string: "green-input"
</script>

一些特殊情况

href

当我们在 HTML 中设置元素的 href 属性的时候, getAttribute() 方法返回的是我们设置的字符串,不管这是一个相对路径还是绝对路径,而 node.href 属性则是获得的能够访问的绝对路径。

inputvalue

当我们在 HTML 中设置 inputvalue 的时候,这个 value 只是给了 input 一个初始化的值, property 也被这个值初始化,但当我们改变 property 的时候,元素内的文本会被改变,但是 attributevalue 是不变的,它相当于保存这这个元素的初始化状态。

布尔型属性

因为 attribute 的值只能是字符串,当我们设置的 attribute 默认是一个布尔型的值的时候,不论我们是否设置值以及设置什么值,他的初始化值都是 true ,比如 disabledchecked 。并且我们只能通过 property 来修改他们。

如何使用

对于非自定义 attribute 使用 property 是一种比较安全并且有效率的做法,虽然对于 idclass 等会跟随 property 一起变化的属性我们也可以用 getAttribute() 或者 setAttribute() ,不过显然 property 是更好的选择。对于自定义属性,我们只能选择用 attribtue 的方法。

参考文章

  1. [译]HTML attribute与DOM property之间的区别?
  2. DOM 中 Property 和 Attribute 的区别

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

腾讯之道

腾讯之道

艾永亮、刘官华、梁璐 / 机械工业出版社 / 2016-7-19 / 59

放眼整个中国乃至全球,腾讯都是一家成功的互联网企业,它代表中国企业在世界互联网版图中竖起了一面高高的旗帜。腾讯为何能取得如此大的成就,它的成功方法和商业逻辑是什么?你是不是和无数中国企业和商界人士一样,都想向腾讯取取经,但是又不得其门而入? 腾讯一直以低调、务实著称,所 以腾讯及其内部员工都极少对外界分享他们的经验;加之腾讯的商业模式多元、业务繁多且交叉、体量又极其庞大,使得从外部来系统研究......一起来看看 《腾讯之道》 这本书的介绍吧!

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具