《HTML5 精要剖析》- 1.6.2 操作網頁元素/操作一個以上的網頁標籤元素

2012-03-23

3639
0
HTML5

這一篇要看的是 JavaScript 結合選擇器，一次取得多個網頁上的標籤元素，進行程式化控制操作

在很多情形下你必須同時操作網頁上一個以上的標籤元素，同樣的，這可以利用選擇器來辦到，而就如同前述課程討論的，無論是CSS 樣式設計或是JavaScript 的程式化控制均能套用。

選擇器的種類相當廣泛，應用亦非常彈性，到目前為止談到有兩種，一種是id 識別名稱：

CSS

#id-name{
	name1:value1 ; 	… 
}

JavaScript

document.querySelector('#id-name')

透過id 名稱選擇器，會取出符合id 名稱的唯一標籤，另外一種是直接指定標籤的名稱，例如：

CSS

tag-name{

	name1:value1 ; 
	… 
}

JavaScript

document.querySelectorAll('tag-name')

如果指定的是標籤名稱選擇器，則所有此類型的標籤均會被取出，由於取出的標籤可能不止一個，因此必須調用另外一個方法 querySelectorAll() 指定所要取出的所有標籤名稱。

針對CSS ，如果取出的標籤超過一個以上，它會將樣式直接套用至所有取出的標籤，而JavaScript 則必須透過程式語法逐一列舉操作， CSS 的作法在「1.5.3運用選擇器組織CSS」這一節裏面已經看到了，現在我們來看JavaScript 如何操作經由選擇器取出的所有標籤。

同樣的，再次回到「加法運算器」這個實作範例，現在於網頁中另外配置一個<button> 標籤，提供清空文字方塊內容的功能，所需的HTML 如下：

<body>
    <input id="a" type="text"  />+
    <input id="b" type="text"  />
    <button onclick="add()" >＝</button>
    <output id="result"></output>
    <hr />
    <button id="clear" onclick="clearText()">清空文字方塊</button>
</body>

這裏配置了一個button ，並且將其id 屬性設定為clear ，由於我們要讓使用者按下按鈕之後，執行文字方塊的清空動作，因此指定onclick 之後要執行的程式clearText() 。這裏我們還看到一個<hr/> 標籤，它會在網頁上畫出一條水平線呈現視覺上的分隔效果，現在我們可以得到以下的畫面：

接下來於 <script> 標籤內加以下的clearText() 程式碼：

function clearText() {
    var inputs = document.querySelectorAll('input');
    inputs[0].value = '';
    inputs[1].value = '';
}

其中首先調用 querySelectorAll() 取得所有的input 標籤，一旦此行程式碼執行完畢，這些標籤便會被取出儲存至inputs 這個變數中，而這是一個陣列，你必須以陣列的語法逐一取出其中的input 標籤，所需的語法是inputs[n] ，中括弧裏面的n 是索引值，從0 開始，由於畫面上有兩個文字方塊，要取得第一個文字方塊則是inputs[0] ，第二個文字方塊則是inputs[1] ，因此接下來逐一將取出的文字方塊其value 屬性設定為空字串。

左圖是輸入數字進行加法運算的畫面，右圖是按下「清空文字方塊」的畫面。

好了，我們達到目的了，但真正運作的程式並不會這樣寫，這種方式很笨，一旦取出的標籤很多，光用複製貼上就很累人了，我們通常是透過迴圈來處理，另外一方面，讀者注意到了嗎，執行結果並沒有清空，要達到這個效果需要另外一組類別選擇器，下回見。

回首頁