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提供了丰富的方法和工具，可以方便地获取和控制页面中的元素。本文介绍了如何获取所有按钮，以及两个实用的例子。希望能够对大家的学习和工作有所帮助。