一：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的用法和区别。的更多相关文章

  1. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  2. JS中的!= 、== 、!==、===的用法和区别

    与c++中每一种类型都有明确的的定义不同:因JS中var定义存在,未具体区分类型,!=与==不能包含所有的条件,故加入!==与===用法: var num = 1; var str = '1'; va ...

  3. js中的find(),filter(),has()的用法和区别

    filter():操作当前元素集,删除不匹配的元素,得到一个新的集合 <ul> <li class="a">list item 1</li> & ...

  4. 浅谈JS中的!=、== 、!==、===的用法和区别

    var num = 1;     var str = '1';     var test = 1;     test == num  //true 相同类型 相同值     test === num ...

  5. js中的text()，html() ，val()的区别

    js中的text(),html() ,val()的区别 text(),html() ,val()三个方法用于html元素的存值和取值,但是他们各有特点,text()用于html元素文本内容的存取,ht ...

  6. 脚本引用中的defer和async的用法和区别

    之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...

  7. Oracle中的rownum 和rowid的用法和区别

    Oracle中的rownum 和rowid的用法和区别   1.rownum是伪列,是在获取查询结果集后再加上去的 (获取一条记录加一个rownum).对符合条件的结果添加一个从1开始的序列号. eg ...

  8. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  9. js中的property和attribute

    javascript中的property和attribute虽然都被翻译为“属性”,但是他们还是有区别的. 前两天写网页时用到checkbox,就被property和attribute弄晕了好久.后来 ...

随机推荐

  1. final-finally-finalize有什么区别

    一.final 1.final用于声明属性.方法和类,分别表示属性不可变,方法不可覆盖类和类不可能被继承(不可能再派生出新的子类). final属性:被final修饰的变量不可变. 1).引用不可变 ...

  2. SLA服务可用性4个9是什么意思？怎么达到？

    SLA:服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保障服务的性能和可用性,服务提供商与用户间定义的一种双方认可的协定.通常这个开销是驱动提供服 ...

  3. asp.net 连续打印多份HTML页面，出现漏字

    在IE8上打印的内容用了CSS 样式,连续打印多份导致的 可以通过改变CSS样式或更换浏览器解决

  4. supermap idesktop连接oraclesptial数据源

    1.要使用相同的版本,如iServer 9D, iDesktop9D ,32位的 plsql,32位的 oracleinstance_client 11g 2.当时遇到的问题是使用oracleinst ...

  5. html标签的target属性应用

    1. 定义和用法 target 属性规定在何处打开页面上的所有链接. <head> <base target="_blank" /> </head&g ...

  6. setter getter 方法

    MRC下setter.getter方法写法.重写dealloc方法 @interface People : NSObject @property (nonatomic,strong) NSString ...

  7. 搭建个人使用服务器-vultr

    内容来自https://www.noobyy.com/31.html  谢谢教程,侵权的话会立即删除! 1. 首先进入Vultr官网注册:https://www.vultr.com 注册完开始充值,我 ...

  8. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  9. LOJ6437 PKUSC2018 PKUSC

    带劲的计算几何[这一定是我WC之前开的最后一道计几!!! 每个点画个圆然后看一下交点 然后判断是多边形内还是多边形外 这个就是取圆上中点然后射线法 eps我1e-8才过 不知道为啥有的人说只能开1e- ...

  10. python基础：7.求结果

    求结果: v1 = 1 or 3
 v2 = 1 and 3
 v3 = 0 and 2 and 1 v4 = 0 and 2 or 1 v5 = 0 and 2 or 1 or 4 v6 = 0 o ...