What is the most concise way to retrieve the ids of all elements belonging to a specified tag in JavaScript?

Question

What is the most concise way to retrieve the ids of all elements belonging to a specified tag in JavaScript?

I need to extract all unique IDs from foobar elements on a page and create a comma-separated list. Here's an example:

<div>
  <foobar id="456"></foobar>
  <foobar id="aaa"></foobar>
  <foobar id="987"></foobar>
<div>

This should result in "456,aaa,987"

The foobar tags will not be nested.

Currently, I am using the following solution:

[].slice.call(document.getElementsByTagName("foobar")).map(function(a){return a.id}).join(","))

Is there a shorter way to achieve this in pure JavaScript, especially after minification?

Edit: Should work in ES5 (plain JavaScript)

Edit 2: Managed to reduce the code length with:

[].map.call(document.getElementsByTagName("foobar"),function(a){return a.id}).join();

javascript

Answer 1

Answer №1

When working with ES5, there may not be many options, but it's worth noting that the default argument value for the join function is ',' so you can skip that part and simplify your code to:

[].slice.call(document.getElementsByTagName("foobar")).map(function(a){return a.id}).join()

With ES6, you have the ability to convert array-like objects to arrays using Array.from. In addition, utilizing a lambda expression can further shorten the code. Here's how it would look in ES6:

Array.from(document.getElementsByTagName("div")).map(a => a.id).join()

Answer 2

When working with ES5, there may not be many options, but it's worth noting that the default argument value for the join function is ',' so you can skip that part and simplify your code to:

[].slice.call(document.getElementsByTagName("foobar")).map(function(a){return a.id}).join()

With ES6, you have the ability to convert array-like objects to arrays using Array.from. In addition, utilizing a lambda expression can further shorten the code. Here's how it would look in ES6:

Array.from(document.getElementsByTagName("div")).map(a => a.id).join()

Answer 3

Answer №2

This is the most concise solution I came across. I have not been able to find anything shorter without resorting to external helper functions. However, I don't believe going any further would be beneficial.

[].map.call(document.querySelectorAll('foobar'),function(a){return a.id}).join()

Answer 4

This is the most concise solution I came across. I have not been able to find anything shorter without resorting to external helper functions. However, I don't believe going any further would be beneficial.

[].map.call(document.querySelectorAll('foobar'),function(a){return a.id}).join()

Answer 5

Answer №3

In my opinion, it doesn't seem likely to become any more concise than the following:

[].map.call(document.querySelectorAll("foobar"),function(a){return a.id})+"";

Answer 6

In my opinion, it doesn't seem likely to become any more concise than the following:

[].map.call(document.querySelectorAll("foobar"),function(a){return a.id})+"";

Answer 7

Answer №4

Gathers all instances of 'foobar' and displays their id values separated as specified.

<div>
  <foobar id="123"></foobar>
  <foobar id="abc"></foobar>
  <foobar id="789"></foobar>
<div>

<script>

var result = "";

var elements = document.getElementsByTagName("foobar");

for(var j=0; j<elements.length; j++){
result = (result=="")?elements[j].id:result+","+elements[j].id;
}

console.log(result);
</script>

Answer 8

Gathers all instances of 'foobar' and displays their id values separated as specified.

<div>
  <foobar id="123"></foobar>
  <foobar id="abc"></foobar>
  <foobar id="789"></foobar>
<div>

<script>

var result = "";

var elements = document.getElementsByTagName("foobar");

for(var j=0; j<elements.length; j++){
result = (result=="")?elements[j].id:result+","+elements[j].id;
}

console.log(result);
</script>

What is the most concise way to retrieve the ids of all elements belonging to a specified tag in JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Run a JavaScript function on a webpage loaded through an AJAX response

How to extract data from a two-dimensional array with 2 columns and 3 rows stored in a single variable using destructuring in JavaScript

Limit the number input to only allow values between 0 and 100

Angular routing template failing to execute inline JavaScript code

Make sure that the click event listener is set up on the anchor element so that it also affects its children

When the page loads, the jQuery accordion menu will be closed by default

Combining mongoose distinct, skip, and limit functions for efficient querying

The ajax request does not support this method (the keydown event is only active during debugging)

Performing an XMLHttpRequest to Submit an HTML Form

Is it possible to change the time format from one to another in javascript using moment.tz?

Improve navigation by integrating jQuery validation to resolve input errors seamlessly

utilizing the passing of functions as parameters in Javascript

Prevent right-clicking on links from a particular domain

Create Vuetify components dynamically through programming

Any property modified by an event handler will consistently appear in its original form

Clicking on a row in ng2-smart-table should result in the row being

Angular directive ceases to trigger

The alert feature seems to be malfunctioning. I attempted to use an external script file with the code "alert('hello world');" but it did not produce the desired alert

Add content to div element using input from textarea

Frisby.js is looking for a valid JavaScript object, but instead received an undefined value