JavaScript DOM程式設計藝術第四章 — JavaScript圖片庫案例研究

二森發表於2021-06-17
JavaScript程式設計

這一章通過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="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);
}

-- 輸出：
image

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

-- 文字節點示例：
image

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);
}

--- 輸出：
image

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

function countBodyChildren() {
    let description = document.getElementById('description');
    description.childNodes[0].nodeValue = 'hello world';
    console.log(description.childNodes[0].nodeValue);
}

--- 輸出：
image

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;
}

效果：
image

本章其它知識點

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

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

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

相關文章