详解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 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
table行随鼠标移动变色示例
May 07 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
vue实现表格合并功能
Dec 01 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
wxPython事件驱动实例详解
2014/09/28 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python_LDA实现方法详解
2017/10/25 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python调用staf自动化框架的方法
2018/12/26 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python while true实现爬虫定时任务
2020/06/08 Python
详解python算法常用技巧与内置库
2020/10/17 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
阳光体育活动实施方案
2014/05/25 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书