這一章通過JavaScript圖片庫案例，學習了一些DOM屬性。

HTML程式碼

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>圖片庫</title>

    <link rel="stylesheet" href="styles/layout.css" media="screen" />

</head>

<script type="text/javascript" src="scripts/showPic.js"></script>

<body>

    <h1>Snapshots</h1>

    <ul>

        <li>

            <a href='images/1.jpg' title="黃昏海邊" onclick="showPic(this);

            return false;">黃昏海邊</a>

        </li>

        <li>

            <a href='images/2.jpg' title="大漠孤煙直" onclick="showPic(this);

            return false;">沙漠</a>

        </li>

        <li>

            <a href='images/3.jpg' title="湖泊" onclick="showPic(this);

            return false;">湖泊</a>

        </li>

        <li>

            <a href='images/4.jpg' title="可愛熊熊" onclick="showPic(this);

            return false;">可愛桌布</a>

        </li>

        <li>

            <a href='images/5.jpg' title="哆啦A夢" onclick="showPic(this);

            return false;">哆啦A夢</a>

        </li>

    </ul>

    <img id="placeholder" src="data:images/gallery.png" alt="my image gallery" />

    <p id="description">Choose an image.</p>

</body>

</html>

幾個DOM屬性

1. childNodes屬性

  • 用來獲取任何一個元素的所有子元素
  • 使用方式：element.childNodes
  • 返回值：這個元素的所有子元素陣列。包含所有型別的節點：元素節點、文字節點和屬性節點。（實際上，文件裡幾乎每個東西都是一個節點，甚至連空格和換行符都是節點）

-- 示例：輸出body元素的全體子元素

function countBodyChildren() {

	let body_element = document.getElementsByTagName('body')[0];

	console.log(body_element.childNodes);

}

-- 輸出：

如圖可見，body元素的子元素有9個，除了h1元素、ul元素、p元素、img元素四個外，還包括5個文字節點。

-- 文字節點示例：

2. nodeType屬性

  • 獲取每個節點的type（元素節點、文字節點還是屬性節點）

    • 元素節點的nodeType屬性值：1
    • 屬性節點的nodeType屬性值：2
    • 文字節點的nodeType屬性值：3
  • 使用方式：node.nodeType

-- 示例：

let body_element = document.getElementsByTagName('body')[0];

alert(body_element.nodeType);

-- 輸出：1

3. nodeValue屬性

  • 獲取 or 設定節點的值
  • 獲取節點的值使用方式：node.nodeValue
  • 設定節點的值使用方式：node.nodeValue = xxx
  • 注意，元素節點的nodeValue值是null。如果想獲取p元素所包含的文字值，則需要獲取元素所包含的文字值，則需要獲取p元素的第一個子節點。

-- 示例：輸出 p元素的nodeValue 和 p的childNodes 以及 第一個子節點的nodeValue

function countBodyChildren() {

    let description = document.getElementsById('description');

    console.log(description.nodeValue);

    console.log(description.childNodes);

    console.log(description.childNodes[0].nodeValue);

}

--- 輸出：

-- 示例：將p元素nodeValue值設定為'hello world'

function countBodyChildren() {

    let description = document.getElementById('description');

    description.childNodes[0].nodeValue = 'hello world';

    console.log(description.childNodes[0].nodeValue);

}

--- 輸出：

4. firstChild和lastChild屬性

  • 指childNodes的第一個元素和最後一個元素，相當於簡寫，如下：

    • node.firstChild ——> node.childNodes[0]

    • node.lastChild ——> node.childNodes[node.childNodes.length - 1]

完整程式碼

1. HTML見上

2. JavaScript

function showPic(whichPic) {

    let source = whichPic.getAttribute('href');

    let placeholder = document.getElementById('placeholder');

    placeholder.setAttribute('src', source);

    let title = whichPic.getAttribute('title');

    let description = document.getElementById('description');

    description.firstChild.nodeValue = title;

}

3. CSS

body {

    font-family: 'Helvetica', 'Arial', serif;

    color: #333;

    background-color: #ccc;

    margin: 1em 10%;

}

h1 {

    color: #333;

    background-color: transparent;

}

a {

    color: #c60;

    background-color: transparent;

    font-weight: bold;

    text-decoration: none;

}

ul {

    padding: 0;

}

li {

    float: left;

    padding: 1em;

    list-style: none;

}

img {

    width: 80%;

    display: block;

    clear: both;

}

效果：

本章其它知識點

改變屬性的方法除了setAttribute外，還可以使用非DOM的方法，比如改變某個input的value屬性，

  • 使用setAttribute：element.setAttribute('value', 'the new value')
  • 使用非DOM解決方案：element.value = 'the new value'

非DOM解決方案是在DOM出現之前使用的方式，並非所有的屬性都可以用這種方式設定屬性，因此建議使用setAttribute，setAttribute可以修改文件中的任何一個元素的任何一個屬性。