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的使用方法:

    <head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function (){
var oBox = document.getElementById('box');
alert( document.body.innerHTML );
oBox.setAttribute('value','name');
alert( document.body.innerHTML );
attr = document.createAttribute('hallo');
alert( document.body.innerHTML );/*同上*/
attr.nodeValue = 'world';/*对自定义属性进行编辑*/
alert( document.body.innerHTML );/*同上*/
oBox.setAttributeNode(attr);/*对标签插入自定义属性*/
alert( document.body.innerHTML );/*改变*/
};
</script>
</head>
<body>
<ul id="box">
</ul>
</body>

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的含义的时候,就能够应用自如了。http://www.cnblogs.com/wangfupeng1988/p/3639330.html

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>
更多的关于attributes属必性问题,可在w3school中查询!

JS Attribute属性操作的更多相关文章

  1. js基础——属性操作

    html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1' ...

  2. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  3. 第二十一课:js属性操作的兼容性问题

    上一课主要讲了属性的概念,用法,固有属性和自定义属性的区别,class属性操作的方法等,这一课主要讲一些有关属性操作的兼容性问题. IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径,比如 ...

  4. [妙味JS基础]第一课:属性操作、图片切换、短信发送模拟

    知识点总结 HTML的属性操作:读.写 元素.属性名 => “读” 元素.属性名=新的值 => “写” 例如: oBtn.value => “读” oBtn.value='按钮' = ...

  5. 斗篷指令、属性指令、表单指令、条件指令、循环指令、js的Array操作、前台数据库、

    ```python"""1)指令 属性指令:v-bind 表达指令:v-model 条件指令:v-show v-if 循环指令:v-for 斗篷指令:v-cloak 2) ...

  6. js switch判断 三目运算 while 及 属性操作

    三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) ...

  7. jQuery-1.9.1源码分析系列(八) 属性操作

    jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removePro ...

  8. jQuery的属性操作

    下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...

  9. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

随机推荐

  1. nodejs调试工具node-inspector入门随笔

    最近打算玩玩node. 众所周知,在前端,调试代码有一众天然好工具——浏览器!特别是 chrome,使得 jser 们如鱼得水,玩得风生水起.但是到了node,情况就不一样了,js 代码不再运行在单纯 ...

  2. 搭建集群必备:windows如何使用Xshell远程连接(SSH)Linux

    出处about云(http://www.aboutyun.com/blog-61-22.html)欢迎访问我的博客 首先介绍一下环境: (主机)操作系统:win7 虚拟机:vmware worksta ...

  3. HW4.10

    public class Solution { public static void main(String[] args) { int count = 0; for(int i = 100; i & ...

  4. HW1.5

    public class Solution { public static void main(String[] args) { System.out.println("(9.5 * 4.5 ...

  5. Excel中VBA 连接 数据库 方法- 摘自网络

    Sub GetData() Dim strConn As String, strSQL As String Dim conn As ADODB.Connection Dim ds As ADODB.R ...

  6. MySql中启用InnoDB数据引擎的方法

    1.存储引擎是什么? Mysql中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术, ...

  7. Duff and Weight Lifting - 587A

    题目大意:某个人训练举重,他每次可以举起来2^wi的重量,不过这个人比较懒所以他想尽量减少训练的次数,如果所有的训练重量2^a1 +2^a2+....2^ak = 2^x,那么这些重量可以一次性训练( ...

  8. PHP使用IP地址连接MySQL数据库

    我们通常测试的时候都是用mysql_connect("localhost","usrname","password");的方式来连接MySQ ...

  9. 检查REDO日志相关信息并生成HTML文件的脚本

    生成HTML格式的文件 内容有: 检查数据库版本.REDO日志组情况, 最近20次日志切换频率检查--日志间的归档时间间隔, 这对查看数据库的IO繁忙时段 统计指定日期当天每小时的归档日志产生量--日 ...

  10. freemarker list (长度,遍历,下标,嵌套,排序)

    1. freemarker获取list的size : Java ArrayList<String> list = new ArrayList<String>(); Freema ...