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. wuzhicms刷新按钮的功能开发

    这个刷新按钮可以刷新当前框架的页面. 但有的页面使用了弹窗打开后,再点击刷新就会打开之前的弹窗页面. 如: 再刷新的时候,这个框架内容就变了.而这里,我们实际需要刷新的是列表页面 打开这个程序的具体文 ...

  2. PC-如何禁用 Cookie

    \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* if (string.IsNullOrEmpty(TextBox2.Text) || TextBox2.Tex ...

  3. [一]初识SpringMVC

    是什么? web开发框架 为什么用? 功能强大 怎么做? 1.导入jar包 2.配置web.xml <?xml version="1.0" encoding="UT ...

  4. eclipse中的maven配置

    1.下载最新版eclipse,包含maven版本 2.配置maven本地仓库(修改settings.xml)

  5. http 2.0

    http2.0  待学习整理 http://www.zhihu.com/question/34074946

  6. children真的没有兼容性问题吗？

    获取某一节点的所有子元素节点,你会用什么方法? 如果你用childNodes,那会有兼容性问题,对于标准浏览器,他包含的是元素节点和文本节点,我们还需要循环来判断节点的类型,是文本节点还是元素节点,不 ...

  7. Ubuntu 12.04 分区方案（仅供参考）

    Ubuntu 12.04 分区方案(仅供参考)   总空间大小:50G 目录 建议大小 实际大小 格式 描述 / 10G~20G 10G ext4 根目录 swap <2048M 1G swap ...

  8. AptanaStudio3 安装在win7 64bit时遇到的问题

    最近在研究前端语言,想起可以使用AptanaStudio这个前端利器,没想到安装时却遇到波折.先从网上下载了Aptana版本 3.6.0 64bit问题1 安装进度缓慢,第一次安装时,显示downlo ...

  9. 蘑菇街IM

    https://github.com/mogutt TTServer 蘑菇街TeamTalk之消息服务器 Updated 2 days ago   Shell 122 208 TTAutoDeploy ...

  10. C# - 文件操作类

    除了封装数据流的类 System.IO命名空间中还提供了可以操作文件和目录的类 Directory类 ns:System.IO Level:Object=>Directory 表示目录的类 用于 ...