详解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前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
使用原生javascript开发计算器实例代码
Feb 21 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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 判断数组是几维数组
2013/03/20 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
python递归查询菜单并转换成json实例
2017/03/27 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
python数据归一化及三种方法详解
2019/08/06 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
教师继续教育反思周记
2015/06/25 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
如何用python绘制雷达图
2021/04/24 Python
总结一些Java常用的加密算法
2021/06/11 Java/Android
小程序实现文字循环滚动动画
2021/06/14 Javascript
无线电知识基础入门篇
2022/02/18 无线电