1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

JavaScript的attribute和property辨析

作者:用户 来源:互联网 时间:2016-09-15 18:27:24

属性元素html aattributevalueconsolepropertyproperties路径input设置默认值#Attribute属性Propertydom自定义属性property属性[attribute*=value]

JavaScript的attribute和property辨析 - 摘要: 本文讲的是JavaScript的attribute和property辨析, 1、Attribute Attribute是HTML上设置的属性,在html中显式地设置,或者通过setAttribute()方法设置。 <inpu

1、Attribute

Attribute是HTML上设置的属性,在html中显式地设置,或者通过setAttribute()方法设置。

<input type='text' id='txt' a=b />

比如这样一段html代码,实际上它有三个attribute属性,我们可以打印出来看看:

var a = document.getElementById('txt');
console.log(a.attributes);

对于Attribute而言,它有三个常用的方法setAttribute()、getAttribute()以及removeAttribute():

var a = document.getElementById('txt');
a.setAttribute('value', 'test');
console.log(a.getAttribute('a')); // b
a.removeAttribute('a');
console.log(a.getAttribute('a')); // null

对于用setAttribute()和removeAttribute()方法设置和删除的属性来说,会实时地反映在html页面的代码上。Attribute的属性值只能是字符串,属性键大小写不敏感,比如:

<input type='text' id='txt' a=b A='c'/>

可以打开控制台看看代码的html结构(A被自动隐去了)。

可以说,如果想要获取一个DOM元素的attribute属性值,只要打开控制台看看该DOM标签的html代码,任何时候attribute值和html标签内设置的属性值都是同步的。
2、Property

Property则比Attribute复杂一点。DOM是JavaScript里的对象,Property是DOM中的属性,它的属性值主要通过点运算符来获取和改变。这个对象实现了很多属性(property):'value','className'等,以及一些方法getAttribute,setAttribute等,它也可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型,对大小写敏感,自定义的property不会出现在html代码中,只存在js中。

还是示例代码,他的property属性值有哪些?

<input type='text' id='txt' a=b />
<script type="text/javascript">
    var a = document.getElementById('txt');
    console.log(a.type); // text
    console.log(a.id); // txt
    console.log(a.a); // undefined
    console.log(a.title); // ''
</script>

我们在html页面的input元素中设置了a属性,但是在property中却是访问不到的;相反我们没有在html页面中设置的title,访问它却没有反映undefined!这是怎么回事?因为所有的HTML元素都由HTMLElement类型表示,HTMLElement类型直接继承自Element并添加了一些属性,每个HTML元素都有下面的这5个标准特性:id,title,lang,dir,className(在DOM中以property方式操作这几个特性会同步到html标签中)。所以即使在html中没有指定id、title等,也会默认赋予一个空串,通过property属性(点操作符)可以访问。而除此之外在html中设置的其他属性是不能通过Property访问到的(attribute特有的属性)。

如果把DOM元素看成是一个普通的Object对象,那么property就是一个以名值对(name='value')的形式存放在Object中的属性。要添加和删除property也简单多了,和普通的对象没啥分别:

var a = document.getElementById('txt');
a.age = 10;
console.log(a.age); // 10
delete a.age;
console.log(a.age); // undefined

除了id、title等5个属性(property)外(每个element元素都有),个别的元素还有特别的属性,比如input元素有name,a元素有href等等。
3、Attribute vs Property

既然说有些属性既能通过attribute访问修改,也能通过property,那么有什么值得注意的地方呢?

之所以attribute和property容易混倄在一起的原因是,很多attribute节点还有一个相对应的property属性,比如div元素的id和class既是attribute,也有对应的property(id和className),不管使用哪种方法都可以访问和修改,如果在TAG对这些属性进行赋值,那么这些值就会作为初始值赋给DOM的同名property。

    input元素的value

input元素的value属性是一大坑爹处,看下面代码:

var a = document.getElementById('txt');
a.setAttribute('value', 'test');
console.log(a.value); // test

a.value = 'change';
console.log(a.getAttribute('value')); // test

用点操作符改变value值,并不会更新attribute的value值;而相反用attribute更新value值,却会反映到property上...坑吧,谁规定的!

    表单元素

DOM元素一些默认常见的attribute节点都有与之对应的property属性,比较特殊的是一些值为Boolean类型的property,如一些表单元素。对于这些特殊的attribute节点,只要存在该节点,对应的property的值就为true,如:

<input type='radio' checked='checked' id='radio'>
<script>
  var radio = document.getElementById('radio');
  console.log(radio.getAttribute('checked')); // 'check'
  console.log(radio.checked); // true
</script>

disabled类似。

    href

两者对于href的获取也有不同之处,attribute取到的是实际设置的值(相对路径),而property取得的是绝对路径:

<a href='a.html' id='web'> </a>
<script>
  var radio = document.getElementById('web');
  console.log(web.getAttribute('href')); // 'a.html'
  console.log(web.href); // 绝度路径
</script>

4、总结

Attribute属性在html上设置,会反应在html代码上,两者同步;而Property属性则可以看做是DOM对象的键值对,用点操作符对它们进行操作。

实际编程中,基本上的DOM操作都是使用property的点操作符。

只有两种情况不得不使用attribute:

    自定义HTML Attribute,因为它不能同步到DOM property上
    访问内置的HTML标签的Attribute,这些attribute不能从property上同步过来,比如input标签的value值(可以用来检验input值是否变化)
 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索属性 , 元素 , html a , attribute , value , console , property , properties路径 , input设置默认值 , #Attribute , 属性Property , dom自定义属性 , property属性 [attribute*=value] property attribute、attribute和property、attribute与property、javascript attribute、javascript property,以便于您获取更多的相关知识。

javascript-JAVASCRIPT APPLY方法的一个问题

问题描述 JAVASCRIPT APPLY方法的一个问题 function prefill(num, value) { if(typeof num === &#039;boolean&#039; || ~~num != num || +num &lt; 0) throw new TypeError(num + &#039; is invalid&#039;) return Array.apply(null, Array(+num)).ma...

JavaScript中的property和attribute介绍_javascript技巧

...,而在这篇文章中也提交到attribute是property的子集。 而在JavaScript中,property和attribute更是有明显的区别。众所周知,setAttribute是为DOM节点设置/添加属性的标准方法: var ele = document.getElementById("my_ele"); ele.setAttribute("title","it's my ele...

Class yii/widgets/ActiveForm

...dation =false $enableClientScriptpublic property yii是否钩。activeForm JavaScript插件。这个属性必须设置正确,如果你想支持AJAX客户端验证和/或验证,或者如果你想利用yii.activeForm插件。这是错误的时,不会产生任何JavaScript形式。 public boolean $enab...

jq的attr获取不到checkbox的属性,总是undefined

...id’,’value’,’class’以及自定义的’data- explain’。javascript的DOM模型提供了两个方法getAttribute()和setAttribute() 读写DOM树节点属性(attribute)值。注意这里的getAttribute()方法有个潜规则:部分特殊属性(比如INPUT的value和checked)...

JavaScript 函数节流和函数去抖应用场景辨析

概述 也是好久没更新源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函数去抖。 这篇文章不会...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备