DOM之属性(attribute)和自定义对象属性(property)
2016-04-15 16:24
417 查看
DOM节点有一些属性和对象属性.有时候我们会把他们搞混淆,因为他们是相关联的,但是他们真的是两个不同的东西.
下面的例子是指定分配一个对象给document.body的myData对象属性.
自定义的对象属性和方法仅在Javascript是可以见有效的.不影响HTML.
同样,自定义对象属性可以通过for..in来与原生对象属性混合输出.
自定义DOM对象属性:
可以有任何值.对象属性名称有大小写之分.
不影响HTML
DOM节点提供了下面的标准方法来访问HTML的标签属性.
在小于IE8和IE8兼容模式下,这些属性就表现得不一样:
仅
他们实际上是修改DOM对象属性,不是属性.
属性和对象属性在IE<8是融合的.有时候会导致不可预料的结果,但是这种方式管理属性,是比较好的一个处理方法.
对象属性和属性之间的对比:
都是字符串.
名称大小写表现得不一样.因为HTML属性没有大小写之分.
他们都可以使用innerTHML(除了老版本的IE之外)
可以列出所有的属性数组.
例如,我们看看下面的HTML结构:
下面的例子设置一些属性.
运行上面这段代码的时候,有下面几点提示:
你可以试着分配一个字符串或者另外类型的原始值,都会变成一个字符串.对象会自动转换,但是基于其他类型的值,IE会有一些问题,
innerHTML会包含一个新的属性"test"
DOM节点的每一种类型有着标准的对象属性.例如,'A'标签元素.他有href和accessKey属性,以及其他特定的属性.除此之外,他会继承"id"属性以及其他的HTMLElement的属性.
例如,浏览器id属性和id对象属性是同步存在的:
同步不保证有相同的值.下面是设置href属性的例子:
这是因为href的正确连接,符合W3C规范
另外的属性,他们是同步的,但不是复制.例如下面的input.checked:
input.checked对象属性值在true和false之间,但是属性则不会管这些.
下面例子中,input.value从属性设置中同步:
但是从对象属性中创建,属性则同步不了:
value在对象属性更新后,属性的值还是原来的值.例如当访问者输入一些内容的时候,如果input被改变或者重新被设置,原始值可以用来做检查.
因为"class"是在javascript中是保留字,所以则会选择另外的名称className来与class想匹配
提示,这个例子在IE<9下是不能正常运行的,因为奇怪的方式属性和对象属性混合使用.
我们可以让它执行好,但是仅使用className对象属性来管理class,不是attribute.
指定一个div到一个变量
获取data-widgetName的属性值
文档
首先,IE<9同步所有的对象属性和属性:
类型也是一样的.属性没有变成一个字符串.
其次,在IE<8(或者IE8兼容IE7的模式)对象属性和属性一样.会出现一些有趣的结果.
例如,对象属性名称是大小写区分的,而属性名称则不是.如果浏览器认为他们是一样的,那下面的代码结果会是什么样?
浏览器避开这些陷阱,则给他们设置一个默认值.在IE中getAttribute方法提供了可选的第二个参数,来决定是否大小写区分.可以看看MSDNgetAttribute的详细说明.
兼容IE,正确的使用属性.或者换句话说,试着所有时候都使用对象属性,除非你真的需要一个属性的时候.
需要属性的时候:
获取一个自定义的属性时,因为DOM对象属性中没有同步这些属性.
获取标准的HTML属性的原始值,例如
属性节点同样可以访问,通过elem.attributes集合.
在
例如:
顺便说说,IE<8和IE8兼容模式下,关于
属性DOM节点不是document数的一部分,他们从他们的元素标签中访问.
在DOM模式中,属性和对象属性都是核心的特点.
下面表格中表现了他们的关系和不同:
如果你想有自定义的属性,可以通过HTML5中有效的data-*属性来完成.不明白的可以看HTML5标准.
在实际当中,98%例子中,DOM对象属性被使用.
两种情况下使用属性:
自定义的HTML属性,因为DOM对象属性不同步.
去访问一个创建在HTML属性中的,没有同步的DOM对象,且确保你需要这个属性.比如INPUT的value.
本文属于吴统威的博客,微信公众号:bianchengderen,QQ群:186659233的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=226,欢迎大家传播与分享.
特性
DOM节点是一个对象.因此它可以存储自定义的对象属性和方法,就像任何的Javascript对象.
下面的例子是指定分配一个对象给document.body的myData对象属性.document.body.myData={ name:'John' } alert(document.body.myData.name)//John document.body.sayHi=function(){ alert(this.nodeName) } document.body.sayHi()//BODY
自定义的对象属性和方法仅在Javascript是可以见有效的.不影响HTML.
同样,自定义对象属性可以通过for..in来与原生对象属性混合输出.
document.body.custom=5 varlist=[] for(varkeyindocument.body){ list.push(key) } alert(list.join('\n'))
自定义DOM对象属性:
可以有任何值.对象属性名称有大小写之分.
不影响HTML
属性
DOM节点提供了下面的标准方法来访问HTML的标签属性.elem.hasAttribute(name)-检查属性是否存在
elem.getAttribute(name)-获取属性的值
elem.setAttribute(name,value)-设置一个属性
elem.removeAttribute(name)-移除属性
在小于IE8和IE8兼容模式下,这些属性就表现得不一样:
仅
getAttribute和
setAttribute方法存在.
他们实际上是修改DOM对象属性,不是属性.
属性和对象属性在IE<8是融合的.有时候会导致不可预料的结果,但是这种方式管理属性,是比较好的一个处理方法.
对象属性和属性之间的对比:
都是字符串.
名称大小写表现得不一样.因为HTML属性没有大小写之分.
他们都可以使用innerTHML(除了老版本的IE之外)
可以列出所有的属性数组.
例如,我们看看下面的HTML结构:
代码名称
<
body
>
<
div
about
=
"Elephant"
class
=
"smiling"
></
div
>
</
body
>
下面的例子设置一些属性.
<body><divabout="Elephant"class="smiling"></div>
<script>vardiv=document.body.children[0]
alert(div.getAttribute('ABOUT'))//(1)
div.setAttribute('Test',123)//(2)
alert(document.body.innerHTML)//(3)
</script></body>
运行上面这段代码的时候,有下面几点提示:
getAttribute('ABOUT')使用大写名称,这是没关系的.
你可以试着分配一个字符串或者另外类型的原始值,都会变成一个字符串.对象会自动转换,但是基于其他类型的值,IE会有一些问题,
innerHTML会包含一个新的属性"test"
对象属性和属性同步化
DOM节点的每一种类型有着标准的对象属性.例如,'A'标签元素.他有href和accessKey属性,以及其他特定的属性.除此之外,他会继承"id"属性以及其他的HTMLElement的属性.
标准的DOM对象属性和属性是同步的.
id
例如,浏览器id属性和id对象属性是同步存在的:<script>document.body.setAttribute('id','la-la-la')
alert(document.body.id)//la-la-la
</script>
href
同步不保证有相同的值.下面是设置href属性的例子:<ahref="#"></a><script>vara=document.body.children[0]
a.href='/'
alert('attribute:'+a.getAttribute('href'))//'/'
alert('property:'+a.href)//IE:'/',others:fullURL
</script>
这是因为href的正确连接,符合W3C规范
另外的属性,他们是同步的,但不是复制.例如下面的input.checked:
<inputtype="checkbox"checked>
<script>varinput=document.body.children[0]
alert(input.checked)//true
alert(input.getAttribute('checked'))//emptystring
</script>
input.checked对象属性值在true和false之间,但是属性则不会管这些.
value
同样创建对象属性与之同步,只有一种方式.
下面例子中,input.value从属性设置中同步:<body><inputtype="text"value="markup"><script>varinput=document.body.children[0]
input.setAttribute('value','new')
alert(input.value)//'new',input.valuechanged
</script></body>
但是从对象属性中创建,属性则同步不了:
<body><inputtype="text"value="markup"><script>varinput=document.body.children[0]
input.value='new'
alert(input.getAttribute('value'))//'markup',notchanged!
</script></body>
value在对象属性更新后,属性的值还是原来的值.例如当访问者输入一些内容的时候,如果input被改变或者重新被设置,原始值可以用来做检查.
class/className
名称不一样:"class"属性与之对应的对象属性是"className"
因为"class"是在javascript中是保留字,所以则会选择另外的名称className来与class想匹配<body><script>document.body.setAttribute('class','bigredbloom')
alert(document.body.className)//^^^
</script></body>
提示,这个例子在IE<9下是不能正常运行的,因为奇怪的方式属性和对象属性混合使用.
我们可以让它执行好,但是仅使用className对象属性来管理class,不是attribute.
指定一个div到一个变量
获取data-widgetName的属性值
文档
<body>
<!--helloworld!don'tremoveme.-->
<divdata-widgetName="menu">Selectthegenre</div>
<script>/*...*/</script></body>
有趣的老版本IE
首先,IE<9同步所有的对象属性和属性:document.body.setAttribute('try-in-ie',123)
alert(document.body['try-in-ie']===123)//trueinIE<9
类型也是一样的.属性没有变成一个字符串.
其次,在IE<8(或者IE8兼容IE7的模式)对象属性和属性一样.会出现一些有趣的结果.
例如,对象属性名称是大小写区分的,而属性名称则不是.如果浏览器认为他们是一样的,那下面的代码结果会是什么样?
document.body.abba=1//assignproperty(nowcanreaditbygetAttribute)
document.body.ABBA=5//assignpropertywithanothercase
//mustgetapropertynamed'ABba'incase-insensitiveway.
alert(document.body.getAttribute('ABba'))//??
浏览器避开这些陷阱,则给他们设置一个默认值.在IE中getAttribute方法提供了可选的第二个参数,来决定是否大小写区分.可以看看MSDNgetAttribute的详细说明.
所有浏览器,除了IE<9,"class"属性改变class,不要使用attribute.同时使用className属性
兼容IE,正确的使用属性.或者换句话说,试着所有时候都使用对象属性,除非你真的需要一个属性的时候.需要属性的时候:
获取一个自定义的属性时,因为DOM对象属性中没有同步这些属性.
获取标准的HTML属性的原始值,例如
<INPUTvalue="...">.
属性作为DOM节点
属性节点同样可以访问,通过elem.attributes集合.在
attributes集合中,每一个属性通过一个特殊的DOM节点呈现.name,value和另外的对象属性.
例如:
<spanstyle="color:blue"id="my">text</span>
<script>varspan=document.body.children[0]
alert(span.attributes['style'].value)//"color:blue;"
alert(span.attributes['id'].value)//"my"
</script>
顺便说说,IE<8和IE8兼容模式下,关于
"style"属性是表现得不一样.猜猜是为什么?.
属性DOM节点不是document数的一部分,他们从他们的元素标签中访问.
总结
在DOM模式中,属性和对象属性都是核心的特点.下面表格中表现了他们的关系和不同:
Properties | Attributes |
---|---|
任何值 | String |
名称大小写区分 | 不区分大小写 |
innerHTML中不会呈现 | innerHTML中可见 |
标准的DOM对象属性和属性是同步的,自定义的不是. | |
属性和对象属性在IE<8或者IE8兼容模式下混合使用会导致一些不可预料的结果 |
在实际当中,98%例子中,DOM对象属性被使用.
两种情况下使用属性:
自定义的HTML属性,因为DOM对象属性不同步.
去访问一个创建在HTML属性中的,没有同步的DOM对象,且确保你需要这个属性.比如INPUT的value.
本文属于吴统威的博客,微信公众号:bianchengderen,QQ群:186659233的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=226,欢迎大家传播与分享.
相关文章推荐
- 一台服务器搭载两个tomcat项目
- tomcat运行web项目,不能访问动态地址,也就是controller
- 分布式架构高可用架构篇_01_zookeeper集群的安装、配置、高可用测试
- centos Linux 常用命令汇总
- shell条件-循环-分支-函数
- 常用的网站
- Linux下安装使用 mysql connector/C++
- shell mysql命令 传参数
- System.arraycopy
- CentOS6.5上hive安装过程与常见错误调试
- 【OpenCV】goodFeaturesToTrack_Demo详解
- tomcat7.0配置CORS(跨域资源共享)
- linux 内核 的 I/O 模型 (总结)
- Docker Dockerfile详解
- Docker Dockerfile详解
- docker push 实现过程
- 使用VMWare虚拟机创建CentOS版本号的Linux学习环境(每一步都有截图与说明)
- kafka学习二:在linux环境下kafka搭建环境(单机版)
- Mac利用PD虚拟机安装Centos7
- linux高级编程基础系列:线程间通信