利用 JavaScript 操作網頁元素相當常見，最普遍的作法是透過 document 引用getElementById() ，並且將所要取得的標籤其 id 屬性指定給小括弧，以單引號標示如下：
由於一個網頁中，任何標籤的 id 屬性均不能重覆，因此指定了 id 屬性即可取得此標籤，並且對其進行操作。而除了 getElementById() 之外，HTML5 允許你透過CSS 選擇器達到相同的目的，而需要引用的則是 querySelector() ，完整的語法如下：
同樣的，你必須指定 id 屬性名稱，不過必須以選擇器的格式指定，因此以 # 為字首，這一行程式的效果與上述引用 getElementById() 相同。相較於 getElementById() ，選擇器強大的彈性允許你透過定義的選擇器擷取任何網頁上的標籤，這對於複雜的網頁內容操作特別的有用。
選擇器的種類相當廣泛，應用亦非常彈性，上述的 id 名稱選擇器是最簡單的選擇器，語法如下：
其中的 JavaScript 會取出符合 id 名稱的唯一標籤，另外你也可以直接指定標籤名稱，例如：
如果指定的是標籤名稱選擇器，由於取出的標籤可能不止一個，只有第一個被找到的元素會被取出，在這種情形下必須調用另外一個方法 querySelectorAll() ，取出所有符合此選擇器定義的元素。
對於 CSS 而言 ，它會將樣式直接套用至所有符合規則的標籤，而 JavaScript 則必須透過程式語法逐一列舉操作，現在我們來看看 JavaScript 如何操作經由選擇器取出的所有標籤。
參考另外一篇系列文章「加法運算器（上）｜（中）｜（下） 」的實作範例，於網頁中另外配置一個 <button> 標籤，提供清空文字方塊內容的功能，所需的 HTML 如下：
這裏配置了一個 button ，並且將其 id 屬性設定為 clear ，由於我們要讓使用者按下按鈕之後，執行文字方塊的清空動作，因此指定 onclick 之後要執行的程式 clearText() ，效果如下：
於 <script> 標籤內加以下的 clearText() 程式碼：
其中首先調用 querySelectorAll() 取得所有的 input 標籤，一旦此行程式碼執行完畢，這些標籤便會被取出儲存至 inputs 這個變數中，而這是一個陣列，你必須以陣列的語法逐一取出其中的 input 標籤，所需的語法是 inputs[n] ，中括弧裏面的 n 是索引值，從 0 開始，由於畫面上有兩個文字方塊，要取得第一個文字方塊是 inputs[0] ，第二個文字方塊則是inputs[1] ，因此接下來逐一將取出的文字方塊 value 屬性設定為空字串，如果要處理的元素很多，透過迴圈來處理會是比較好的選擇。
標籤名稱選擇器只能選取同一類型的標籤進行設定，如果要同時操作不同類型的標籤，可以選擇另外一種類別選擇器，搭配標籤的 class 屬性設定，即可完成跨標籤的樣式設計與程式化控制。回到一開始的「加法運算器」程式，於其中的 <input> 與 <output> 標籤，進行以下的設定：
無論 <input> 或是 <output> 標籤，均設定了 class 屬性值為 valuestyle ，接下來，調整 CSS 設定，原來的 input 樣式如下：
現在將項目名稱 input 改成 .valuestyle ，大括弧的內容則維持不變：
必須特別注意的是，以 . 連接指定的名稱 valuestyle ，如此一來，網頁中所有 class 屬性設定為 valuestyle 的標籤都將套用此樣式，因此重新於瀏覽器檢視此網頁的內容，會得到以下的結果：
如你所見，不僅文字方塊本身，其輸出結果同樣套用了指定的樣式。現在進一步修改「清空文字方塊」按下之後所要執行的 JavaScript 程式碼，由於之前調用 querySelectorAll() 指定的是標籤的名稱，因此清空的僅會是文字方塊的內容，如下圖：
這個結果其實並不合理，我們希望的是一併清空輸出結果，這個時候類別選擇器就可以派上用場了，clearText() 原來的內容如下：
由於 class 屬性設定為 valuestyle 的標籤有三個，因此最後還要將 inputs[2] 的 value 也設定為空值，如此一來即可清空三個值如下：
現在，讀者瞭解如何藉由幾種基本的樣式選擇器設定取得所要設定或是程式化控制的標籤，儘管選擇器的種類相當龐大，若是你設計的網頁不是非常複雜，最常用的就是到目前為止所提及的三種選擇器，請務必徹底瞭解其用法。
document.getElementById('a')
由於一個網頁中，任何標籤的 id 屬性均不能重覆，因此指定了 id 屬性即可取得此標籤，並且對其進行操作。而除了 getElementById() 之外，HTML5 允許你透過CSS 選擇器達到相同的目的，而需要引用的則是 querySelector() ，完整的語法如下：
document.querySelector('#a')
同樣的，你必須指定 id 屬性名稱，不過必須以選擇器的格式指定，因此以 # 為字首，這一行程式的效果與上述引用 getElementById() 相同。相較於 getElementById() ，選擇器強大的彈性允許你透過定義的選擇器擷取任何網頁上的標籤，這對於複雜的網頁內容操作特別的有用。
選擇器的種類相當廣泛，應用亦非常彈性，上述的 id 名稱選擇器是最簡單的選擇器，語法如下：
/*CSS*/
#id-name{
#id-name{
name1:value1 ;
…
}
//JavaScript
document.querySelector('#id-name')
document.querySelector('#id-name')
其中的 JavaScript 會取出符合 id 名稱的唯一標籤，另外你也可以直接指定標籤名稱，例如：
/*CSS*/
tag-name{
name1:value1 ;
…
}
//JavaScript
document.querySelectorAll('tag-name')
document.querySelectorAll('tag-name')
如果指定的是標籤名稱選擇器，由於取出的標籤可能不止一個，只有第一個被找到的元素會被取出，在這種情形下必須調用另外一個方法 querySelectorAll() ，取出所有符合此選擇器定義的元素。
對於 CSS 而言 ，它會將樣式直接套用至所有符合規則的標籤，而 JavaScript 則必須透過程式語法逐一列舉操作，現在我們來看看 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() ，效果如下：
於 <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 屬性設定為空字串，如果要處理的元素很多，透過迴圈來處理會是比較好的選擇。
標籤名稱選擇器只能選取同一類型的標籤進行設定，如果要同時操作不同類型的標籤，可以選擇另外一種類別選擇器，搭配標籤的 class 屬性設定，即可完成跨標籤的樣式設計與程式化控制。回到一開始的「加法運算器」程式，於其中的 <input> 與 <output> 標籤，進行以下的設定：
<body>
<input id="a" type="text" class="valuestyle" />+
<input id="b" type="text" class="valuestyle" />
<button onclick="add()" >＝</button>
<output id="result" class="valuestyle" ></output>
<hr />
<button id="clear" onclick="clearText()">清空文字方塊</button>
</body>
無論 <input> 或是 <output> 標籤，均設定了 class 屬性值為 valuestyle ，接下來，調整 CSS 設定，原來的 input 樣式如下：
input
{
width: 60px;
text-align: right;
background: black;
color: silver;
}
現在將項目名稱 input 改成 .valuestyle ，大括弧的內容則維持不變：
.valuestyle
{
width: 60px;
text-align: right;
background: black;
color: silver;
}
必須特別注意的是，以 . 連接指定的名稱 valuestyle ，如此一來，網頁中所有 class 屬性設定為 valuestyle 的標籤都將套用此樣式，因此重新於瀏覽器檢視此網頁的內容，會得到以下的結果：
如你所見，不僅文字方塊本身，其輸出結果同樣套用了指定的樣式。現在進一步修改「清空文字方塊」按下之後所要執行的 JavaScript 程式碼，由於之前調用 querySelectorAll() 指定的是標籤的名稱，因此清空的僅會是文字方塊的內容，如下圖：
這個結果其實並不合理，我們希望的是一併清空輸出結果，這個時候類別選擇器就可以派上用場了，clearText() 原來的內容如下：
function clearText() {
var inputs = document.querySelectorAll('input');
inputs[0].value = '';
inputs[1].value = '';
}
由於 class 屬性設定為 valuestyle 的標籤有三個，因此最後還要將 inputs[2] 的 value 也設定為空值，如此一來即可清空三個值如下：
現在，讀者瞭解如何藉由幾種基本的樣式選擇器設定取得所要設定或是程式化控制的標籤，儘管選擇器的種類相當龐大，若是你設計的網頁不是非常複雜，最常用的就是到目前為止所提及的三種選擇器，請務必徹底瞭解其用法。
2 則留言:
"這個時候類別選擇器就可以派上用場了，clearText() 原來的內容如下："
到
"由於 class 屬性設定為 valuestyle 的標籤有三個，因此最後還要將 inputs[2] 的 value 也設定為空值"
之間的範例, 應該貼錯了!
這一篇延伸了「加法運算器」三篇入門教學文範例最後的結果，因此先回頭參考「加法運算器」一下，再過來就比較清楚了 … :)
「加法運算器」
http://www.kangting.tw/2012/07/htmljavascriptcss.html
張貼留言