浅谈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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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仿discuz分页效果代码
2008/10/02 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
用原生js做单页应用
2017/01/17 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
妇产科护士自我鉴定
2013/10/15 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
工作散漫检讨书
2014/09/16 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
法律讲堂观后感
2015/06/11 职场文书
工作报告范文
2019/06/20 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
redis 解决库存并发问题实现数量控制
2022/04/08 Redis