详解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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
js实现淘宝浏览商品放大镜功能
Oct 28 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
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript 常用方法总结
2009/06/03 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
javascript数组的使用
2013/03/28 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
运动会加油稿100字
2014/09/19 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
大学班长竞选稿
2015/11/20 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL