浅谈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 相关文章推荐
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
使用js实现数据格式化
Dec 03 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP实现微信退款功能
2018/10/02 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python中sets模块的用法实例
2014/09/30 Python
python处理html转义字符的方法详解
2016/07/01 Python
浅述python2与python3的简单区别
2018/09/19 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
详解用python写一个抽奖程序
2019/05/10 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
幼儿园元旦家长感言
2014/02/27 职场文书
开学典礼策划方案
2014/05/28 职场文书
国企干部对照检查材料
2014/08/22 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
2019个人工作总结
2019/06/21 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书