Javascript獲取所有按鈕

在Web開發中，常常需要對按鈕進行操作和控制。Javascript可以方便地獲取所有按鈕，并對它們進行各種操作和控制。下面我們來具體了解一下。

獲取所有按鈕

var buttonList = document.getElementsByTagName("button");

上述代碼中，使用getElementsByTagName方法獲取了頁面中所有的button元素，返回結果是一個HTMLCollection對象，其中包含了所有button元素。這個對象是一個類似數組的對象，可以用下標或for循環進行遍歷。

遍歷所有按鈕

for(var i=0; i<buttonList.length; i++){
console.log(buttonList[i].id);
}

上述代碼中，使用for循環進行遍歷，同時輸出每個按鈕的id屬性到console中。

通過類名獲取按鈕

var btnClassList = document.getElementsByClassName("button");

上述代碼中，使用getElementsByClassName方法獲取了所有class為button的元素，返回結果是一個HTMLCollection對象，其中包含了所有class為button的元素。

通過name獲取按鈕

var btnNameList = document.getElementsByName("btn");

上述代碼中，使用getElementsByName方法獲取了所有name為btn的元素，返回結果是一個NodeList對象，其中包含了所有name為btn的元素。

實用例子：禁用所有按鈕

function disableAllButton(){
var buttonList = document.getElementsByTagName("button");
for(var i=0; i<buttonList.length; i++){
buttonList[i].disabled = true;
}
}

上述代碼中，定義了一個disableAllButton函數，使用getElementsByTagName方法獲取了頁面中所有的button元素，并設置它們的disabled屬性為true，從而禁用了所有按鈕。

實用例子：為所有按鈕添加事件監聽器

function addListenerToAllButton(){
var buttonList = document.getElementsByTagName("button");
for(var i=0; i<buttonList.length; i++){
buttonList[i].addEventListener("click", function(){
console.log(this.id + " has been clicked.");
});
}
}

上述代碼中，定義了一個addListenerToAllButton函數，使用getElementsByTagName方法獲取了頁面中所有的button元素，并為它們添加了點擊事件監聽器，當用戶點擊按鈕時，會輸出該按鈕的id到console中。

結語

Javascript提供了豐富的方法和工具，可以方便地獲取和控制頁面中的元素。本文介紹了如何獲取所有按鈕，以及兩個實用的例子。希望能夠對大家的學習和工作有所幫助。