当前位置: 首页 > news >正文

扑朔迷离的属性和特性【彻底弄清】

从学习前端以来,属性和特性已困惑我很久。今天使用jQuery时,又踩到了这个坑。于是下定决心,彻底搞懂它。

一、对象、属性和特性的关系

先来看一下词典的解释:

property:1、财产、所有权、房地产;2、性质、特性、属性;
attribute:属性、特质、特性、品质

好吧,除了财产、房地产(手动斜眼),好像不能把他俩区分开来。既然如此,我还是从专业书籍中寻找答案吧。《JavaScript高级程序设计》第6章:

ECMA-262把对象定义为: “无序属性的集合,其属性可以包含基本值、对象或者函数”。

“嗯...对象..的属性..”
好像与对象有直接的联系!property不是财产吗?那我假装property就是object的财产好了(手动滑稽)。
来个例子吧:

var person = {
    name: “小明”,
    age: ‘26’,
    sayName: function(){
    alert(this.name);
    }
};

这里,nameage都是person对象的属性。

这些属性在创建时都带有一些特征值(characteristic), JavaScript 通过这些特征值来定义它们的行为。--《JavaScript高级程序设计》

简单点说,属性有特征值,用来定义属性的行为。(注意啦,属性和特性的一个关系出现了。)对于像nameage这样的属性,有4个特性描述它们的行为,分别是[[Configurable]]、[[Enumerable]]、[[Writable]]、[[Value]],这些特性描述了nameage属性:
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对象<div id="box" class="red"></div>,为了说清楚问题,我们先获取对象的引用:

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:

<div id="box" left="left"></div>

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);

(完)

相关文章:

  • 2.3. 插件
  • 四层、七层负载均衡的区别
  • 查找python项目依赖并生成requirements.txt——pipreqs 真是很好用啊
  • 从如何停掉 Promise 链说起
  • visio扩大画布的大小
  • 拓扑规则翻译函数(转)
  • java读取文件夹下所有文件并替换文件每一行中指定的字符串
  • 6.2. group by
  • 纪念第一次在博客园的书写
  • 第二次冲刺站立会议(7)
  • python学习笔记(八):异常处理
  • python中package机制的两种实现方式
  • 2017年年度总结
  • 原来Intel CPU漏洞是它引起的!
  • 在全是无人车的世界里,过马路是种怎样的体验?
  • HTTP 简介
  • Java多态
  • nginx 配置多 域名 + 多 https
  • open-falcon 开发笔记(一):从零开始搭建虚拟服务器和监测环境
  • Protobuf3语言指南
  • Python_OOP
  • Vue2.0 实现互斥
  • 第十八天-企业应用架构模式-基本模式
  • 码农张的Bug人生 - 初来乍到
  • 如何打造100亿SDK累计覆盖量的大数据系统
  • 算法之不定期更新(一)(2018-04-12)
  • 物联网链路协议
  • 详解NodeJs流之一
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • ​secrets --- 生成管理密码的安全随机数​
  • #、%和$符号在OGNL表达式中经常出现
  • #HarmonyOS:软件安装window和mac预览Hello World
  • #我与Java虚拟机的故事#连载04:一本让自己没面子的书
  • #我与Java虚拟机的故事#连载14:挑战高薪面试必看
  • (12)目标检测_SSD基于pytorch搭建代码
  • (2)(2.10) LTM telemetry
  • (day 2)JavaScript学习笔记(基础之变量、常量和注释)
  • (多级缓存)缓存同步
  • (附源码)springboot人体健康检测微信小程序 毕业设计 012142
  • (附源码)ssm高校升本考试管理系统 毕业设计 201631
  • (附源码)ssm户外用品商城 毕业设计 112346
  • (转载)Linux网络编程入门
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .bat批处理(一):@echo off
  • .Mobi域名介绍
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型
  • .net生成的类,跨工程调用显示注释
  • .NET性能优化(文摘)
  • .NET与java的MVC模式(2):struts2核心工作流程与原理
  • .Net转Java自学之路—基础巩固篇十三(集合)
  • /deep/和 >>>以及 ::v-deep 三者的区别
  • [ Linux 长征路第五篇 ] make/Makefile Linux项目自动化创建工具
  • [AI]文心一言爆火的同时,ChatGPT带来了这么多的开源项目你了解吗