天天看點

JavaScript擷取對象屬性和設定對象屬性總計

通過id、classname以及tagname,利用document的getElementById、getElementsByClassName、getElementsByTagName,我們可以擷取到文檔樹中的任意元素節點對象。有了節點對象,我們可能會對其屬性進行檢視或者修改。本文總結了JavaScript擷取和設定對象屬性的方法。

1. 擷取屬性

getAttribute

輸入:屬性的名字,字元串

輸出:屬性的值

注:getAttribute是元素節點對象的方法,不是document對象的方法

<script> 
    var obj = document.getElementById("header");//擷取節點對象
    var attr = obj.getAttribute("title");//擷取title屬性
    console.log("the title of header:"+attr);   
</script>
//結果
           

JavaScript擷取對象屬性和設定對象屬性總計

2. 設定屬性

setAttribute

輸入:屬性的名字,字元串

輸出:無

注:setAttribute同getAttribute一樣,是元素節點對象的方法,不是document對象的方法,不能用document調用

var obj = document.getElementById("header");
    var attr = obj.getAttribute("title");
    console.log("the title of header before change:"+attr); 

    obj.setAttribute("title","the title has been changed");
    console.log("the title of header after change:"+obj.getAttribute("title"));
//結果
           

JavaScript擷取對象屬性和設定對象屬性總計

以上測試代碼對應的HTML代碼:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getAttribute</title>
    <style type="text/css">
        #header{
            width:px;
            height:px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header" title="this is the header">
        </div>
    </div>
</body>
<script> 
//...   
</script>
</html>
           

繼續閱讀