JavaScript 的 getElementById() 和 getElementsByName() 函数有什么区别？

Question

除了我的简短研究告诉我，后者将返回一个集合，而不是传递 ID 的单个元素。

考虑以下代码：

function validateAllFields()
{
var clientid = document.getElementById("clientid");
var programs = document.getElementById("programs");
var startmonth = document.getElementById("startmonth");
var startday = document.getElementById("startday");
var startyear = document.getElementById("startyear");
var completed = document.getElementsByName("completed");
var goals = document.getElementsByName("goals");
var errors = document.getElementById("errorMsg");
errors.innerHTML = "";

if(isNumeric(clientid, errors, "Please enter a valid client ID")){
    if(madeSelection(programs, errors, "Please select a program from the drop-down list")){
        if(madeSelection(startmonth, errors, "Please enter a month for the start date")){
            if(madeSelection(startday, errors, "Please enter a day for the start date")){
                if(madeSelection(startyear, errors, "Please enter a year for the start date")){
                    if(checked(completed, errors, "Please choose an option that indicate whether the client has completed the program")){
                        if(checked(goals, errors, "Please choose an option that indicate whether the client has met his/her goals.")){
                            window.alert("GOT IN TO  RETURN TRUE");
                            return true;
                        }
                    }
                }
            }
        }
    }
}
return false;
}
</script>

上面的代码放在表单的 onsubmit 处理程序中后可以完美运行。然而，早些时候，对于我使用 getElementsByName() 的元素（程序、startmonth、startday、startyear），发生了以下情况：

1. 代码似乎到达了 if 块“if(madeSelection(programs....”
2. 如果 JS 确实返回 true，则继续提交表单。如您所知，在返回 true 之前有一个弹出警报，并且弹出窗口根本没有出现。
3. 错误的数据被提交到我的测试数据库，因为表单没有经过验证。 （尚未使用此表单编写服务器端验证，但我会的）。

请假设元素 programs、startmonth、startday 和 startyear 是带有相同的 id 和 name 属性。

另外，madeSelection 函数如下：

function madeSelection(element, error, msg) {
if (element[0].value == "none" || element[0].valueOf == "none" || element[0].value == "") {
    error.innerHTML = msg;
    element.focus();
    return false;
} else {
    return true;
}
}

在我将这些元素更改为使用 getElementById() 后，我的代码现在可以正常工作，我只是想知道为什么 getElementsByName 会出现这种行为。

Answer 1

<input type="text" name="foo" id="bar">
                   ^^^^       ^^

getElementsByName 通过name 获取元素，getElementById 通过id 获取元素。页面上可能有许多元素具有相同的name（因此getElementsByName 总是返回元素列表），但（必须）只有一个元素具有给定的id（因此getElementById 只返回单个元素）。

Answer 2

GetElementsByName 方法返回一个数组，当您尝试调用 element.focus() 时出现错误，因为数组上没有 focus 方法。当您在事件处理程序中收到错误时，它不会阻止表单发布。

如果你使用GetElementById，你应该使用element来访问元素，如果你使用GetElementsByName，你应该使用element[0]。

Answer 3

name 属性不是唯一的，而 id 属性是。

<div name="nonUnique" />
<div id="unique" />

Answer 4

为了扩展已经提供的答案，name 属性是在浏览器 DOM 的早期提供的，以允许参考该名称提交表单中元素的内容属性，以便可以将参数传递给服务器端的 CGI 脚本。这可以追溯到更现代的引用 DOM 元素以通过 JavaScript 操作样式等内容的能力之前。

当扩展 DOM 以允许上述现代操作时，添加了 id 属性，以便可以随意操作单个元素。当您想要执行 DOM 操作时，您可以通过 id 属性选择要操作的元素，如果您只对操作单个 DOM 元素感兴趣，或者通过class 属性（适合自己设置），如果您想以相同的方式一起操作多个元素。在后一种情况下，您可以将 class 属性设置为多个值（名称字符串由空格分隔），例如，您可以指定元素属于多个类，并执行操作因此。您可以随意混合和匹配 id 和 class 属性，前提是您要小心避免名称冲突。

因此，例如，您的网页上可以有五个按钮，全部设置为：

class="设置1"

并更改所有这些按钮的样式，首先使用如下语句：

myButtons = document.getElementsByClassName("Set1");

获取与您的按钮对应的 Element 对象数组，然后运行以下循环：

for (i=0; i<myButtons.length; i++)
    myButtons[i].style.color="#FF0000";

将文本的颜色更改为红色。其中一个按钮还可以将 id 属性设置为“特殊”，然后您可以执行以下操作：

ref = document.getElementById("Special");
ref.style.backgroundColor = "#FFFF00";

将集合中那个按钮的背景颜色设置为黄色，表示它是用于集合中的特殊功能的。

简而言之，使用 name 属性来提交表单，使用 id 和 class 属性来引用您打算执行 DOM 的元素操作或附加事件处理程序等。

Answer 5

为了不提交表单，需要返回return false（你说你使用了onsubmit handler）

在代码的第二行中，因为 getElementsByName 确实返回了一个选择（它可以与 .getElementsByName("test")[0] 一起使用）抛出一个 js 错误。其余代码未执行，因此不返回任何内容，表单完全绕过其余验证。

Answer 6

getElementById 方法一次只能访问一个元素，即具有您指定 ID 的元素。 getElementsByName 方法不同。它收集具有您指定名称的元素数组。您可以使用从 0 开始的索引来访问各个元素。

getElementById

• 它只会为您获取一个元素。
• 该元素带有您在 getElementById() 括号内指定的 ID。

getElementsByName

• 它将获得一个名称都相同的元素集合。
• 每个元素都使用从 0 开始的数字进行索引，就像数组一样
• 在下面的 getElementsByName 语法中，您可以通过将其索引号放入方括号中来指定要访问的元素。

function test() {
  var str = document.getElementById("a").value;
  console.log(str);

  var str1 = document.getElementsByName("a")[0].value;
  console.log(str1);
  var str2 = document.getElementsByName("a")[1].value;
  console.log(str2);
}

<input type="text" id="a" value="aValue" />
<br>
<br>
<input type="text" name="a" value="bValue" />
<br>
<br>
<input type="text" name="a" value="cValue" />
<br>
<br>
<button onclick="test()">Click Here</button>