详解JS中的attribute属性

 更新时间:2017年04月25日 13:59:58   作者:老余博客  
Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍。具体内容详情大家参考下本文

Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍。

attributes:获取一个属性作为对象getAttribute:获取某一个属性的值

object.getAttributes(attribute) getAttribute方法不属于document对象,所以不能通过document对象获取,只能通过元素节点的调用。例如document.getElementsByTagName("p")[0].

getAttributes("title")

setAttribute:建立一个属性,并同时给属性捆绑一个值

允许对属性节点做出修改,例如

var shoop=document.getElementsById("psdf');
shoop.setAttribute("tittle","a lot of goods")

createAttribute:仅建立一个属性
removeAttribute:删除一个属性
getAttributeNode:获取一个节点作为对象
setAttributeNode:建立一个节点
removeAttributeNode:删除一个节点

attributes可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”,IE在这里可以使用“()”,考虑到兼容性的问题,要使用“[]”。关于attributes属性的使用方式上,IE和FF有巨大的分歧,在此不多介绍。attributes的使用方法:(IE和FF通用)

<body>
<div id = "t">
<input type = "hidden" id = "sss" value = "aaa">
</div>
</body>
<script>
   var d = document.getElementById("sss").attributes["value"];
   document.write(d.name);document.write(d.value);//显示value aaa
</script>

getAttribute,setAttribute,createAttribute,removeAttribute四兄弟的概念比较容易理解,使用方法也比较简单,唯一需要注意这几点:

1、createAttribute在使用的时候不需要基于对象的,document.createAttribute()就可以。

2、setAttribute,createAttribute在使用的时候如果是使用的时候不要使用name,type,value等单词,IE都FF的反应都奇怪的难以理解。

3、createAttribute在使用的时候如果只定义了名字,没有d.nodeValue = "hello";语句定义值,FF会认为是一个空字符串,IE认为是undefined,注意到这点就可以了。

4\getAttribute的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttribute("value");
document.write(d);
//显示 aaa
</script>

setAttribute的使用方法:(你会发现多了一个名为good的属性hello)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
   var d = document.getElementById("sss").setAttribute("good","hello");
   alert(document.getElementById("t").innerHTML)
</script>

createAttribute的使用方法:(多了一个名为good的空属性)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
   var d = document.createAttribute("good");
   document.getElementById("sss").setAttributeNode(d);
   alert(document.getElementById("t").innerHTML)
</script>

removeAttribute的使用方法:(少了一个)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
   var d = document.getElementById("sss").removeAttribute("value");
   alert(document.getElementById("t").innerHTML)
</script>

getAttributeNode,setAttributeNode,removeAttributeNode三个方法的特点是都直接操作一个node(节点),removeAttributeNode在一开始的时候总会用错,但是充分理解了node的含义的时候,就能够应用自如了。

getAttributeNode的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
   var d = document.createAttribute("good");
   document.getElementById("sss").setAttributeNode(d);
   alert(document.getElementById("t").innerHTML);
</script>

removeAttributeNode的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
   var d = document.getElementById("sss").getAttributeNode("value")
   document.getElementById("sss").removeAttributeNode(d);
   alert(document.getElementById("t").innerHTML);
</script>

以上所述是小编给大家介绍的JS中的attribute属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JavaScript 节点操作 以及DOMDocument属性和方法

    JavaScript 节点操作 以及DOMDocument属性和方法

    最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错.
    2007-12-12
  • JavaScript写个贪吃蛇小游戏(超详细)

    JavaScript写个贪吃蛇小游戏(超详细)

    这篇文章主要介绍了JavaScript写个贪吃蛇小游戏(超详细),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 关于字符串和对象互转以及JSON.parse()的坑

    关于字符串和对象互转以及JSON.parse()的坑

    这篇文章主要介绍了关于字符串和对象互转以及JSON.parse()的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • JavaScript 七大技巧(二)

    JavaScript 七大技巧(二)

    我写JavaScript代码已经很久了,都记不起是什么年代开始的了。本文给大家分享javascript七大技巧(二),对javascript技巧相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 在微信小程序中使用iconfont的最新图文教程

    在微信小程序中使用iconfont的最新图文教程

    由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,下面这篇文章主要给大家介绍了关于在微信小程序中使用iconfont的相关资料,需要的朋友可以参考下
    2022-08-08
  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    这篇文章主要为大家分享了js实现搜索框关键字智能匹配代码,感兴趣的朋友可以参考一下
    2016-01-01
  • 快速解决bootstrap下拉菜单无法隐藏的问题

    快速解决bootstrap下拉菜单无法隐藏的问题

    今天小编就为大家分享一篇快速解决bootstrap下拉菜单无法隐藏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 基于JavaScript实现实时在线协作编辑器

    基于JavaScript实现实时在线协作编辑器

    随着Web技术的发展,实现在线协作编辑文档已经成为一种常见的需求,本文主要为大家详细介绍了如何使用JavaScript实现实时在线协作编辑器,需要的可以参考下
    2024-01-01
  • js 毫秒转天时分秒的实例

    js 毫秒转天时分秒的实例

    下面小编就为大家分享一篇js 毫秒转天时分秒的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • javascript中attachEvent用法实例分析

    javascript中attachEvent用法实例分析

    这篇文章主要介绍了javascript中attachEvent用法,实例分析了javascript中事件绑定的相关技巧,需要的朋友可以参考下
    2015-05-05

最新评论