JavaScript--DOM修改元素的属性

一旦你获得了要修改的元素，可以有2种方式，来读取和修改它的属性：一种老的方式（它被更多的用户代理所支持）和一种新的DOM方法的方式。老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性。

先看看老的方式，获取设置属性吧：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DOM元素修改元素的属性</title>
    <style type="text/css">
        #header {
            float: left;
            border: 1px dotted #892e2e;
        }

        #menu {
            float: left;
            border: 1px dotted #000;
        }

        #content {
            float: right;
            border: 1px dotted #0026ff;
        }

        #footer {
            clear: both;
            border: 1px dotted #0026ff;
        }
    </style>
    <script type="text/javascript">
    window.onload= function (){
           // var myListItem = document.getElementById("myListItem");
            var myListItem = document.getElementsByTagName("a")[0];
            if (myListItem.href == "http://www.taobao.com/") {
                myListItem.href = "http://baidu.com";
            }

        }
    </script>
</head>
<body>
    <div id="container">
        <div id="header">
            <ul>
                <li>个人主页</li>
                <li>我的相册</li>
                <li>我的爱好</li>
                <li>关于我</li>
            </ul>
        </div>
        <div id="menu">
            <ul>
                <p>个人主页</p>
                <li>湖北武汉</li>
                <li>广东深圳</li>
            </ul>
            <ul>
                <p>我的相册</p>
                <li>我和我的大学</li>
                <li>深圳的生活</li>
                <li><a href="http://www.taobao.com" id="myListItem">武汉软件工程职业学院</a></li>
            </ul>
            <ul>
                <p>我的爱好</p>
                <li>游泳</li>
                <li>唱歌</li>
                <li>乒乓球</li>
                <li>爬山</li>
            </ul>
            <ul>
                <p>关于我</p>
                <li>我就是我，不一样的自我</li>
            </ul>
        </div>
        <div id="content">
            <p>大家好，我是XXX，来自遥远的星球，很高兴认识大家，希望能够和大家成为好朋友。</p>

        </div>
        <div id="footer">
            &copy 2015 XXX的个人主页
        </div>
    </div>
</body>
</html>

页面加载完成之后，点击链接，打开的将会是百度网站，而不是淘宝网。

DOM规范提供了2中方法来读取和设置属性值--getAttribute()和setAttribute().

getAttribute()方法，有一个参数---属性名；setAttribute()方法需要两个参数---属性名和新的属性值。

现在看看新方式获取设置属性：

  if (myListItem.getAttribute("href") == "http://www.taobao.com")
           {
               myListItem.setAttribute("href", "http://www.jd.com");
           }

点击链接之后，打开的是京东商城，而不是淘宝网～～～