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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
javascript自执行函数
Feb 10 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
详解Vue方法与事件
2017/03/09 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
微信小程序版本自动更新的方法
2019/06/14 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python验证码图片处理(二值化)
2019/11/01 Python
基于python实现从尾到头打印链表
2019/11/02 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
怎么写自荐书范文
2014/02/12 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
小学新教师个人总结
2015/02/05 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL