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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jQuery each()小议
Mar 18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
VueJS全面解析
Nov 10 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python os用法总结
2018/06/08 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
函授本科自我鉴定
2013/11/03 职场文书
外企财务年会演讲稿
2014/01/03 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
给老婆道歉的话
2015/01/20 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
python OpenCV学习笔记
2021/03/31 Python
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python