使用getElementsByName()获取相同名字的元素

在JavaScript中,有时候我们需要获取HTML文档中具有相同名称的元素,这时就可以使用`getElementsByName()`方法来实现。这个方法会返回一个包含指定名称的所有元素的NodeLi

在JavaScript中,有时候我们需要获取HTML文档中具有相同名称的元素,这时就可以使用`getElementsByName()`方法来实现。这个方法会返回一个包含指定名称的所有元素的NodeList对象。接下来我们通过一个简单的示例来演示如何使用这个方法。

新建HTML文件

首先,在编辑器中新建一个HTML文件,并在其中编写以下代码:

```html

Get Elements By Name

```

创建JavaScript文件

接着,在同一目录下创建一个名为`script.js`的JavaScript文件,编写以下代码:

```javascript

function getElements() {

var x ("myInput");

alert("Number of myInput elements: " x.length);

}

document.querySelector('button[name"myButton"]').addEventListener('click', getElements);

```

预览效果

保存以上两个文件,并在浏览器中打开HTML文件。你将看到三个输入框和一个按钮。当你点击按钮时,会弹出一个提示框,展示名字为`myInput`的元素个数。

通过使用`getElementsByName()`方法,我们可以轻松地获取HTML文档中具有相同名称的元素,并对它们进行操作。这在某些特定的场景下非常有用,例如表单中重复的输入框或多个具有相同名称的元素。希望本文能够帮助你更好地理解和应用这个方法。

标签: