一：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. 洛谷 P1339 [USACO09OCT]热浪Heat Wave（dijkstra）

    题目链接 https://www.luogu.org/problemnew/show/P1339 最短路 解题思路 dijkstra直接过 注意: 双向边 memset ma数组要在读入之前 AC代码 ...

  2. tornado后台小框架

    import tornado.ioloop import tornado.web """使用get方法提交过来数据就是用get方法,使用post执行post方法这个框架的 ...

  3. IIS故障 应用程序池“XXX”提供服务的进程在与 Windows Process Activation Service 通信时出现严重错误。该进程 ID 为“XXXX”。数据字段包含错误号。

    (尝试失败,但觉得有可行性) 参考https://www.cnblogs.com/qidian10/p/6028784.html https://yq.aliyun.com/articles/6434 ...

  4. NGUI的button的创建的问题(Button Script)

    一,我们可以给了label,sprite等添加button事件 我们先添加一个label在UI_Root上,然后选中该label,右键-Attach-Box Collider,添加,当你添加完了Box ...

  5. Python之反向迭代

    需求:得到反方向迭代一个序列解决:使用内置的 reversed() 函数 a = [1, 2, 3, 4] for x in reversed(a): print(x) # 4 3 2 1 反向迭代仅 ...

  6. DOM IE 兼容性 I

    IE8事件模型和DOM事件模型有何不同?如何处理DOM事件模型与IE8事件模型的兼容性? 1 事件模型不一样 DOM的浏览器兼容性问题:事件模型   3个阶段            01 外向内:捕获 ...

  7. RabbitMQ ——与Spring集成及exchange的direct、topic方式实现和简单队列实现

    程序整体结构 Maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  8. Python Web开发:使用Django框架创建HolleWorld项目

    开发环境搭建 Python环境安装 下载地址:https://www.python.org/downloads// Django安装 打开Windows CMD输入pip install django ...

  9. 脚本_监控 HTTP 服务器的状态

    #!bin/bash#功能:监控 HTTP 服务器的状态(测试返回码) #作者:liusingbon#设置变量,url 为你需要检测的目标网站的网址(IP 或域名)url=http://192.168 ...

  10. 洛谷4206/NOI2005T4 聪聪和可可 期望DP+记忆化搜索

    题意:给出n个点m条边的无向图,两个主角聪聪和可可开始分别在S点和T点.聪聪想吃掉可可,每次由匆匆先行动后来可可行动.聪聪的行动是选他到可可的最短路上的点走最多两步(如果最短路有几条就选编号最小的走) ...