一：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. python获取ip地址

    #!/usr/bin/env python # -*- coding: utf-8 -*- import os import socket,fcntl,struct #crontab下shell命令无 ...

  2. 洛谷 P1049 装箱问题（01背包）

    一道水题,但看到好久没有发博客了,再一看是一道noip普及组t4,就做了. 题目链接 https://www.luogu.org/problemnew/show/P1049 解题思路 一道裸的01背包 ...

  3. Python自学第二天学习之《列表》

    一.  列表:list类型,是有序的,可以被修改的. 格式 : li=["cd",1,"gfds",[1,2,3]] 1.类型转换: #字符串转换成列表 b=“ ...

  4. 2019 Multi-University Training Contest 1 - 1004 - Vacation - 二分 - 思维

    http://acm.hdu.edu.cn/showproblem.php?pid=6581 一开始想了好几个假算法.但是启发了一下潘哥,假如时间知道的话就可以从头开始确定各个车的位置.那么直接 \( ...

  5. google+ sign in and get the oauth token 转摘：https://gist.github.com/ianbarber/5170508

    package com.example.anothersignintest;   import java.io.IOException;   import com.google.android.gms ...

  6. C#split的使用方式

    一,在msdn中我们能看到一下几种使用 二,我们先看看经常使用的, 我们先定义一个数组 string test = "1,2,,3,4,5,6,7"; 第一种,结果大家都熟悉,就不 ...

  7. VS Code的使用

    之前一直使用的是WebStorm来学习web前端开发,最近开始使用VSCode,很多方面和WebStorm不一样,需要一段时间适应,以下是我初次使用VSCode进行web前端开发学习所遇到的一些问题以 ...

  8. tensorflow实现一个神经网络简单CNN网络

    本例子用到了minst数据库,通过训练CNN网络,实现手写数字的预测. 首先先把数据集读取到程序中(MNIST数据集大约12MB,如果没在文件夹中找到就会自动下载): mnist = input_da ...

  9. php pdo_mysql扩展安装

    本文内容是以 CentOS 为例,红帽系列的 Linux 方法应该都是如此,下面就详细说明步骤,在这里严重鄙视哪些内容??隆⑺档脑悠咴影说挠泄 PDO 编译安装的文章. 1.进入 PHP 的软件包 p ...

  10. windows10安装nodejs 10和express 4

    最进做一个个人博客系统,前端用到了semanticUI,但是要使用npm工具包,所以需要安装nodejs,nodejs自带npm 下载 去官网下载自己系统对应的版本,我的是windows:下载 可以在 ...