Get all element names in javascript

HTML DOM Document getElementsByName()

The getElementsByName() method returns a collection of elements with a specified name.

The getElementsByName() method returns a live NodeList.

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.

See Also:

Syntax

Parameters

Return Value

Type	Description
Object	A NodeList Object. A collection of elements with the specified name. The elements are sorted as they appear in the document.

More Examples

Check all elements with type=»checkbox» that have the name «animal»:

const collection = document.getElementsByName(«animal»);
for (let i = 0; i < collection.length; i++) if (collection[i].type == "checkbox") collection[i].checked = true;
>
>

Browser Support

document.getElementsByName() is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Document: getElementsByName() method

The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name attribute in the document.

Syntax

Parameters

The value of the name attribute of the element(s) we are looking for.

Return value

A live NodeList collection, meaning it automatically updates as new elements with the same name are added to, or removed from, the document.

Examples

doctype html> html lang="en"> head> title>Example: using document.getElementsByNametitle> head> body> input type="hidden" name="up" /> input type="hidden" name="down" /> body> html> 

const up_names = document.getElementsByName("up"); console.log(up_names[0].tagName); // displays "INPUT" 

Notes

The name attribute can only be applied in (X)HTML documents.

The returned NodeList Collection contains all elements with the given name , such as , , and even elements which do not support the name attribute at all.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• document.getElementById() to return a reference to an element by its unique id
• document.getElementsByTagName() to return references to elements with the same tag name
• document.querySelector() to return references to elements via CSS selectors like ‘div.myclass’

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to get DOM elements using JavaScript

The Document Object Model (DOM) is a programming interface for HTML and XML documents created by the browser once the document is loaded. A web page is a document represented by the DOM as nodes and objects. It allows programs to manipulate the document’s content, structure, and styles.

In this tutorial, we shall learn how to use JavaScript to access different nodes (HTML elements) in the DOM. Let us start with the first method: getting an element by ID.

The document ‘s getElementById() method takes the element ID as input and returns an Element object representing the DOM element. Here is an example:

const unicorn = document.getElementById('unicorn') 

The ID is case-sensitive and unique across the entire HTML document. So this method always returns a single element. If no matching element is found, it returns null .

Note: Do not put the # sign before the ID string while calling getElementById() method. You will get null instead of the element, and then you might wonder for hours what has gone wrong.

The getElementsByTagName() method is used to access multiple elements. It takes the tag name as input and returns all of the DOM elements that match the tag name as HTMLCollection :

JavaScript code to access all

elements:

const animals = document.getElementsByTagName('p') 

This method searches only one tag name at a time. But if you pass in * as the tag name, you will get all elements in the DOM:

const allNodes = document.getElementsByTagName('*') 

The getElementsByName() method is used to get a collection of elements by their name attribute and returns a NodeList object:

input type="text" name="email"> input type="tel" name="phone"> input type="date" name="dob"> 

const emails = document.getElementsByName('email') 

Note: Unlike the id attribute, which must be unique, multiple HTML elements can have the same name attribute. That’s why getElementsByName() returns a collection of nodes.

Want to use the class attribute to get a list of matching elements? You can use the getElementsByClassName() method, pass it a class name (without . ), and it will return an HTMLCollection of all DOM elements that have the given class name:

div class="bird owl">🦉div> div class="bird">🐦div> div class="bird eagle">🦅div> div class="animal cat">🐱div> 

const birds = document.getElementsByClassName('bird') 

This method also accepts multiple class names separated by spaces. Let us get all elements that have both the bird and eagle classes:

const eagle = document.getElementsByClassName('bird eagle') 

The querySelector() method is one of the two modern JavaScript methods that allow you to get elements from DOM based on CSS selectors. Just pass in the CSS selector, and you will get the first element that matches the specified selector. If no matches exist, it returns null . Here is an example:

const email = document.querySelector('#signup input[name="email"]') 

Want to select a list of elements that match the specified selectors? Use the querySelectorAll() method instead. This method takes multiple CSS selectors as input and returns a NodeList , a list of DOM elements that match the given selectors. Let us select all elements with a class of either bird or animal from the above HTML markup:

const elems = document.querySelectorAll('.bird, .animal') console.log(elems.length) // 4 

You can also chain multiple functions together to search elements within another element. You first need to select a single element using either getElementById() or querySelector() and then chain another function to search within:

form id="signup"> input type="text" name="email"> input type="tel" name="phone"> input type="date" name="date-of-birth"> form> 

const inputs = document.getElementById('signup').getElementsByTagName('input') // OR const inputs = document.querySelector('#signup').querySelectorAll('input') 

Most of the methods we discussed above (except getElementById() and querySelector() ) returns multiple elements as either an HTMLCollection or a NodeList . The HTMLCollection is not an array but a generic collection of elements. So it is impossible to iterate over it with the forEach() or map() method. However, we can convert it to a real array and then iterate using the Array.from() method:

const inputs = document.getElementById('signup').getElementsByTagName('input') // iterate over HTMLCollection Array.from(inputs).forEach(element =>  console.log(element) >) 

Although NodeList is also not an array, it does provide the forEach() method to iterate over the elements:

const inputs = document.querySelector('#signup').querySelectorAll('input') //iterate over NodeList inputs.forEach(element =>  console.log(element) >) 

That’s all for getting DOM elements using JavaScript. We have learned about many different methods to access the DOM elements: using the id attribute, HTML tag name, name attribute, class attribute, and CSS selectors. We also discussed ways to iterate over the generic collection of elements returned by these methods. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник

JavaScript HTML DOM Elements

This page teaches you how to find and access HTML elements in an HTML page.

Finding HTML Elements

Often, with JavaScript, you want to manipulate HTML elements.

To do so, you have to find the elements first. There are several ways to do this:

• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element id.

This example finds the element with id=»intro» :

Example

If the element is found, the method will return the element as an object (in element).

If the element is not found, element will contain null .

Finding HTML Elements by Tag Name

This example finds all

elements:

Example

This example finds the element with id=»main» , and then finds all

elements inside «main» :

Example

Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name, use getElementsByClassName() .

This example returns a list of all elements with class=»intro» .

Example

Finding HTML Elements by CSS Selectors

If you want to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.

This example returns a list of all

elements with class=»intro» .

Example

Finding HTML Elements by HTML Object Collections

This example finds the form element with id=»frm1″ , in the forms collection, and displays all element values:

Example

const x = document.forms[«frm1»];
let text = «»;
for (let i = 0; i < x.length; i++) text += x.elements[i].value + "
«;
>
document.getElementById(«demo»).innerHTML = text;

The following HTML objects (and object collections) are also accessible:

Источник