Как узнать все угловые селекторы в DOM и хранить в массиве?

Question

1) .html

<app-root>
<app-header>
dwkjdwjkwd
</app-header>
<app-container>daaddadadad</app-container>
<app-info>diwduiwuwd</app-info>
</app-root>

Как найти все селекторы с префиксом <app-*> в дом?

2) .html

<app-root>
<app-header>
</app-header>

<div class="parent">
 oiwdiodw
<app-container>dwww</app-container>
<app-info>dwwdwdwd</app-info>
</div>

</app-root>

Какнайти все селекторы с префиксом <app-*> в dom и внутри класса 'parent'?

Желаемый вывод: ["app-container", "app-info", .....];

Ответ может быть в js, jQuery или угловом?

Answer 1

Ну, я не уверен, как вы можете использовать getElementsByTagName и фильтровать это имя тега как <app-*.Но вы можете получить все элементы и затем отфильтровать их.

См. Ниже

var elems = document.body.querySelectorAll(".parent *");
var arr = [...elems].map(elem => elem.tagName.toLowerCase())
  .filter(tagName => tagName.startsWith('app-'))
console.log(arr)

<app-root>
  <app-header>
  </app-header>

  <div class="parent">
    oiwdiodw
    <app-container>dwww</app-container>
    <app-info>dwwdwdwd</app-info>
    <span>some span</span>
    <h2>some heading</h2>
  </div>

</app-root>

Answer 2

Вот немного другая реализация:

const tags = Array(...document.querySelectorAll('*'))
	.map(el => el.tagName.toLowerCase())
	.filter(selector => selector.startsWith('app-'));

console.log(tags)

<app-root>
<app-header>
</app-header>

<div class="parent">
<app-container></app-container>
<app-info></app-info>
</div>

</app-root>

Answer 3

Запрос элементов в контейнере и проверка их tagName

const elems = document.querySelectorAll('.parent *');
elems.forEach(el => {
  const tag = el.tagName.toLowerCase()
  if (tag.startsWith('app-')) {
    console.log(el);
  }
})

<app-root>
  <app-header>
  </app-header>

  <div class="parent">
    <app-container></app-container>
    <app-info></app-info>
  </div>

</app-root>