详解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 相关文章推荐
js获取网页高度(详细整理)
Dec 28 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
javascript的BOM
May 03 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
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/02/16 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
js树形控件脚本代码
2008/07/24 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Django Form常用功能及代码示例
2020/10/13 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
测试工程师程序员求职信范文
2014/02/20 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
班级活动总结格式
2014/08/30 职场文书
党性观念心得体会
2014/09/03 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python
实现GO语言对数组切片去重
2022/04/20 Golang