一：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. mysql DATETIME和TIMESTAMP类型

    以mysql 5.7.20 为例 一直以来,理解有偏差,作此记录,纠正 一.DATETIME和TIMESTAMP 都有高达微秒(6位)的精度 范围   DATETIME  1000-01-01 00: ...

  2. 69.Daily Temperatures（日常气温）

    Level:   Medium 题目描述: Given a list of daily temperatures T, return a list such that, for each day in ...

  3. Java 8实战之读书笔记三：函数式数据处理

    二.函数式数据处理 第4章 引入流 流是Java API的新成员,它允许你以声明性方式处理数据集合(通过查询语句来表达,而不是临时编写一个实现). 示例: import static java.uti ...

  4. vue.js（7）--vue中的样式绑定

    vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. 20180209-sys模块

    sys模块常用操作如下: 1.命令行参数 sys.argv  第一个元素是程序本身路径 # 1.命令行参数 第一个元素是程序本身路径 ret = sys.argv print('命令行参数:',ret ...

  6. Cheatsheet: 2019 03.01 ~ 04.30

    Golang How To Install Go and Set Up a Local Programming Environment on macOS Build A Go API 40+ prac ...

  7. R语言控制流

    一般来说R语言是自上而下执行的,但是遇到特殊情况可能用到循环执行某些语句,这时候条件运算和循环就能派上用场了.

  8. hdu1210Eddy's 洗牌问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1210 Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如 ...

  9. phpstorm ftp不能连接服务器

    环境: ubuntu phpstorm 问题一. 服务器ftp功能没有开启 解决方法:在服务器上安装 ftp 服务 https://i.cnblogs.com/EditPosts.aspx?posti ...

  10. RESTful （俗称：api接口文档）

    整体规范建议采用RESTful 方式来实施. 协议 API与用户的通信协议,总是使用HTTPs协议,确保交互数据的传输安全. 域名 应该尽量将API部署在专用域名之下.https://api.exam ...