详解JS中的attribute属性


Posted in Javascript onApril 25, 2017

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 相关文章推荐
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
javascript常用的正则表达式实例
May 15 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jQuery事件用法详解
Oct 06 Javascript
webpack入门必知必会
Jan 16 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 #Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 #Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 #Javascript
json的结构与遍历方法实例分析
Apr 25 #Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
用vue和node写的简易购物车实现
Apr 25 #Javascript
ES6数组的扩展详解
Apr 25 #Javascript
You might like
如何使用php实现评委评分器
2015/07/31 PHP
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
20个常用Python运维库和模块
2018/02/12 Python
python创建文件备份的脚本
2018/09/11 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
浅析Python __name__ 是什么
2020/07/07 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
几道PHP的面试题
2012/05/19 面试题
抽象方法、抽象类怎样声明
2014/10/25 面试题
计算机专业学生的自我评价
2013/12/15 职场文书
小学生演讲稿
2014/01/12 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
文化产业实施方案
2014/06/07 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书