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中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- JS中的!= 、== 、!==、===的用法和区别
与c++中每一种类型都有明确的的定义不同:因JS中var定义存在,未具体区分类型,!=与==不能包含所有的条件,故加入!==与===用法: var num = 1; var str = '1'; va ...
- js中的find(),filter(),has()的用法和区别
filter():操作当前元素集,删除不匹配的元素,得到一个新的集合 <ul> <li class="a">list item 1</li> & ...
- 浅谈JS中的!=、== 、!==、===的用法和区别
var num = 1; var str = '1'; var test = 1; test == num //true 相同类型 相同值 test === num ...
- js中的text()，html() ，val()的区别
js中的text(),html() ,val()的区别 text(),html() ,val()三个方法用于html元素的存值和取值,但是他们各有特点,text()用于html元素文本内容的存取,ht ...
- 脚本引用中的defer和async的用法和区别
之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...
- Oracle中的rownum 和rowid的用法和区别
Oracle中的rownum 和rowid的用法和区别 1.rownum是伪列,是在获取查询结果集后再加上去的 (获取一条记录加一个rownum).对符合条件的结果添加一个从1开始的序列号. eg ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
- js中的property和attribute
javascript中的property和attribute虽然都被翻译为“属性”,但是他们还是有区别的. 前两天写网页时用到checkbox,就被property和attribute弄晕了好久.后来 ...
随机推荐
- jar包/class文件如何快速反编译成java文件
有时编写的java代码打包为可执行jar包后需要查看工程结构是否是且只有我们需要的包,故需要查看jar包层级. 1.windows系统可以直接在网上下载jd-gui.exe包,然后傻瓜安装: 2.Ma ...
- navigate连接不上Centos7+mariadb的问题
链接数据库时忽然遇到一个问题.Mac Navicat链接时报错Can’t connect to MySQL server on ‘xx.xx.xx.xx’ (61). PS. win版Navicat ...
- golang指针函数
func main() { a := models.SmsVerify{} a.Id = 100 fmt.Println(a.Id) // 100 test111(a) fmt.Println(a.I ...
- photoshop中调整图层的颜色深浅明暗
图像-调整-可选颜色, 选中某一个颜色如绿色,可以将绿色调的深一点或浅一点
- Oracle：同步两张表的相同字段
有一个需求需要同步两张表的相同字段,比如表A和表B,这两张表是不同的用户下的表,表结构是一样的. 一开始我简单写了一个sql语句,如下: update ord_log1 A set (A.pid, A ...
- shell命令结果重定向
- C# List和DataTable的相互转换
1.List转DataTable /// <summary> /// list to datatable /// </summary> /// <typeparam na ...
- 从__name__=='__main__'说到__builtin__
一.__name__ 我们在写好代码进行自测的时候一般会先写这样一行代码: # inter_method if __name__ == '__main__': 为什么呢,可能并不是所有人都考虑过,这个 ...
- Kotlin——关于字符串（String）常用操作汇总
在前面讲解Kotlin数据类型的时候,提到了字符串类型,当然关于其定义在前面的章节中已经讲解过了.对Kotlin中的数据类型不清楚的同学.请参考Kotlin——初级篇(三):数据类型详解这篇文章. 在 ...
- websock(AMQ)通信-前端
服务端和客户端之间的通信 前端开发经常会依赖后端,那么如果后端服务器还没做好推送服务器,那么前端该如何呢.最简单的就是自己模拟一个服务器,用node来搭建,这边只简单介绍搭建的过程 node搭建服务器 ...