JS Attribute属性操作详解


Posted in Javascript onMay 19, 2016

Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍。

attributes:获取一个属性作为对象

getAttribute:获取某一个属性的值

setAttribute:建立一个属性,并同时给属性捆绑一个值

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,注意到这点就可以了。

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的空属性)

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      window.onload = function (){
        var oBox = document.getElementById('box');
        alert( document.body.innerHTML );
        oBox.setAttribute('value','name');
        alert( document.body.innerHTML );
        attr = document.createAttribute('hallo');
        alert( document.body.innerHTML );/*同上*/
        attr.nodeValue = 'world';/*对自定义属性进行编辑*/
        alert( document.body.innerHTML );/*同上*/
        oBox.setAttributeNode(attr);/*对标签插入自定义属性*/
        alert( document.body.innerHTML );/*改变*/
      };
    </script>
  </head>
  <body>
    <ul id="box">
    </ul>
  </body>

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.getElementById("sss").getAttributeNode("value"); 
document.write(d.name);
document.write(d.value);
//显示 value aaa
</script>

setAttributeNode的使用方法:

<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>
更多的关于attributes属必性问题,可在w3school中查询!

以上这篇JS Attribute属性操作详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
jQuery点击输入框显示验证码图片
May 19 #Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 #Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 #Javascript
JS+Canvas 实现下雨下雪效果
May 18 #Javascript
如何判断Javascript对象是否存在的简单实例
May 18 #Javascript
jquery遍历json对象集合详解
May 18 #Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 #Javascript
You might like
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
php去除HTML标签实例
2013/11/06 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
使用python实现个性化词云的方法
2017/06/16 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Windows下python3.7安装教程
2018/07/31 Python
python实现词法分析器
2019/01/31 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
详解Python 中的容器 collections
2020/08/17 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
Ejb技术面试题
2015/04/29 面试题
如何客观的进行自我评价
2013/12/17 职场文书
多媒体教室标语
2014/06/26 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
导游词之山海关
2019/12/10 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
JavaScript实现简单计时器
2021/06/22 Javascript