網頁設計微筆記: 7.5 基本屬性：value、innerHTML、style

　　我們可以透過 document 物件的 getElementById() 方法取得 DOM 節點樹上特定 ID 屬性值的元素。另外，document 物件的 getElementsByTagName() 方法則可以取得特定元素名稱的元素。取得元素後，我們可以再使用 value 或 innerHTML 屬性來存取其內容，例如：

<!DOCTYPE html> 
<html>
<head>
</head>
<body>
    <textarea id="foo">example</textarea>
    <script type="text/javascript">
        // 用 getElementById() 取得元素
        var objA = document.getElementById("foo");
        alert(objA.value);
        objA.value = "hello";

        // 用 getElementsByTagName() 取得元素
        var objB = document.getElementsByTagName("textarea");
        alert(objB[0].value);
        objB[0].value = "example";
    </script>
</body>
</html>

　　getElementsByTagName() 取得的是一個符合條件的元素清單，它其實就是一個陣列，我們可以輸入索引值以取得個別的元素。value 屬性是用來取得元素中不包括 HTML 程式碼的內容，而 innerHTML 屬性則是用來取得元素中包括 HTML 程式碼的內容，有時它們取得的值會是相同的。另外還有一個 style 屬性，它可以用來存取 CSS 樣式，例如：

<!DOCTYPE html> 
<html>
<head>
</head>
<body>
    <textarea id="foo">example</textarea>
    <script type="text/javascript">
        // 用 getElementById() 取得元素
        var objA = document.getElementById("foo");
        objA.style.color = "pink";

        // 用 getElementsByTagName() 取得元素
        var objB = document.getElementsByTagName("textarea");
        objB[0].style.width = "200px";
    </script>
</body>
</html>

　　請特別注意 CSS 樣式屬性轉換成 style 物件屬性時，若原本的屬性名稱內有「-」符號時需省略，並將後面的英文字首改成大寫，例如 background-color 這個 CSS 樣式屬性寫成 style 物件屬性時，會變成 backgroundColor。