Question

我是JavaScript新手。我想编写一个JavaScript来计算各种几何的面积。程序从用户那里获取尺寸。我想知道[0]在下一行中显示的内容：

document.getElementsByName('ID OF INPUT FIELD')[0].value;

任何人都可以给我这个东西的名字（即数组等等！）以便我可以学习它或者请给我一个理解这个的链接。

<script>
function func() {
var base = document.getElementsByName('width')[0].value; // ---> what [0] shows? 
var height = document.getElementsByName('height')[0].value;
var out = (1/2) * parseFloat(base) * parseFloat(height);

document.getElementsByName('output')[0].value= out;


}
</script>

<body>
<html>
<br><center> <button onClick="func()">Calculate Area</button></center><br>

<table>
    
<tr><td align="right">Width (b):</td>
<td align="left"><input type="textbox" name="width"></input><br></td><br><br>

<tr><td align="right">Height (h):</td>
<td align="left"><input type="textbox" name="height"></input><br></td><br><br>



<tr>
<td align="right">The area is: </td>
<td align="left"><input type="textbox" name="output"></input><br>
</td>
</table>
</body>
</html>

Answer 1

document.getElementsByName('width')返回NodeList，即具有名为"name"和值"width"的属性的节点列表。对于您的示例HTML，它将为您提供长度为1的NodeList，第一个（也是唯一的）项目是宽度的文本输入框：

<input type="textbox" name="width">

因为NodeList是一个列表，您可以按索引访问其项目。索引从零开始，因此[0]访问列表中的第一项，我们已知道它是宽度文本输入元素。

最后一个难题是.value的使用，它将返回文本输入元素的内容。这将是用户输入该输入框的任何值。因此结果：

var base = document.getElementsByName('width')[0].value;

是创建一个名为base的变量，该变量引用在name属性设置为"width"的第一个文本输入框中输入的值。

您可以看到用于获取高度的相同技术，并使用name="output"将结果写入文本框。

Answer 2

document.getElementsByName('width')行返回名称为"width"的所有HTML dom元素（及其列表）。

因此，在您的示例中，它将元素<input type="textbox" name="width"></input>元素作为列表返回。并且您正在使用[0]来获取第一个元素。

Answer 3

getElementsByName('width')返回具有name属性且价值为'width'的元素的NodeList

Answer 4

document.getElementsByName api将返回元素集合。因此[0]将返回第一个找到的与“name”属性值匹配的元素。示例：

var base = document.getElementsByName（'width'）

“base”是包含具有属性“name”=“width”的所有元素的数组。因此，如果要访问第一个元素，只需写下以下行：base [0]。

了解几行JavaScript代码

4 个答案: