浅谈js中的attributes和Attribute的用法与区别
一：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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
PHP attributes()函数讲解
PHP attributes() 函数 实例 返回 XML 的 body 元素的属性和值: <?php $note=<<<XML <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body date="2013-01-01" type="private">Don'
-
使CheckBoxList的Attributes属性生效（修改微软的一个bug）
本文将描述如何使CheckBoxList中的Item添加的Attribute在客户端生效,CheckBoxList是一个非常好用的组件,它支持数据绑定等特性.但是他和DropDownList有同样的一个问题,就是当我们向它们的Items里面Add项目的时候,如果希望给这些Item添加客户端行为,这些行为并不能体现在客户端,我们通常使用的方法如下: HTML页面部分如下: <asp:CheckBoxList id="CheckBoxList1" runat="server
-
spring学习之@SessionAttributes实例解析
本文研究的主要是spring学习之@SessionAttributes的相关内容,具体如下. 一.@ModelAttribute 在默认情况下,ModelMap 中的属性作用域是 request 级别是,也就是说,当本次请求结束后,ModelMap中的属性将销毁.如果希望在多个请求中共享 ModelMap 中的属性,必须将其属性转存到 session 中,这样ModelMap 的属性才可以被跨请求访问. spring 允许我们有选择地指定 ModelMap 中的哪些属性需要转存到 session
-
jQuery Attributes(属性)的使用(一、属性篇)
本篇讲解:attr(name),attr(properties),attr(key,value),attr(key,fn),removeAttr(name)的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 您可以到jQuery官网来学习更多的有关jQuery知识. 下面的代码,运行后,需要刷新下. jQuery-Attributes-1 .div { width:95%; margin-left:15px; margin-top:15px; margin-righ
-
VBS教程：属性-Attributes 属性
Attributes 属性设置或返回文件或文件夹的属性.可读写或只读(与属性有关). object.Attributes [= newattributes] 参数object 必选项.应为 File 或 Folder 对象的名称. newattributes 可选项.如果指定此参数,则 newattributes 为指定的 object 的属性的新值. 设置newattributes 参数可为下列设置之一或下列设置的合理组合:
-
jQuery Attributes(属性)的使用(二、类篇)
本系列文章分为:属性篇.类篇.Html代码篇.文本篇.值篇共5篇文章. 本篇讲解:addClass(class),removeClass(class),toggleClass(class)的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 您可以到jQuery官网来学习更多的有关jQuery知识. . addClass(class)用法 定义:为每个匹配的元素添加指定的类名. 返回值:Object 参数:class (String) : 一个或多个要添加到元素中的C
-
浅谈js中的attributes和Attribute的用法与区别
一:Attribute的几种用法和含义(attributes和Attribute都是用来操作属性的) getAttribute:获取某一个属性的值: setAttribute:建立一个属性,并同时给属性捆绑一个值: createAttribute:仅建立一个属性: removeAttribute:删除一个属性: getAttributeNode:获取一个节点作为对象: setAttributeNode:建立一个节点: removeAttributeNode:删除一个节点: 1.getAttrib
-
浅谈JS中的!=、== 、!==、===的用法和区别
var num = 1; var str = '1'; var test = 1; test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同,其值也相同, 非运算肯定是false num == str //true 把str转换为数字,检查其是否相等. num != str //false == 的 非运算 num === str //false 类型不同,直接返回fals
-
浅谈js中的in-for循环
浅谈js中的in-for循环 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </hea
-
浅谈js中的三种继承方式及其优缺点
第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr
-
浅谈js中的this问题
this this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上 this的最终指向的是那个调用它的对象(这里其实并不完全对,this的指向有时候会很微妙,得靠自己去慢慢体会) 只有方法在对象上,对象调用当前方法,指向当前对象 function fnThis(){ let user='js'; console.log(this.user)//undefined console.log(this)//global(window) } fnThis(); 这
-
浅谈js中字符和数组一些基本算法题
最近在刷 fcc的题,跟升级打怪一样,一关一关的过,还挺吸引我的.今天抽时间把 Basic Algorithm Scritping 这部分题做了,根据一些提示,还是比较简单的.有些题的处理方式 方法,我想值得借鉴.比如在项目中有时候要处理一个字符,如果想不到一些相关的方法,还挺费事的,所以,在此记录下来,如果以后遇到一些字符或者数组处理,可以来翻翻这篇文章,希望以此得到一些提示而不是去翻文档. 看到此博文的博友,有更好更简单的代码或者好的想法,请留言交流(我一直觉得只有学习别人的优秀代码才能进
-
浅谈JS中的三种字符串连接方式及其性能比较
工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法 以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);
-
浅谈js中function的参数默认值
func(string1,url,flag,icon),然后在另一个asp中调用它func(a,b),那flag和icon的值是什么,怎么定义默认值?谢谢! --默认值应该是 undefined 在函数内预设数可以用 arguments[i] i就是你参数的位置 第一个为0 所以要设定 flag 的默认值 则可以这么写 function func(string1,url,flag,icon){ if(!arguments[2]) flag = "123"; if(!arguments[
-
浅谈JS中逗号运算符的用法
注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScript做举例. 最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来.后 面本人将逐步写上更多关于本书的文章. 本文的理论知识来自于JavaScript权威指南,我这里做一下整理,或者说叫笔记. 如果你的基础够好的话,完全理解不成问题,但是如果读得有些郁闷的话,可以加我的QQ:
-
浅谈js中test()函数在正则中的使用
test() 方法用于检测一个字符串是否匹配某个模式. 返回一个 Boolean 值,它指出在被查找的字符串中是否匹配给出的正则表达式. regexp.test(str) 参数 regexp 必选项.包含正则表达式模式或可用标志的正则表达式对象. str 必选项.要在其上测试查找的字符串. 说明 test 方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false. 每个正则表达式都有一个 lastIndex 属性,用于记录上一次匹配结束的位置. var