浅谈js中的attributes和Attribute的用法与区别


Posted in Javascript onJuly 16, 2020

一:Attribute的几种用法和含义(attributes和Attribute都是用来操作属性的)

getAttribute:获取某一个属性的值;
setAttribute:建立一个属性,并同时给属性捆绑一个值;
createAttribute:仅建立一个属性;
removeAttribute:删除一个属性;
getAttributeNode:获取一个节点作为对象;
setAttributeNode:建立一个节点;
removeAttributeNode:删除一个节点;

1.getAttribute:

<body>
 <div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d=document.getElementById("sss").getAttribute("value");
 console.log(d)  //aaa;
</script>

get 取得的返回值是属性值。

2.setAtribute:

<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) //弹出框<input type="hidden" id="sss" value="aaa" good="">;














//多了一个属性为good;但是没有给其设置属性值;所以为空。
</script>
// obox.setAttribute("a","b") 返回值是undifined;表示给标签里面加上一个属性a;属性值
     // 为b;若设置的属性已经存在,那么仅限设置/更改值;直接设置 
     //给了标签,看不到返回值,但在html页面中可以看到属性已经被添加到了标签中。

3.createAttribute:

<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) //弹出框<input type="hidden" id="sss" value="aaa" good="">;
       //多了一个属性,属性值为空
</script>

4.removeAttribute:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
 var d = document.getElementById("sss").getAttributeNode("value")
console.log(d)   // value="aaa"
 document.getElementById("sss").removeAttributeNode(d);
 alert(document.getElementById("t").innerHTML); //弹出框<input type = "hidden" id = "sss">;
       //在标签中删除属性value
</script>

getAttribute,setAttribute,createAttribute,removeAttribute四兄弟的概念比较容易理解,使用方法也比较简单,唯一需要注意这几点:
1、createAttribute在使用的时候不需要基于对象的,document.createAttribute()就可以。
2、setAttribute,createAttribute在使用的时候如果是使用的时候不要使用name,type,value等单词.
3、createAttribute在使用的时候如果只定义了名字,没有d.nodeValue = "hello";语句定义值,FF会认为是一个空字符串,IE认为是undefined。

getAttributeNode,setAttributeNode,removeAttributeNode三个方法的特点是都直接操作一个node(节点)。

例:

<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); //弹出框<input type="hidden" id="sss" value="aaa" good="">;
</script>

setAttributeNode() 方法用于添加新的属性节点。参数:attributenode;必须填写你要添加的属性节点。

如果元素中已经存在指定名称的属性,那么该属性将被新属性替代。如果新属性替代了已有的属性,则返回被替代的属性,否则返回 NULL。

======================================================================

二:attributes的用法:

attributes可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”;attributes 属性返回指定节点属性的集合。你可以使用 length 属性确定属性的数量,然后你可以遍历所有的属性节点提取你想要的信息。每个属性都是可用属性节点对象。

节点的方法,前缀一定是节点。

对象.attributes //获得所有属性节点,返回一个数组(伪数组)

<body>
 <div id = "t">
 <input type = "text" id = "sss" value = "aaa">
</body>
<script type="text/javascript">
 var a=document.getElementById("sss").attributes;
 console.log(a); //NamedNodeMap {0: type, 1: id, 2: value, type: type, id: id, value: value, length: 3}; 





//attributes获得所有的属性节点,返回一个数组(伪数组);
 // attributes可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”
 var d = document.getElementById("sss").attributes["value"];
 console.log(typeof d);  // object
 console.log(d);   // value="aaa";
 document.write(d.name);  //显示 value
 document.write(d.value);  //显示 aaa
</script>
<body>
 <div class="box" a="10" b="20" id="cont"></div>
</body>
<script>
 var obox=document.querySelector(".box");
 console.log(obox.attributes[3])  //id="cont";

 console.log(typeof obox.attributes[3]) //object;

 console.log(obox.attributes[3].nodeName); //id;显示数组中第四个属性的属性名

 console.log(obox.attributes[3].nodeValue); //cont;显示数组中第四个属性的属性值

 console.log(obox.attributes[3].nodeType); //2; 元素节点属性的返回值为2

</script>

到此这篇关于浅谈js中的attributes和Attribute的用法与区别的文章就介绍到这了,更多相关js中attributes和Attribute内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
js性能优化技巧
Nov 29 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
详解JVM系列之内存模型
Jun 10 Javascript
JS自定义右键菜单实现代码解析
Jul 16 #Javascript
JS如何在不同平台实现多语言方式
Jul 16 #Javascript
vue使用axios实现excel文件下载的功能
Jul 16 #Javascript
vue实现自定义多选按钮
Jul 16 #Javascript
vue实现div单选多选功能
Jul 16 #Javascript
vue+AI智能机器人回复功能实现
Jul 16 #Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 #Javascript
You might like
php生成随机密码的三种方法小结
2010/09/04 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
JQuery小知识
2010/10/15 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
angularjs之$timeout指令详解
2017/06/13 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python常用排序算法的实现代码
2019/11/08 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
就业推荐表自我鉴定
2013/10/29 职场文书
建筑施工员岗位职责
2013/11/26 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
网络编辑求职信
2014/04/30 职场文书
学校消防安全责任书
2014/07/23 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
详解Python牛顿插值法
2021/05/11 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸