详解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获取页面上某个元素的代码
Mar 13 Javascript
js select option对象小结
Dec 20 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
深入了解JavaScript 私有化
May 30 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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实现记事本案例
2020/10/20 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
在Python下尝试多线程编程
2015/04/28 Python
Python聊天室实例程序分享
2016/01/05 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python代码如何注释
2020/06/01 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
浅析python连接数据库的重要事项
2021/02/22 Python
PHP开发的一般流程
2013/08/13 面试题
高校十八大报告感想
2014/01/27 职场文书
教师工作决心书
2015/02/04 职场文书
联谊活动总结范文
2015/05/09 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis