What is the difference between JavaScript's getElementById() and getElementsByName() functions?

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

Consider the following code:

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>

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:

The code seems to get to the second line of the if blocks "if(madeSelection(programs...." and it displayed the error msg via innerHTML for a brief second and

Proceeded to submit the form AS IF the JS had indeed returned true. As you can tell, there is a popup alert right before returning true and the popup DID NOT show up at all.

Bad data was submitted to my test database because the form had not been validated. (yet to write server-side validation with this form, but I will).

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

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

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

---

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.

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

---

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

getElementsByName gets elements by their name , getElementById gets the element by its id . There may be many elements on a page with the same name (hence getElementsByName always returns a list of elements), but there is (must) only be one element with a given id (therefore getElementById only returns a single element).

---

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

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

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

上一篇: 是或不是？

下一篇: JavaScript的getElementById（）和getElementsByName（）函数有什么区别？