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. hdu - 1689 Just a Hook (线段树区间更新)

    http://acm.hdu.edu.cn/showproblem.php?pid=1698 n个数初始每个数的价值为1,接下来有m个更新,每次x,y,z 把x,y区间的数的价值更新为z(1<= ...

  2. XJTUOJ13 (数论+FFT)

    http://oj.xjtuacm.com/problem/13/ 题意:wmq如今开始学习乘法了!他为了训练自己的乘法计算能力,写出了n个整数, 并且对每两个数a,b都求出了它们的乘积a×b.现在他 ...

  3. Android GIS开发系列-- 入门季(8) Json与Geometry的相互转换

    在Android中json数据十分普遍,也很实用,在Arcgis中也同样支持Json数据,Json与Geometry可以相互转换,达到我们想要的数据. 一.Geometry转换成Json数据 这个实现 ...

  4. mysql设置datetime默认值为now

    mysql设置datetime默认值为now MYSQL-TIMESTAMP数据类型的默认值与自动更新问题 http://blog.csdn.net/scogeek/article/details/5 ...

  5. C#程序如何把窗体文件从从一个项目中复制到另一个项目

    一个窗体有三个文件,全部拷贝到新的项目中   在新的项目中点击显示所有文件,然后右击导入的文件,点击包括在项目中,会自动修改颜色(此时还没有被识别为窗体)   重启这个项目,三个文件已经被识别出来了 ...

  6. Office 针式打印机如何插入色带

    1 打开盖子,用手按住我按的地方   2 向下翻起   3 翻转完成   4 装入色带(有旋钮的那面朝向自己,装入之后,按箭头方向旋转以拉紧色带,下图圈出来的2是色带导向架)   5 把色带绷直,如下 ...

  7. 搭建wamp php环境

    点击下载wamp,wamp是一个集成环境,在安装过程中,我们要选择默认的浏览器以及默认的文本编辑器,安装步骤如下: 第一步,选择默认的浏览器(填写默认的浏览器可执行路径就行) 第二步,选择默认的文本编 ...

  8. 【iOS开发-74】解决方式:Xcode6下利用preference保存数据,终于的plist文件在哪里?

    (1)现象:普通情况下.储存数据以一个沙盒为单位,preference数据存在在沙盒路径下Library/Preferences里面,可是Xcode6里找来找去根本什么都没有. watermark/2 ...

  9. [NOI2015Day1]解题报告

    今天一起做NOI的题. 我仅仅想说SunshinAK了好神啊. T3数据好坑啊,打表竟然被编译环境卡掉了... T1:程序自己主动分析 (http://www.lydsy.com/JudgeOnlin ...

  10. iOS xcode6最新提交app方法

    依照之前方式打包.打包成功后.直接submit提交AppStore.然后再选择build,假设上传成功,但在build选择上未出现,你能够耐心等待.有可能要等上一天,然后选择相应的build,直接提交 ...