javascript学习笔记(二十) 获得和设置元素的特性(属性)


Posted in Javascript onJune 20, 2012

本节html以下面的为例

<div id="myDiv" class="bd" title="我是div"> 
<img id="img1" /> 
<a id="myA" href = "http://www.baidu.com">百度</a> 
</div>

1.通过HTMLElement类型(对象)的属性获得和设置元素特性
var div = document.getElementById("myDiv"); 
var img = document.getElementById("img1"); 
var a = document.getElementById("myA"); 
//取得元素特性 
alert(div.id); //"myDiv" 
alert(div.className); //"bd",这里不是div.class,是因为class是保留关键字 
alert(div.title); //"我是div" 
alert(a.href); //http://www.baidu.com 
//设置元素特性 
div.id = "myDiv2"; //id改为"myDiv2" 
div.className = "ft"; //class改为"ft",如果存在名为"ft"的样式,会立刻变为"ft"样式,浏览器会立刻反应出来 
div.title = "我是myDiv2"; //title改为"我是myDiv2" 
div.align = "center"; //设置居中对齐 
img.src ="images/img1.gif"; //设置图片路径 
a.innerHTML ="新浪"; //"百度"改为"新浪" 
a.href = "http://www.sina.com.cn"; //重新设置超链接

2.通过getAttribute()、setAttribute()和removeAttribute() 方法,获取、设置、移除元素的特性(不推荐使用,前两个方法IE6,7中有异常,第三个方法IE6不支持,设置自定义特性时可以使用)
getAttribute() 方法,用来获取元素特性。接受一个参数,即要获得元素的特性名
setAttribute() 方法,用来设置元素特性。接受两个参数,即要获得元素的特性名和特性值
removeAttribute() 方法,用来移除元素的特性。接受一个参数,即要移除元素的特性名
var div = document.getElementById("myDiv"); 
var img = document.getElementById("img1"); 
var a = document.getElementById("myA"); 
//取得元素特性 
alert(div.getAttribute("id")); //"myDiv" 
alert(div.getAttribute("class")); //"bd",注意这里是class,而不是className,与上面不同 
alert(div.getAttribute("title")); //"我是div" 
alert(a.getAttribute("href")); //http://www.baidu.com 
//设置元素特性 
div.setAttribute("id","myDiv2"); //id改为"myDiv2" 
div.setAttribute("class","ft"); //class改为"ft",这里同样是class,而不是className 
div.setAttribute("title","我是myDiv2"); //title改为"我是myDiv2" 
div.setAttribute("align","center"); //设置居中对齐 
img.setAttribute("src","images/img1.gif"); //设置图片路径 
//移除元素特性 
div.removeAttribute("class"); //移除class特性

3.通过attributes属性,获取、设置、移除元素的特性
var div = document.getElementById("myDiv"); 
//取得元素特性 
alert(div.attributes["id"].nodeValue); //"myDiv" 
//设置元素特性 
div.attributes["id"].nodeValue = "myDiv2"; //id改为"myDiv2" 
//移除元素特性 
div.attributes.removeNamedItem("class"); //移除class特性
Javascript 相关文章推荐
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
a标签调用js的方法总结
Sep 05 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 #Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 #Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 #Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 #Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 #Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 #Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 #Javascript
You might like
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
深入讲解Python编程中的字符串
2015/10/14 Python
《Python学习手册》学习总结
2018/01/17 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
移动通信行业实习自我鉴定
2013/09/28 职场文书
素质拓展感言
2014/01/29 职场文书
医院检讨书范文
2014/02/01 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书