js中的attribute详解

时间：2021-04-03 22:59:54

Attribute是属性的意思，文章仅对部分兼容IE和FF的Attribute相关的介绍。attributes：获取一个属性作为对象getAttribute：获取某一个属性的值
object.getAttributes(attribute) getAttribute方法不属于document对象，所以不能通过document对象获取，只能通过元素节点的调用。例如document.getElementsByTagName("p")[0].
getAttributes("title")
setAttribute：建立一个属性，并同时给属性捆绑一个值
允许对属性节点做出修改，例如

var shoop=document.getElementsById("psdf');

shoop.setAttribute("tittle","a lot of goods")

createAttribute：仅建立一个属性
removeAttribute：删除一个属性
getAttributeNode：获取一个节点作为对象
setAttributeNode：建立一个节点
removeAttributeNode：删除一个节点
attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”，IE在这里可以使用“()”，考虑到兼容性的问题，要使用“[]”。关于attributes属性的使用方式上，IE和FF有巨大的分歧，在此不多介绍。attributes的使用方法：（IE和FF通用）

<body>

<div id = "t">

<input type = "hidden" id = "sss" value = "aaa">

</div>

</body>

<script>

      var d = document.getElementById("sss").attributes["value"];

      document.write(d.name);document.write(d.value);//显示value aaa

</script>

getAttribute，setAttribute，createAttribute，removeAttribute四兄弟的概念比较容易理解
，使用方法也比较简单，唯一需要注意这几点：
1、createAttribute在使用的时候不需要基于对象的，document.createAttribute()就可以。
2、setAttribute，createAttribute在使用的时候如果是使用的时候不要使用name，type，value等单词，IE都FF的反应都奇怪的难以理解。
3、createAttribute在使用的时候如果只定义了名字，没有d.nodeValue = "hello";语句定义值，FF会认为是一个空字符串，IE认为是undefined，注意到这点就可以了。
4\getAttribute的使用方法：

<body>

<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>

</body>

<script>

var d = document.getElementById("sss").getAttribute("value");

document.write(d);

//显示 aaa

</script>

setAttribute的使用方法：（你会发现多了一个名为good的属性hello）

<body>

<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>

</body>

<script>

     var d = document.getElementById("sss").setAttribute("good","hello");

     alert(document.getElementById("t").innerHTML)

</script>

createAttribute的使用方法：（多了一个名为good的空属性）

<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)

</script>

removeAttribute的使用方法：（少了一个）

<body>

<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>

</body>

<script>

     var d = document.getElementById("sss").removeAttribute("value");

     alert(document.getElementById("t").innerHTML)

</script>

getAttributeNode，setAttributeNode，removeAttributeNode三个方法的特点是都直接操作一个node（节点），removeAttributeNode在一开始的时候总会用错，但是充分理解了node的含义的时候，就能够应用自如了。getAttributeNode的使用方法：

<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);

</script>

removeAttributeNode的使用方法：

<body>

<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>

</body>

<script>

     var d = document.getElementById("sss").getAttributeNode("value")

     document.getElementById("sss").removeAttributeNode(d);

     alert(document.getElementById("t").innerHTML);

</script>

原文参考链接:http://www.jianshu.com/p/41bed26419e0

js中的attribute详解的更多相关文章

  1. C&num;中的Attribute详解（下）

    原文地址:https://blog.csdn.net/xiaouncle/article/details/70229119 C#中的Attribute详解(下) 一.Attribute本质 从上篇里我 ...

  2. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

  3. JS 中 this 关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...

  4. Bom和Dom编程以及js中prototype的详解

    一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. JavaScript面向对象&lpar;一&rpar;——JS OOP基础与JS 中This指向详解

      前  言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...

  6. JS中navigator对象详解

    <code class="language-html"><!doctype html> <html> <head> <meta ...

  7. js中Date&lpar;&rpar;对象详解

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  8. js中的逻辑运算符详解&lpar;&vert;&vert;、&amp&semi;&amp&semi;、&excl;&rpar;

    视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...

  9. js中window对象详解以及页面跳转

    1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...

随机推荐

  1. 链接&lpar;extern、static关键词&bsol;头文件&bsol;静态库&bsol;共享库&rpar;

    原文链接:http://www.orlion.ga/781/ 一. 多目标文件的链接 假设有两个文件:stack.c: /* stack.c */ char stack[512]; int top = ...

  2. sql server 去除（替换）空格，回车，换行 函数

    --create-- SQL去除回车符,换行符,空格和水平制表符create function RepSymbolChar(@str nvarchar(max))returns nvarchar(ma ...

  3. codeforces 446B（优先队列）

    题目链接:http://codeforces.com/problemset/problem/446/B #include<bits/stdc++.h> using namespace st ...

  4. UPC 2170 D Equal Is Not Really Equal &lpar;欧拉路径&rpar;

    题目链接:http://acm.upc.edu.cn/problem.php?id=2170 题意:给出一个字符串,比如ABACA,在这个串里,AB.BA.AC.CA各出现一次.若存在另外一个串,里面 ...

  5. CF 19D - Points 线段树套平衡树

    题目在这: 给出三种操作: 1.增加点(x,y) 2.删除点(x,y) 3.询问在点(x,y)右上方的点,如果有相同,输出最左边的,如果还有相同,输出最低的那个点 分析: 线段树套平衡树. 我们先离散 ...

  6. PHP与最丑的后台管理系统

    第二天阿Q到公司还是比较早,同事只有阿梅在,阿Q坐在椅子上旋转来旋转去,有点像个小孩子.公司有书柜,书柜上放了好几本很新的php的书,.net的书反倒比较少而且显得老旧.阿Q起身走过去拿了本php翻了 ...

  7. Spring学习笔记——02 Bean的命名及实例化

    一.Bean的命名 前一篇讲到IoC是一个管理Bean的容器,Bean多数情况下都是通过XML文件进行配置的,其中Bean的命名有以下几种方式,现在梳理一下. 1. 不指定id,只配置类名 <b ...

  8. bzoj3534 &lbrack;Sdoi2014&rsqb;重建

    变形的$Martix-Tree$定理 发现我们要求的是$\prod_{i \in E}{p_{i}} * \prod_{i \notin E}{(1-p_{i})}$ 然后呢? 矩阵树对重边也有效对吧 ...

  9. Alpha阶段敏捷冲刺总结

    项目感言 张艺琳 在这次冲刺中,我主要担任着PM的角色.不仅要梳理流程给小组每个成员进行分工,并且还要及时监督他们在要求时间内提交代码.同时我也参与到开发中去,与小组成员一起讨论数据库,最后一起设计出 ...

  10. OCP新题，2019题库出现大量新题，062-第22题

    choose two Your database is running in ARCHIVELOG mode. You want to take a consistent whole database ...

相关文章