详解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 事件参考手册
Dec 24 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
JavaScript实现简单图片切换
Apr 29 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
vue实现图片上传功能
2020/05/28 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
车间统计员岗位职责
2014/01/05 职场文书
五一活动标语
2014/06/30 职场文书
博士生导师推荐信
2014/07/08 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
高校教师个人总结
2015/02/10 职场文书
个人自荐书怎么写
2015/03/26 职场文书
爱国教育主题班会
2015/08/14 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python