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. TOMCAT加载两次war包（重复加载）

    一.问题描述 项目中通过配置Context节点docBase,使docBase指向项目的绝对路径,可以直接通过IP加端口访问,今日发现意外bug,项目中某个功能奇数次执行成功,偶数次执行失败.二.问题 ...

  2. 权限框架之Shiro详解(非原创)

    文章大纲 一.权限框架介绍二.Shiro基础介绍三.Spring Boot整合Shiro代码实战四.项目源码与资料下载五.参考文章   一.权限框架介绍 1. 什么是权限管理   权限管理属于系统安全 ...

  3. Android GIS开发系列-- 入门季（12） 显示载天地图

    在项目中可以经常需要动态加载一些图层,像投影地图服务.投影地图服务器.其实网上有大量这样的服务,比如天地图官网, . 随便点开一个服务,里面有相关的信息.那如何加载这样图层服务呢. 一.首先感谢这篇博 ...

  4. 解决confluence的乱码问题

    使用confluence时发现一些含有中文的页面中,中文都变成了问号. 继续搜索解决方案,发现时数据库中数据的格式不对, 在mysql中输入以下命令:   mysql> show variabl ...

  5. Serv-u 10.3 的图文安装教程及使用方法

    现在很多windows服务器都是使用serv_u作为ftp服务器,一般情况下我们使用Serv-U FTP Server v6.4.0.6,这里以serv_u 10.3为例介绍下,方便需要的朋友   一 ...

  6. 类的operator new与operator delete的重载【转】

    http://www.cnblogs.com/luxiaoxun/archive/2012/08/11/2633423.html 为什么有必要写自己的operator new和operator del ...

  7. JAVA OO之 类、对象、包

    类 类是具有相同属性和行为的一组对象的集合. public class HomeWork1 { public static void main(String[] args) { MyPhone mp= ...

  8. Android Wear - App Structure for Android Wear（应用结构）

    ---------------------------------------------------------------------------------------------------- ...

  9. Enterprise Library 5.0 学习笔记

    近期了解了微软提供的企业开发框架Enterprise Library,眼下最新版本号是6.0,可是不支持FW3.5.所以就学习了5.0的版本号,EL5.0支持FW3.5和4.0,官网下载地址是:htt ...

  10. java web项目的部署

    java web项目的部署 我刚开始学着编写java web项目,着实遇到不少麻烦,感觉JAVA真难侍候,好多东西都是手动.手动. 就拿这个web项目在tomcat上的部署来说吧.我在项目的build ...