Javascript document all type

Last updated: Jan 12, 2023
Reading time · 2 min

banner

# Get all Elements by Type using JavaScript

Use the querySelectorAll() method to get all elements by type.

The method returns a NodeList containing the elements that match the provided selector.

Here is the HTML for the examples.

Copied!
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> input type="text" id="first_name" /> input type="number" id="age" /> script src="index.js"> script> body> html>

And here is the related JavaScript code.

Copied!
// ✅ Get all input elements with type = "text" const elements1 = document.querySelectorAll('input[type="text"]'); console.log(elements1); // 👉️ [input#first_name] // ------------------------------------------------------- // ✅ Get all input elements const elements2 = document.querySelectorAll('input'); console.log(elements2); // 👉️ [input#first_name, input#age] // ------------------------------------------------------- // ✅ Get all input elements const elements3 = document.getElementsByTagName('input'); console.log(elements3); // 👉️ [input#first_name, input#age]

# Get all elements by type attribute

In the first example, we used the document.querySelectorAll method to get all input elements that have a type attribute with a value of text .

Copied!
const elements1 = document.querySelectorAll('input[type="text"]'); console.log(elements1); // 👉️ [input#first_name] console.log(elements[0]); // 👉️ input#first_name

If you want to get a specific element, you can access the NodeList at an index.

JavaScript indexes are zero-based, so the first element in the NodeList has an index of 0 .

# Select all elements that have a type attribute set to text

You can adjust the selector as needed, e.g. the following example selects any type of element with a type attribute set to a value of text (not just input elements).

Copied!
const elements = document.querySelectorAll('[type="text"]'); console.log(elements); // 👉️ NodeList [input#first_name]

# Get all input elements on the page

In the second example, we used the querySelectorAll method to get a NodeList of all of the input tags.

Copied!
const elements = document.querySelectorAll('input'); console.log(elements); // 👉️ NodeList(2) [input#first_name, input#age]

# Iterating over a collection of elements

If you need to iterate over the collection, use the forEach() method.

Copied!
const elements = document.querySelectorAll('input'); console.log(elements); // 👉️ [input#first_name, input#age] elements.forEach(element =>  console.log(element); >);

# Get all elements by Type using getElementsByTagName

The third example uses the document.getElementsByTagName method to select all input tags.

Copied!
const elements = document.getElementsByTagName('input'); console.log(elements); // 👉️ [input#first_name, input#age]

This serves as an alternative to the querySelectorAll method and you might see the getElementsByTagName method used in older code bases.

# Iterating over an HTMLCollection

The method returns an HTMLCollection , which you have to convert to an array if you need to use methods like forEach() .

Copied!
const elements = Array.from(document.getElementsByTagName('input')); console.log(elements); // 👉️ [input#first_name, input#age] elements.forEach(element =>  console.log(element); >);

By converting the HTMLCollection to an array, we are able to use any of the array-supported methods.

You can also use a for. of loop to iterate over the collection.

Copied!
const elements = Array.from(document.getElementsByTagName('input')); console.log(elements); // 👉️ [input#first_name, input#age] for (const element of elements)  console.log(element); >

If you need to get a specific element, access the array at an index.

Copied!
const elements = Array.from(document.getElementsByTagName('input')); console.log(elements); // 👉️ [input#first_name, input#age] console.log(elements[0]); // inptu#first-name console.log(elements[elements.length - 1]); // input#age

The first element in the array has an index of 0 and the last element has an index of array.length — 1 .

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

Node properties: type, tag and contents

In this chapter we’ll see more into what they are and learn their most used properties.

DOM node classes

Each DOM node belongs to the corresponding built-in class.

The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it.

Here’s the picture, explanations to follow:

EventTarget – is the root “abstract” class for everything. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called “events”, we’ll study them later.
Node – is also an “abstract” class, serving as a base for DOM nodes. It provides the core tree functionality: parentNode , nextSibling , childNodes and so on (they are getters). Objects of Node class are never created. But there are other classes that inherit from it (and so inherit the Node functionality).
Document, for historical reasons often inherited by HTMLDocument (though the latest spec doesn’t dictate it) – is a document as a whole. The document global object belongs exactly to this class. It serves as an entry point to the DOM.
CharacterData – an “abstract” class, inherited by:
- Text – the class corresponding to a text inside elements, e.g. Hello in
  Hello
  
  .
- Comment – the class for comments. They are not shown, but each comment becomes a member of DOM.
- HTMLInputElement – the class for elements,
- HTMLBodyElement – the class for elements,
- HTMLAnchorElement – the class for elements,
- …and so on.
There are many other tags with their own classes that may have specific properties and methods, while some elements, such as , , do not have any specific properties, so they are instances of HTMLElement class.

So, the full set of properties and methods of a given node comes as the result of the chain of inheritance.

For example, let’s consider the DOM object for an element. It belongs to HTMLInputElement class.

It gets properties and methods as a superposition of (listed in inheritance order):
- HTMLInputElement – this class provides input-specific properties,
- HTMLElement – it provides common HTML element methods (and getters/setters),
- Element – provides generic element methods,
- Node – provides common DOM node properties,
- EventTarget – gives the support for events (to be covered),
- …and finally it inherits from Object , so “plain object” methods like hasOwnProperty are also available.
To see the DOM node class name, we can recall that an object usually has the constructor property. It references the class constructor, and constructor.name is its name:

Источник

Document: all property

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The Document interface’s read-only all property returns an HTMLAllCollection rooted at the document node. In other words, it returns all of the document’s elements, accessible by order (like an array) and by ID (like a regular object).

Value

An HTMLAllCollection which contains every element in the document.

Special type conversion behavior

For historical reasons, document.all is an object that in many ways behaves like undefined . Specifically:

These special behaviors ensure that code like:
```
if (document.all)  // Assume that we are in IE; provide special logic > // Assume that we are in a modern browser 
```
Will continue to provide modern behavior even if the code is run in a browser that implements document.all for compatibility reasons.

However, in all other contexts, document.all remains an object. For example:
- It is not strictly equal to either undefined or null .
- When used on the left-hand side of the nullish coalescing operator ( ?? ) or the optional chaining operator ( ?. ), it will not cause the expression to short-circuit.
Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jun 20, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Читайте также: What is препроцессор css

Javascript document all type