浅谈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框架myJSFrame附API使用帮助
Jun 28 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
了解重排与重绘
2019/05/29 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
python抓取网页中的图片示例
2014/02/28 Python
python+django加载静态网页模板解析
2017/12/12 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
入党综合考察材料
2014/06/02 职场文书
班主任2015新年寄语
2014/12/08 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js