通過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>
//結果
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"));
//結果
以上測試代碼對應的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>