JavaScript的getElementById()和getElementsByName()函数之间有什么区别? [英] What is the difference between JavaScript's getElementById() and getElementsByName() functions?

问题描述

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

Other than the fact that my brief research tells me the latter will return a collection rather than a a single element with the ID passed.

考虑以下代码:

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()，发生了以下情况:

The above code works perfectly after placing it in the onsubmit handler of the form. However, earlier, for the elements (programs, startmonth, startday, startyear) I was using getElementsByName(), the following happened:

1. 代码似乎到达了if块的第二行"if(madeSelection(programs ....)，并通过innerHTML短暂显示了错误消息msg
2. 如果JS确实返回true，则继续提交AS表单.如您所知，在返回true之前有一个弹出警报，而弹出DID根本不显示.
3. 错误的数据已提交到我的测试数据库，因为该表单尚未通过验证. (还可以用这种形式编写服务器端验证，但是我会的).

请假定元素程序，开始月，开始日和开始年是带有相同的id和name属性.

please assume the elements programs, startmonth, startday, and startyear are drop-down lists with the same id and name attributes.

此外，madeSelection函数的给出方式为:

Also, the madeSelection function is given as:

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表现出这种行为.

My code does work right now after I changed those elements to be using getElementById(), I was just wondering why getElementsByName presented such behavior.

推荐答案

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

The GetElementsByName method returns an array, and when you tried to call element.focus() you got an error because there is no focus method on an array. When you get an error in the event handler it won't prevent the form from posting.

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

If you use GetElementById you should use element to access the element, and if you use GetElementsByName you should use element[0].

这篇关于JavaScript的getElementById()和getElementsByName()函数之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！