一：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. [CF538F]A Heap of Heaps(主席树)

    题面 题意:给你一个数组a[n],对于数组每次建立一个完全k叉树,对于每个节点,如果父节点的值比这个节点的值大,那么就是一个违规点,统计出1~n-1完全叉树下的违规点的各自的个数. 分析 注意到完全k ...

  2. jenkin 构建失败 才发邮件通知

    使用场景:自动化测试,一般需要配置定时执行(每天执行一次,没周执行一次),如果有失败,则发邮件给相关人员关注.此时需要使用jenkins的邮件发送配置.修改job的configure配置步骤如下: 1 ...

  3. Nginx 教程 （1）：基本概念

      简介 嗨!分享就是关心!所以,我们愿意再跟你分享一点点知识.我们准备了这个划分为三节的<Nginx教程>.如果你对 Nginx 已经有所了解,或者你希望了解更多,这个教程将会对你非常有 ...

  4. ToolStripComboBox 绑定数据

    //添加ComboBox tcbbQueryCondition.ComboBox.DataSource = RelationalOperators.GetAllOperators(); tcbbQue ...

  5. Android线程间通信的几种实现方式

    1. 通过Handler机制: private void one() { handler=new Handler(){ @Override public void handleMessage(Mess ...

  6. Linux就该这么学09学习笔记

    参考链接:https://www.linuxprobe.com/chapter-09.html 配置网卡服务 配置网卡参数 1.执行nmtui命令运行网络配置工具 2.选中Edit a connect ...

  7. Python 循环列表删除元素的注意事项

    错误示范: class Solution: def removeElement(self, nums, val: int) -> int: for i, num in enumerate(num ...

  8. mesos,marathon,haproxy on centos7 最完美安装教程

    前言 本教程参考 http://blog.51cto.com/11863547/1903532 http://blog.51cto.com/11863547/1903532 官方文档等... 系统:c ...

  9. Mac brew 安装Postgres 开机自启动

    以下所有命令在mac 终端执行 1.安装postgres brew install postgres 2.brew 安装的程序都可以在/usr/local/Cellar/下找到,去/usr/local ...

  10. BZOJ4269 再见xor

    考前挣扎 线性基裸题 mx直接求 次大直接从低到高枚举第一个非0位 然后次大就是异或上就行了[显然贪心呐qwq 不到800b可还行 //Love and Freedom. #include<cs ...