详解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  Error 对象 错误处理
May 18 Javascript
window.location.hash 使用说明
Nov 08 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
vue改变循环遍历后的数据实例
Nov 07 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
webpack的移动端适配方案小结
Jul 25 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
安装dbus-python的简要教程
2015/05/05 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
公务员综合考察材料
2014/02/01 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
结婚纪念日感言
2015/08/01 职场文书
学生会任命书范本
2015/09/21 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书