JS 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>
JS Attribute属性操作的更多相关文章
- js基础——属性操作
html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1' ...
- js学习笔记2---HTML属性操作
1.HTML属性操作:读.写 属性名 属性值 2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...
- 第二十一课:js属性操作的兼容性问题
上一课主要讲了属性的概念,用法,固有属性和自定义属性的区别,class属性操作的方法等,这一课主要讲一些有关属性操作的兼容性问题. IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径,比如 ...
- [妙味JS基础]第一课:属性操作、图片切换、短信发送模拟
知识点总结 HTML的属性操作:读.写 元素.属性名 => “读” 元素.属性名=新的值 => “写” 例如: oBtn.value => “读” oBtn.value='按钮' = ...
- 斗篷指令、属性指令、表单指令、条件指令、循环指令、js的Array操作、前台数据库、
```python"""1)指令 属性指令:v-bind 表达指令:v-model 条件指令:v-show v-if 循环指令:v-for 斗篷指令:v-cloak 2) ...
- js switch判断 三目运算 while 及 属性操作
三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) ...
- jQuery-1.9.1源码分析系列(八) 属性操作
jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removePro ...
- jQuery的属性操作
下面介绍jQuery属性操作: .val() 这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的va ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
随机推荐
- nodejs调试工具node-inspector入门随笔
最近打算玩玩node. 众所周知,在前端,调试代码有一众天然好工具——浏览器!特别是 chrome,使得 jser 们如鱼得水,玩得风生水起.但是到了node,情况就不一样了,js 代码不再运行在单纯 ...
- 搭建集群必备:windows如何使用Xshell远程连接(SSH)Linux
出处about云(http://www.aboutyun.com/blog-61-22.html)欢迎访问我的博客 首先介绍一下环境: (主机)操作系统:win7 虚拟机:vmware worksta ...
- HW4.10
public class Solution { public static void main(String[] args) { int count = 0; for(int i = 100; i & ...
- HW1.5
public class Solution { public static void main(String[] args) { System.out.println("(9.5 * 4.5 ...
- Excel中VBA 连接 数据库 方法- 摘自网络
Sub GetData() Dim strConn As String, strSQL As String Dim conn As ADODB.Connection Dim ds As ADODB.R ...
- MySql中启用InnoDB数据引擎的方法
1.存储引擎是什么? Mysql中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术, ...
- Duff and Weight Lifting - 587A
题目大意:某个人训练举重,他每次可以举起来2^wi的重量,不过这个人比较懒所以他想尽量减少训练的次数,如果所有的训练重量2^a1 +2^a2+....2^ak = 2^x,那么这些重量可以一次性训练( ...
- PHP使用IP地址连接MySQL数据库
我们通常测试的时候都是用mysql_connect("localhost","usrname","password");的方式来连接MySQ ...
- 检查REDO日志相关信息并生成HTML文件的脚本
生成HTML格式的文件 内容有: 检查数据库版本.REDO日志组情况, 最近20次日志切换频率检查--日志间的归档时间间隔, 这对查看数据库的IO繁忙时段 统计指定日期当天每小时的归档日志产生量--日 ...
- freemarker list (长度,遍历,下标,嵌套,排序)
1. freemarker获取list的size : Java ArrayList<String> list = new ArrayList<String>(); Freema ...