revision:
The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name attribute in the document.
The getElementsByName() method returns a collection of elements with a specified name. It returns a live NodeList.
A NodeList is an array-like collection (list) of nodes. The nodes in the list can be accessed by index. The index starts at 0. The "length Poperty" returns the number of nodes in the list.
document.getElementsByName(name)
Parameters:
name : the value of the name attribute of the element(s) we are looking for.
<input type="hidden" name="up" />
<input type="hidden" name="down" />
<script>
const up_names = document.getElementsByName("up");
console.log(up_names[0].tagName); // displays "INPUT"
</script>
First Name:
First Name:
The tag name of the first element with the name "fname" is:
<div>
<p>First Name: <input name="fname" type="text" value="Michael"></p>
<p>First Name: <input name="fname" type="text" value="Doug"></p>
<p>The tag name of the first element with the name "fname" is:</p>
<p id="name-1"></p>
</div>
<script>
let elements = document.getElementsByName("fname");
document.getElementById("name-1").innerHTML = elements[0].tagName;
</script>
Number of elements with name="animal" is:
<div>
Cats:
<input name="animal" type="checkbox" value="Cats">
Dogs:
<input name="animal" type="checkbox" value="Dogs">
<p>Number of elements with name="animal" is:</p>
<p id="name-2"></p>
</div>
<script>
let num = document.getElementsByName("animal").length;
document.getElementById("name-2").innerHTML = num;
</script>
<div>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="totalelements()" value="Total Genders">
</form>
</div>
<script>
function totalelements() {
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+ allgenders.length);
}
</script>