js中的attribute详解
Attribute是属性的意思，文章仅对部分兼容IE和FF的Attribute相关的介绍。attributes：获取一个属性作为对象getAttribute：获取某一个属性的值
object.getAttributes(attribute) getAttribute方法不属于document对象，所以不能通过document对象获取，只能通过元素节点的调用。例如document.getElementsByTagName("p")[0].
getAttributes("title")
setAttribute：建立一个属性，并同时给属性捆绑一个值
允许对属性节点做出修改，例如
var shoop=document.getElementsById("psdf');
shoop.setAttribute("tittle","a lot of goods")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，注意到这点就可以了。
4\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.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>
原文参考链接:http://www.jianshu.com/p/41bed26419e0
js中的attribute详解的更多相关文章
- C#中的Attribute详解（下）
原文地址:https://blog.csdn.net/xiaouncle/article/details/70229119 C#中的Attribute详解(下) 一.Attribute本质 从上篇里我 ...
- JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...
- JS 中 this 关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...
- Bom和Dom编程以及js中prototype的详解
一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解
前 言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...
- JS中navigator对象详解
<code class="language-html"><!doctype html> <html> <head> <meta ...
- js中Date()对象详解
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- js中的逻辑运算符详解(||、&&、!)
视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...
- js中window对象详解以及页面跳转
1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...
随机推荐
- Vue NGINX Apache 404 问题解决
location ^~/html/dist { #alias /home/server/webapps/vuejs-admin/; index index.html; try_files $uri $ ...
- IDEA中类文件显示J,IDEA Unable to import maven project: See logs for details
今天用了下lemon清理了下垃圾后,IDEA打开项目类文件图标由C变为J,在IDEA右侧的Maven Project中点击刷新提示IDEA Unable to import maven project ...
- ANR无法生成traces.txt文件
在有些设备上ANR无法生成traces.txt文件,kill -3又不能准确把握时机或者没权限,可能是软件访问这个路径失败,可以在/data/anr/下面建立一个空的traces.txt,注意保证an ...
- 分布式session一致性
实现思路:当客户端发送请求到服务端后,在后台生成一个token,将token作为key,用户状态信息作为value,存入redis缓存中,并设置过期时间,最后把token返回给客户端 客户端第会保存t ...
- Elasticsearch进阶篇(一)~head插件的安装与配置
1.安装node.js 1.1.通过官网下载二进制安装包 https://nodejs.org/en/download/ 选择对应的版本,右键复制下载链接,进入linux目录,切换到要安装目录的磁盘. ...
- C++ STL学习总结
1.vector //最好给它一个初始化大小 #include <iostream> #include <vector> using namespace std; int ma ...
- Python中NumPy的使用一
NumPy简介: 一个用python实现的科学计算,包括:1.一个强大的N维数组对象Array:2.比较成熟的(广播)函数库:3.用于整合C/C++和Fortran代码的工具包:4.实用的线性代数.傅 ...
- centos 6.5安装zabbix 4.4
一.安装环境 本环境,使用单机部署. 操作系统:centos 7.5 x64zabbix-server,Mysql,php,nginx都在同一台服务器.都是使用Yum安装的! 官方安装文档: http ...
- ELK 索引生命周期管理
kibana 索引配置 管理索引 点击设置 --- Elasticsearch 的 Index management 可以查看 elk 生成的所有索引 (设置,Elasticsearch ,管理) 配 ...
- .net Dapper 实践系列(3) ---数据显示(Layui+Ajax+Dapper+MySQL)
目录 写在前面 产生问题 解决方案 写在前面 上一小节,我们使用Dapper 里事务实现了一对多关系的添加.这一小节,主要记录如何使用Dapper 实现多表的查询显示. 产生问题 在mvc控制器中查询 ...