JavaScript的getElementById（）和getElementsByName（）函数有什么区别？

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

代码似乎到了if块的第二行“if（madeSelection（programs ....”），并且它通过innerHTML显示错误消息一秒钟，

继续提交表格，如果JS确实返回true的话。 正如你所看到的，在返回true之前有一个弹出警报，弹出的DID不会显示出来。

坏数据已提交给我的测试数据库，因为表单尚未验证。 （还没有写出这个表单的服务器端验证，但我会）。

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

---

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

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

---

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

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

---

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

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

链接地址: http://www.djcxy.com/p/15463.html

上一篇: What is the difference between JavaScript's getElementById() and getElementsByName() functions?

下一篇: name vs. id