浅谈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判断变量是否空值的代码
Oct 26 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
JavaScript实现点击切换功能
Jan 27 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
JS验证不重复验证码
2017/02/10 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python 编程之twisted详解及简单实例
2017/01/28 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
大学班长的职责
2014/01/27 职场文书
英语教师自荐信
2014/05/26 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
童年读书笔记
2015/06/26 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python