摘要：从学习前端以来，属性和特性已困惑我很久。注意啦，属性和特性的一个关系出现了。以下除外属性表明节点的类型。与之前了解到的特性用来描述属性的行为并无出入。下面，我们一起来看看属性和特性是如何访问的。操作特性的方法主要有三个，分别是和。
从学习前端以来，属性和特性已困惑我很久。今天使用jQuery时，又踩到了这个坑。于是下定决心，彻底搞懂它。
一、对象、属性和特性的关系先来看一下词典的解释：
property：1、财产、所有权、房地产；2、性质、特性、属性；
attribute：属性、特质、特性、品质
好吧，除了财产、房地产（手动斜眼），好像不能把他俩区分开来。既然如此，我还是从专业书籍中寻找答案吧。《JavaScript高级程序设计》第6章：
ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数”。
“嗯...对象..的属性..”
好像与对象有直接的联系！property不是财产吗？那我假装property就是object的财产好了（手动滑稽）。
来个例子吧：
var person = {
name: “小明”,
age: ‘26’,
sayName: function(){
alert(this.name);
}
};
这里，name和age都是person对象的属性。
这些属性在创建时都带有一些特征值（characteristic）， JavaScript 通过这些特征值来定义它们的行为。--《JavaScript高级程序设计》
简单点说，属性有特征值，用来定义属性的行为。（注意啦，属性和特性的一个关系出现了。）对于像name和age这样的属性，有4个特性描述它们的行为，分别是[[Configurable]]、[[Enumerable]]、[[Writable]]、[[Value]]，这些特性描述了name和age属性：
1、是否可以重新定义
2、是否可以用for-in循环返回属性
3、是否可以修改
好的，我们到这里先打住，我们知道了，特性可以用来描述属性的行为。
这里，我们自己创建的一个对象和DOM对象从直观上来看，好像不太一样。两者不太容易产生联系。那么，让我们把目光聚焦到DOM（文档对象模型）上吧，它可是如假包换的对象啊！
JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。(IE9以下除外)
nodetype属性：表明节点的类型。值为1表示节点是Element类型，2是Attr类型，3是Text类型，等等
nodeName属性：节点名称
nodeValue属性：节点值
...
也就是说，我们html中的div、ul、li等等都是node节点，而像id、class、type、title等是元素节点的特性，特性属于Attr类型，而特性是元素attributes属性的节点。
看起来很绕，我们试着捋一捋，像div这样的元素，它有attributes属性，而id、class等是该属性的节点，也就是说，id和class这样的特性是用来描述attributes属性的。与之前了解到的“特性用来描述属性的行为”并无出入。
到这里，我们小结一下。不论是person对象还是DOM对象（比如div），它们都有自己的属性（property），而属性又有一个叫特性（attribute）的东西来定义它的行为。好的，我们弄明白这三者的关系了。
但是，我们似乎还有一些谜团没有解开。下面，我们一起来看看属性和特性是如何访问的。
二、属性和特性的访问要访问对象的属性，例如刚刚的person对象，我们可以用person.name来访问person对象的name属性；对于DOM对象，为了说清楚问题，我们先获取对象的引用：
var oBox = document.getElementById("box");
//我们可以通过oBox.tagName访问tagName属性和nodeType属性
console.log(oBox.tagName); //DIV
console.log(oBox.nodeType); //1
可是，这很正常啊！问题出现在：
//我们可以通过oBox.id获取对象的id值 console.log(oBox.id); //box console.log(oBox.className); //red
可能我们会觉得，这依然很正常啊！哪里不对吗？
是的，这里不正常！因为id明明是oBox对象的attributes属性中的节点，它又不是属性，凭啥可以用oBox.id来访问？！可是我们当初就是这么学的呀，一开始就是这么使用的啊~
崩溃后，我们找到了答案，来自《JavaScript高级程序设计》：
所有HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性：id、className、title等
啊，恍然大悟！快哉~
之所以能够这么访问，原来是设计者的良苦用心啊，把id、class、title这样的特性添加为html element的属性id、className、title，这么访问不就方便了吗？
到这里，迷雾已经散去。我们渐渐看到了真相。
每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的
DOM 方法主要有三个，分别是 getAttribute()、 setAttribute()和 removeAttribute()。这三
个方法可以针对任何特性使用，包括那些以 HTMLElement 类型属性的形式定义的特性。
console.log(oBox.getAttribute("id")); //box
console.log(oBox.getAttribute("class")); //red
这样，我们也明白了，为什么用getAttribute()访问class时，不需要用className的原因。
三、自定义特性和属性 1.自定义特性html：
js：
oBox.setAttribute("left","left");
不过，自定义的特性不能用属性的方式来访问，
console.log(oBox.left); //undefined
console.log(oBox.getAttribute("left")); //left
另外，HTML5规范中，自定义特性应该加上data-前缀，以便验证。
2.自定义属性其实，我们有用过“自定义”属性，在设置定时器时，将timer绑定在元素上，不同的元素就有自己的定时器了。
oBox.timer = setTimeout(function(){
//to do
},5000);
oBox2.timer = setTimeout(function(){
//to do 2
},5000);
（完）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51650.html
摘要：从学习前端以来，属性和特性已困惑我很久。注意啦，属性和特性的一个关系出现了。以下除外属性表明节点的类型。与之前了解到的特性用来描述属性的行为并无出入。下面，我们一起来看看属性和特性是如何访问的。操作特性的方法主要有三个，分别是和。 从学习前端以来，属性和特性已困惑我很久。今天使用jQuery时，又踩到了这个坑。于是下定决心，彻底搞懂它。 一、对象、属性和特性的关系 先来看一下词典的解释...
摘要：如果还有人问你两者区别，马上甩出这种图有兴趣可以往下阅读，官方手册给出的例子手册这是一张将区别的表格，从表格中我们可以发现返回值等同返回值等同。 简单谈一下isset和empty的区别？ 如果你是在面试，碰巧面试官提了这个问题。你可以这样回答： 如果变量值为0、空字符串、空数组等等，empty认为它是空的，而isset认为它不是空的。 如果变量不存在，isset和empty都认为它是...
摘要：图对可复用代码挑战最大的五项问题五大开发问题如下。浏览器的缺陷修复。浏览器缺失的功能。复杂的地方是，当前浏览器会在未来的浏览器版本中被修复。假设浏览器引起常见的网站问题为解决浏览器使用特殊技巧，将来浏览器发布新版本修复了，就会出现问题。 任意一段重要的代码都需要关注无数的开发问题。但是，其中对可复用JavaScript代码挑战最大的五项问题如图14.2所示。 showImg(https...
摘要：如图使用事件捕获模式注册事件监听对最外层，中间层，最内层分别用捕获模式注册事件监听，我们上面说了，如果使用捕获模式，那么第三个参数应该是，否则则是冒泡模式，如果不声明，默认为冒泡模式。 来源: 个人博客 想必好多童鞋都有直接复制粘贴event.preventDefault() 或者event.stopPropagation() 的经历，但是为什么这样做不甚了解，今天我们的目的就是要彻...
阅读 1983·2021-11-08 13:14
阅读 2912·2021-10-18 13:34
阅读 1980·2021-09-23 11:21
阅读 3561·2019-08-30 15:54
阅读 1693·2019-08-30 15:54
阅读 2876·2019-08-29 15:33
阅读 2544·2019-08-29 14:01
阅读 1923·2019-08-29 13:52
