JavaScript--DOM修改元素的屬性 - caofangsheng－IT工程師數位筆記本

文章出處

一旦你獲得了要修改的元素，可以有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");
           }