javascript 三种方法实现获得和设置以及移除元素属性
更新时间：2013年03月20日 15:55:43 作者：
获得和设置以及移除元素属性在操作dom的过程中会经常遇到吧,为了提高工作的效率本文整理了一些快捷操作方法和大家一起分享，感兴趣的朋友可以参考下哈
以下面的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特性
复制代码 代码如下:
<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特性
相关文章
关于浏览器退格键的禁用，可行的方法有很多，在本文将为大家详细介绍下在js中时如何做到的，有需求的各位可以参考下2013-10-10
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
本文主要介绍了利用CSS、JavaScript及Ajax实现图片预加载的三大方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
在JS中如何动态调用方法名，想必很多的朋友们都不会吧，下面为大家举例介绍下具体的调用方法2013-12-12
这篇文章主要介绍了NestJs使用Mongoose对MongoDB操作的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
behaviors是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”，这篇文章主要介绍了微信小程序组件通信和behavior使用,需要的朋友可以参考下2022-08-08
放在你的首页比较不错，宽屏图片格式，每张图片平滑飞入切换，鼠标放上自动切换，和FLASH的平滑效果差不多，喜欢的朋友可以收藏下2013-11-11
我们在做uniapp的项目的时候经常需要用到各种插件,下面这篇文章主要给大家介绍了关于Uniapp接入插件的3种方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JavaScript设计模式之责任链模式,结合实例形式分析了责任链模式的概念、原理及具体定义与使用技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了微信小程序日历弹窗选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
下面小编就为大家带来一篇sencha ext js 6 快速入门(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
最新评论