HTML属性操作（对象方法） - JavaScript

上一节我们介绍了怎么用“对象属性”方式来操作HTML属性，这一节再给大家详细介绍怎么用“对象方法”方式来操作HTML属性。为了操作HTML元素的属性，JavaScript为我们提供了4种方法。

一、getAttribute()

在JavaScript中，我们可以使用getAttribute()方法来获取元素的某个属性的值。

语法：

obj.getAttribute("attr")

说明：

obj是元素名，attr是属性名。getAttribute()方法只有一个参数。注意，attr是要用英文引号括起来的，初学者很容易忽略这个问题。下面两种获取属性值的形式是等价的。

obj.getAttribute("attr")
obj.attr

这两种方式都可以用来获取静态HTML的属性值以及动态DOM的属性值。

举例：获取固有属性值


在线测试
<!DOCTYPE html> 
<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创建者是不是有点闲得没事做了呢？那肯定不是。我们先来看一个例子。

举例：获取自定义属性值


在线测试
<!DOCTYPE html> 
<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 = "值";

举例：


在线测试
<!DOCTYPE html> 
<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()这一个方法。此时，使用上一节“对象属性”操作那种方式就无法实现了，因为那种方式没有提供这样的方法。

举例：


在线测试
<!DOCTYPE html> 
<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属性来“整体”控制元素的样式属性的，我们再来看一个例子。

举例：


在线测试
<!DOCTYPE html> 
<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[0].className="";来代替oP[0].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()判断这个属性是否存在，如果存在，才去删除。

举例：


在线测试
<!DOCTYPE html> 
<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属性的两种方式，我们来总结一下。

（1）“对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性。
（2）只有“对象方法方式”才可以操作自定义属性。