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

Posted 2023-03-03

【中文标题】JavaScript 的 getElementById() 和 getElementsByName() 函数有啥区别？

【英文标题】：What is the difference between JavaScript's getElementById() and getElementsByName() functions?JavaScript 的 getElementById() 和 getElementsByName() 函数有什么区别？

【发布时间】：2011-09-15 03:30:15

【问题描述】：

除了我的简短研究告诉我，后者将返回一个集合，而不是传递 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），发生了以下情况：

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

请假设元素 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 会出现这种行为。

【问题讨论】：

你的意思是getElementsByTagName()吗？

@kinakuta - 不，他没有：w3schools.com/jsref/met_doc_getelementsbyname.asp

您的代码与所有缩进都是一团糟。考虑在每次检测到错误后返回 false，如果没有错误则最后返回 true。

谈论杂乱的代码...当人们说 php 很杂乱时，这就是我大笑的地方...赞赞 Zecc

【参考方案1】：

为了扩展已经提供的答案，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 的元素操作或附加事件处理程序等。

【参考方案2】：

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>

【讨论】：

这应该是标记答案

【参考方案3】：

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

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

【参考方案4】：

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

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

【讨论】：

也许值得一提的 IE 怪癖 - 如果您使用 getElementByID("a_name") 如果 ID 不存在，它将返回元素按名称。在其他浏览器中它会失败，因此可能是一种奇怪的调试体验。

【参考方案5】：

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

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

【参考方案6】：

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

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

【讨论】：

尤其是“radio”类型的输入，如果它们属于同一个组，则它们共享相同的名称。

请注意，according to MDN、name 不是 <div> 上的有效属性。