浅谈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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
详解如何运行vue项目
Apr 15 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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数组交集的优化代码分析
2011/03/06 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
JS实现小星星特效
2019/12/24 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
高中生家长会演讲稿
2014/01/14 职场文书
民族团结先进个人材料
2014/02/05 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
档案信息化建设方案
2014/05/16 职场文书
平安建设工作方案
2014/06/02 职场文书
法人授权委托书样本
2014/09/19 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2014年财政所工作总结
2014/11/22 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
法院执行局工作总结
2015/08/11 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
为什么RedisCluster设计成16384个槽
2021/09/25 Redis