Finding all tags

JavaScript
1

Im trying to put all elements of type (foreignobject) into an array
with

function showTermination() {
var elements = document.getElementsByTagName("FOREIGNOBJECT");
//console.log(elements);
elements.forEach(function(element) {

console.log(element);
  //(cable) => cable.classList.replace( 'cable', 'inactive-cable' )
});
}

but
I get
TypeError: elements.forEach is not a function

2

getElementsByTagName() returns not an array.

3

One possible solution to this is to convert the elements collection into an array, before using forEach.

Array.from(elements).forEach(function (element) {
    ...
});

However, using querySelectorAll instead of getElementsByTagName is a preferred technique because forEach is natively supported on that.

var elements = document.querySelectorAll("FOREIGNOBJECT");
elements.forEach(function(element) {
    ...
});
2 Likes
4

when i do

function showTermination() {
var elements = document.querySelectorAll("FOREIGNOBJECT");
console.log(elements);
}

get

image
image1920Ă—1080 122 KB

the array is empty, shouldn’t it have like 350 elements?

5

I guess its case sensitive, it worked when I used foreignObject

6

I don’t think im adding a class to each element

function showTERMINATION() {
var elements = document.querySelectorAll("foreignObject");

elements.forEach(function(element) {
console.log(element.classList);
(element) => element.classList.add( 'inactive' )
console.log(element.classList);
});
}

produces

image
image1806Ă—574 82.2 KB

It seems to only show “” which I gather means the classlist is empty, but why does it not update to “inactive” after the class was added?

7

It’s the arrow-notation that’s giving you trouble.

(element) => element.classList.add( 'inactive' )

That’s similar to defining a function, without executing it.

You can either remove the arrow notation and make it a statement:

  elements.forEach(function (element) {
    console.log(...);
    element.classList.add('inactive');
    console.log(...);
  });

Or, you can remove the log statements and have just the arrow notation as the forEach callback.

  elements.forEach(
    (element) => element.classList.add('inactive')
  );

In either case, it works.

Solution 1: with logs and without arrow notation:

function showTERMINATION() {
  var elements = document.querySelectorAll("foreignObject");

  elements.forEach(function(element) {
    console.log(element.classList);
    element.classList.add('inactive');
    console.log(element.classList);
  });
}

Solution 2: without logs and with arrow notation:

function showTERMINATION() {
  var elements = document.querySelectorAll("foreignObject");

  elements.forEach(
    (element) => element.classList.add('inactive')
  );
}

Solution 3: And for good measure, with logs and with arrow notation:

function showTERMINATION() {
  var elements = document.querySelectorAll("foreignObject");

  elements.forEach(function(element) {
    console.log(element.classList);
  });
  elements.forEach(
    (element) => element.classList.add('inactive')
  );
  elements.forEach(function(element) {
    console.log(element.classList);
  });
}

https://jsfiddle.net/5oLpr9ws/2/

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.