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处理程序后完美地工作。但是，早些时候，对于元素（程序，startmonth，startday，startyear），我使用了getElementsByName（），发生了以下情况：

1. 代码似乎到了if块的第二行“if（madeSelection（programs ....）并且它通过innerHTML短暂显示错误消息并且
2. 如果JS确实返回true，则继续提交表单。正如您所知，在返回true之前会有一个弹出警报，并且弹出窗口DID根本不显示。
3. 错误的数据已提交到我的测试数据库，因为表单尚未经过验证。 （尚未使用此表单编写服务器端验证，但我会）。

请假设元素程序， 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

为了不提交表单，返回false需要返回（你说你使用了onsubmit处理程序）

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

Answer 5

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

<强>的getElementById

• 它只会为您提供一个元素。
• 该元素带有您在getElementById（）括号内指定的ID。

<强> getElementsByName

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

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 6

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

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

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

类= “SET1”

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

myButtons = document.getElementsByClassName("Set1");

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

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

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

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

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

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