详解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 源码分析笔记(4) Ready函数
Jun 02 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
js实现的折叠导航示例
Nov 29 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
javascript字符串函数汇总
Dec 06 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
Vue vm.$attrs使用场景详解
Mar 08 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中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python异常处理操作实例详解
2018/08/28 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Python创建自己的加密货币的示例
2021/03/01 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
2014全国两会学习心得体会1000字
2014/03/10 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
求职信格式要求
2014/05/23 职场文书
项目验收申请报告
2015/05/15 职场文书
教师教育心得体会
2016/01/19 职场文书
优秀大学生申请书
2019/06/24 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers