详解JS中的attribute属性


Posted in Javascript onApril 25, 2017

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>

以上所述是小编给大家介绍的JS中的attribute属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
JavaScript如何操作css
Oct 24 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 #Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 #Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 #Javascript
json的结构与遍历方法实例分析
Apr 25 #Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 #jQuery
用vue和node写的简易购物车实现
Apr 25 #Javascript
ES6数组的扩展详解
Apr 25 #Javascript
You might like
PHP中的CMS的涵义
2007/03/11 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
go语言计算两个时间的时间差方法
2015/03/13 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
实体的生命周期
2013/08/31 面试题
实习生单位鉴定意见
2013/12/04 职场文书
股东协议书
2014/04/14 职场文书
安全演讲稿大全
2014/05/09 职场文书
普通党员对照检查材料
2014/08/28 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
出生证明格式
2015/06/15 职场文书
《给予树》教学反思
2016/03/03 职场文书