上一节我们介绍了怎么用“对象属性”方式来操作HTML属性，这一节再给大家详细介绍怎么用“对象方法”方式来操作HTML属性。为了操作HTML元素的属性，JavaScript为我们提供了4种方法。
一、getAttribute()
在JavaScript中，我们可以使用getAttribute()方法来获取元素的某个属性的值。
语法：
obj.getAttribute("attr")
说明：
obj是元素名，attr是属性名。getAttribute()方法只有一个参数。注意，attr是要用英文引号括起来的，初学者很容易忽略这个问题。下面两种获取属性值的形式是等价的。
obj.getAttribute("attr")
obj.attr
这两种方式都可以用来获取静态HTML的属性值以及动态DOM的属性值。
举例：获取固有属性值
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
alert(oBtn.getAttribute("id"));
}
}
script>
head>
<body>
<input id="btn" class="myBtn" type="button" value="获取"/>
body>
html>
浏览器预览效果如图所示。
分析：
在这个例子中，我们可以使用oBtn.id来代替oBtn.getAttribute("id")，因为这两个是等价的。此外，使用obj.getAttribute("attr")这种方式，同样不仅可以用来获取静态HTML元素的属性值，还可以用来获取动态DOM元素中的属性值，这一点跟obj.attr是相同的。
现在最大的疑问就来了，为什么JavaScript要提供两种方式来操作HTML属性呢？JavaScript创建者是不是有点闲得没事做了呢？那肯定不是。我们先来看一个例子。
举例：获取自定义属性值
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
alert(oBtn.data);
};
}
script>
head>
<body>
<input id="btn" type="button" value="获取" data="JavaScript"/>
body>
html>
默认情况下，预览效果如图所示。
当我们点击【提交】按钮后，此时预览效果如图所示。
分析：
这里我们为input元素自定义了一个data属性。所谓的自定义属性，指的是这个属性是用户自己定义的而不是元素自带的。此时我们使用obj.attr（也就是对象属性方式）是无法实现的，只能用getAttribute("attr")（也就是对象方法方式）来实现。
当我们把oBtn.data改成oBtn.getAttribute("data")后，然后点击【获取】按钮，此时浏览器预览效果如图所示。
对于自定义属性，我们可能不太熟悉。其实在CSS3动画以及实际开发中用得是非常多的，当然这个是后面的高级知识了。
二、setAttribute()
在JavaScript中，我们可以使用setAttribute()方法来设置元素的某个属性的值。
语法：
obj.setAttribute("attr","值")
说明：
obj是元素名，attr是属性名。setAttribute()方法有两个参数：第1个参数是属性名；第2个参数是你要设置的属性值。下面两种设置属性值的形式是等价的：
obj.setAttribute("attr","值")
obj.attr = "值";
举例：
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
oBtn.setAttribute("value", "button");
};
}
script>
head>
<body>
<input id="btn" type="button" value="修改" />
body>
html>
默认情况下，预览效果如图所示。
当我们点击【修改】按钮之后，预览效果如图所示。
分析：
这里我们也可以使用oBtn.value = "button";来代替oBtn.setAttribute("value","button")。同样的，对于自定义属性的值设置，我们也只能用setAttribute()方法来实现。
三、removeAttribute()
在JavaScript中，我们可以使用removeAttribute()方法来删除元素的某个属性。
语法：
obj.removeAttribute("attr")
说明：
想要删除元素的某个属性，我们只有removeAttribute()这一个方法。此时，使用上一节“对象属性”操作那种方式就无法实现了，因为那种方式没有提供这样的方法。
举例：
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.main{color:red;font-weight:bold;}
style>
<script>
window.onload = function ()
{
var oP = document.getElementsByTagName("p");
oP[0].onclick = function ()
{
oP[0].removeAttribute("class");
};
}
script>
head>
<body>
<p class="main">你偷走了我的影子，无论你在哪里，我都会一直想着你。p>
body>
html>
浏览器预览效果如图所示。
分析：
这里使用getElementsByTagName()方法来获取p元素，然后为p添加一个点击事件。在点击事件中，我们使用removeAttribute()方法来删除class属性。
removeAttribute()更多情况下是结合class属性来“整体”控制元素的样式属性的，我们再来看一个例子。
举例：
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.main{color:red;font-weight:bold;}
style>
<script>
window.onload = function ()
{
var oP = document.getElementsByTagName("p");
var oBtnAdd = document.getElementById("btn_add");
var oBtnRemove = document.getElementById("btn_remove");
//添加class
oBtnAdd.onclick = function () {
oP[0].className = "main";
};
//删除class
oBtnRemove.onclick = function () {
oP[0].removeAttribute("class");
};
}
script>
head>
<body>
<p>你偷走了我的影子，无论你在哪里，我都会一直想着你。p>
<input id="btn_add" type="button" value="添加样式"/>
<input id="btn_remove" type="button" value="删除样式"/>
body>
html>
浏览器预览效果如图所示。
分析：
如果我们用oP.className="";来代替oP.removeAttribute("class");，效果也是一样的。
想要为一个元素添加一个class（即使不存在class属性），可以使用：
oP[0].className = "main";
想要为一个元素删除一个class，可以使用：
oP[0].className = "";
或
oP[0].removeAttribute("class");
四、hasAttribute()
在JavaScript中，我们可以使用hasAttribute()方法来判断元素是否含有某个属性。
语法：
obj.hasAttribute("attr")
说明：
hasAttribute()方法返回一个布尔值，如果包含该属性，则返回true。如果不包含该属性，则返回false。
实际上我们直接使用removeAttribute()删除元素的属性是不太正确的，比较严谨的做法是先用hasAttribute()判断这个属性是否存在，如果存在，才去删除。
举例：
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.main {color: red;font-weight: bold;}
style>
<script>
window.onload = function ()
{
var oP = document.getElementsByTagName("p");
if (oP[0].hasAttribute("class"))
{
oP[0].onclick = function ()
{
oP[0].removeAttribute("class");
};
}
}
script>
head>
<body>
<p class="main">你偷走了我的影子，无论你在哪里，我都会一直想着你。p>
body>
html>
浏览器预览效果如图所示。
最后，对于操作HTML属性的两种方式，我们来总结一下。
