JavaScript & DOM 學習筆記（二）

時間 2019-11-11

原文原文鏈接

1. CSS（層疊樣式表）、JavaScript 在 html 中的引用
css

（1）JavaScript 代碼必須經過 HTML/XHTML 文檔才能執行。有兩種方式能夠作到這點：
html

第一種方式：將 JavaScript 代碼放到文檔 <head> 標籤中的 <script> 標籤之間：
node

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>shopping list</title>
        <link rel="stylesheet" type="text/css" href="shopping.css">
        <script>
            function getElementsByClassName(node, className) {
                if (node.getElementsByClassName) {
                    return node.getElementsByClassName(className);
                } else {
                    var results = new Array();
                    var elems = node.getElementsByTagName("*");
                    for (var i=0; i < elems.length; i++) {
                        if (elems[i].className.indexOf(className) != -1) {
                            results[results.length] = elems[i];
                        }
                    }
                    return results;
                }
            }
        </script>
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff.</p>
        <h2>So does this headline</h2>
        <ul id="purchase">
            <li>A tin of beans</li>
            <li>Cheese</li>
            <li class="sale important">Milk</li>
        </ul>
    </body>
</html>

第二種方式（better）：將 JavaScript 代碼存放在擴展名爲 .js 的獨立文件（例如：testScript.js）。而後在文檔的 <head> 部分用 <script>標籤來引用：
瀏覽器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>shopping list</title>
        <link rel="stylesheet" type="text/css" href="shopping.css">
        <script src="testScript.js"></script>
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff.</p>
        <h2>So does this headline</h2>
        <ul id="purchase">
            <li>A tin of beans</li>
            <li>Cheese</li>
            <li class="sale important">Milk</li>
        </ul>
    </body>
</html>

而最好的作法是把 <script> 標籤放到 HTML 文檔的最後，</body> 標籤以前。這樣能使瀏覽器更快地加載頁面：
this

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>shopping list</title>
        <link rel="stylesheet" type="text/css" href="shopping.css">
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff.</p>
        <h2>So does this headline</h2>
        <ul id="purchase">
            <li>A tin of beans</li>
            <li>Cheese</li>
            <li class="sale important">Milk</li>
        </ul>
        
        <script src="testScript.js"></script>
    </body>
</html>

（2）CSS 的引用如上面代碼中，在 <head> 標籤中使用 <link> 標籤來引用。spa

<link rel="stylesheet" type="text/css" href="shopping.css">

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。