《HTML5 精要剖析》- 1.6.1 操作網頁元素/選擇器與 JavaScript

2012-03-21

4736
0
HTML5

這一篇比較簡單，喘口氣，延續選擇器的主題，來看看 JavaScript 如何透過選擇器取得網頁標籤進行操作

我們已經體驗了最簡單的應用程式開發設計，現在要進一步的來看看JavaScript 針對網頁元素的操作。在前述的加法運算器中，無論是要取得使用者輸入的數值，或是將運算完成的結果，顯示在畫面上，都必須透過 JavaScript 取得相關標籤才能運作，最普遍的作法，是透過document 引用 getElementById() ，並且將所要取得的標籤其id 屬性指定給小括弧，並且以單引號標示，如下式：


document.getElementById('a')

由於一個網頁中，任何標籤的id 屬性均不能重覆，因此指定了id 屬性，即可取得此標籤，並且對其進行操作。

想要取得特定標籤並且對其進行操作，除了 getElementById() 之外，你也可以考慮透過CSS 選擇器達到相同的目的，而需要引用的則是 querySelector() ，完整的語法如下：


document.querySelector('#a')

同樣的，你必須指定id 屬性名稱，不過必須以選擇器的格式指定，因此以# 為字首，這一行程式的效果與上述引用 getElementById() 的效果相同。現在我們可以將加法運算的程式碼修改如下：


<script>
    function add() {
        var a = parseInt(document.querySelector('#a').value);
        var b = parseInt(document.querySelector('#b').value);
        document.querySelector('#result').value = a + b;    
    }
</script>

現在我們將 getElementById() 置換成 querySelector() ，程式的加法運算功能完全沒有改變，而相較於 getElementById() ，由於選擇器強大的彈性，你可以透過定義的選擇器擷取任何網頁上的標籤，這對於複雜的網頁內容操作特別的有用。

好了，這一篇輕鬆點，先入門選擇器與 JavaScript 的結合應用，後續將繼續在這個議題上打轉，同時讀者會看到更複雜的 JavaScript 語法與選擇器應用。

回首頁