如何使用 javascript 过滤 DOM 元素的不同标签名称

Question

Here, I've inserted all required tagname inside an array using querySelectorAll, I want to perform different action on different elements conditionally. How can I get the different tag name while iterating through each element,

const allCanvas = document.getElementsByTagName("canvas");
const allSvg = document.querySelectorAll(
  ".widget-graph-container svg.rsm-svg "
);
const allElements = [...allCanvas, ...allSvg];

here I have different canvas and svg elements inside allElements array, I want to iterate through each element inside array and perform different action.

allElements.forEach((el, index) => { 
  if (el == 'canvas') { 
    // do something 
  } else if (el == 'svg') { 
   // do something
  }
})

Answer 1

In the forEach loop, you could use the tagName property on the current element of the iteration and put a comparison on that. Refer to the MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName