Attribute是属性的意思，文章仅对部分兼容IE和FF的Attribute相关的介绍。

attributes：获取一个属性作为对象

getAttribute：获取某一个属性的值
setAttribute：建立一个属性，并同时给属性捆绑一个值
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，注意到这点就可以了。

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.getElementById("sss").getAttributeNode("value"); 
document.write(d.name);
document.write(d.value);
//显示 value aaa
</script>

setAttributeNode的使用方法：

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

js操作Attribute，控件的各种属性.....maxlength，style...的更多相关文章

  1. js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)

    原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选 ...

  2. selenium webdriver——JS操作日历控件

    一般的日期控件都是input标签下弹出来的,如果使用webdriver 去设置日期, 1. 定位到该input 2. 使用sendKeys 方法 比如 但是,有的日期控件是readonly的 比如12 ...

  3. 2.23 js处理日历控件（修改readonly属性）

    2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...

  4. Selenium2学习（十七）-- js处理日历控件（修改readonly属性）

    前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...

  5. 如何给ActiveX控件添加“事件”“属性”“标准事件”“自定义事件”等一些相关操作

    上一篇小编带大家熟悉了一下ActiveX的建立以及相关的概念,(http://blog.csdn.net/u014028070/article/details/38424611) 本文介绍下如何给控件 ...

  6. Auto.js 特殊定位控件方法 不能在ui线程执行阻塞操作，请使用setTimeout代替

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Auto.js 特殊定位控件方法 操作环 ...

  7. C#多线程操作界面控件的解决方案（转）

    C#中利用委托实现多线程跨线程操作 - 张小鱼 2010-10-22 08:38 在使用VS2005的时候,如果你从非创建这个控件的线程中访问这个控件或者操作这个控件的话就会抛出这个异常.这是微软为了 ...

  8. selenium操作日历控件

    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用js去掉 ...

  9. Selenium webdriver操作日历控件

    一般的日期控件都是input标签下弹出来的,如果使用webdriver 去设置日期, 1. 定位到该input 2. 使用sendKeys 方法 比如:使用定位: driver.findElement ...

随机推荐

  1. csu - 1537: Miscalculation (模拟题)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1537 因为给出的式子是必定合法的,只要用两个栈分别保存符号和数字.算出答案后和从左至右算的答案比对 ...

  2. 从零开始写STL-容器-list

    从零开始写STL-容器-list List 是STL 中的链表容器,今天我们将通过阅读和实现list源码来解决一下问题: List内部的内存结构是如何实现的? 为什么List的插入复杂度为O(1)? ...

  3. springboot+idea+maven学习第一天(springboot入门,idea整合maven)

    1.springboot简介 简化Spring 用用开发的一个框架: 真个S僻壤技术栈的一个大整合 j2ee开发的一站式解决方案 2.微服务 微服务:是一种架构风格 一个应用应该是一组小型服务:可以通 ...

  4. 如何启动/关闭weblogic

    听语音 | 浏览:7107 | 更新:2014-12-25 15:43 1 2 3 4 5 6 分步阅读 最近用到weblogic 给大家分享一下如何启动和关闭weblogic 工具/原料   电脑 ...

  5. HDU 5074 Hatsune Miku 2014 Asia AnShan Regional Contest dp（水

    简单dp #include <stdio.h> #include <cstring> #include <iostream> #include <map> ...

  6. BUILD FAILED D:\build.xml:2: 前言中不同意有内容。

    1.错误描写叙述 Microsoft Windows [版本号 6.1.7601] 版权全部 (c) 2009 Microsoft Corporation. 保留全部权利. C:\Users\Admi ...

  7. easyUI datagrid 前端真分页

    前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...

  8. 【bzoj4245】[ONTAK2015]OR-XOR

    利用前缀和选m个区间等价于选m个数 从最高位开始找,如果这一位至少有m个0,则可以为0,该位为1的后面就不可以选了. 还要注意,最后一个数如果该位为1,那么这一位必须为1,然后要从62开始枚举,而不是 ...

  9. [Android 编译(一)] Ubuntu 16.04 LTS 成功编译 Android 6.0 源码教程

    本文转载自:[Android 编译(一)] Ubuntu 16.04 LTS 成功编译 Android 6.0 源码教程 1 前言 经过3天奋战,终于在Ubuntu 16.04上把Android 6. ...

  10. YTU 2622: B 虚拟继承（虚基类）-沙发床（改错题）

    2622: B 虚拟继承(虚基类)-沙发床(改错题) 时间限制: 1 Sec  内存限制: 128 MB 提交: 487  解决: 393 题目描述 有一种特殊的床,既能当床(Bed)用又能当沙发(S ...