浅谈js中的attributes和Attribute的⽤法与区别
⼀：Attribute的⼏种⽤法和含义（attributes和Attribute都是⽤来操作属性的）
getAttribute：获取某⼀个属性的值；
setAttribute：建⽴⼀个属性，并同时给属性捆绑⼀个值；
createAttribute：仅建⽴⼀个属性；
removeAttribute：删除⼀个属性；
getAttributeNode：获取⼀个节点作为对象；
setAttributeNode：建⽴⼀个节点；
removeAttributeNode：删除⼀个节点；
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var ElementById("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 = ateAttribute("good");
ElementById("t").innerHTML) //弹出框<input type="hidden" id="sss" value="aaa" good="">;                                //多了⼀个属性为good；但是没有给其设置属性值；所以为空。</script>
// obox.setAttribute("a","b") 返回值是undifined；表⽰给标签⾥⾯加上⼀个属性a；属性值
// 为b；若设置的属性已经存在，那么仅限设置/更改值；直接设置
//给了标签，看不到返回值，但在html页⾯中可以看到属性已经被添加到了标签中。
typeof的用法<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = ateAttribute("good");
ElementById("t").innerHTML) //弹出框<input type="hidden" id="sss" value="aaa" good="">;
//多了⼀个属性，属性值为空
</script>
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = ElementById("sss").getAttributeNode("value")    console.log(d)  // value="aaa"
ElementById("t").innerHTML); //弹出框<input type = "hidden" id = "sss">;
//在标签中删除属性value
</script>
getAttribute，setAttribute，createAttribute，removeAttribute四兄弟的概念⽐较容易理解，使⽤⽅法也⽐较简单，唯⼀需要注意这⼏点：
1、createAttribute在使⽤的时候不需要基于对象的，ateAttribute()就可以。
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 = ateAttribute("good");
ElementById("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 ElementById("sss").attributes;
console.log(a); //NamedNodeMap {0: type, 1: id, 2: value, type: type, id: id, value: value, length: 3};              　//attributes获得所有的属性节点，返回⼀个数组(伪数组);
// attributes可以获取⼀个对象中的⼀个属性，并且作为对象来调⽤，注意在这⾥要使⽤“[]”
var d = ElementById("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的⽤法与区别的⽂章就介绍到这了，更多相关js中attributes和Attribute内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。