5

Коллеги, можно ли определить, что тот или иной элемент кастомный?

К примеру:

/* Так, естественно можно захватить элмемент */

console.log(document.getElementsByTagName('div')[0]);

console.log(document.getElementsByTagName('zinaida')[0]);
<!--есть в DOM элементы-->
<zinaida></zinaida>
<pavel></pavel>

<div></div>
<span></span>
<p></p>

А как я могу захватить все кастомные элементы, именно кастомные...

В данном случае получить массив из элементов <zinaida></zinaida> <pavel></pavel>

Хочу сразу отметить тот факт, что присвоить им какой либо class или другой какой либо атрибут и определить по class или атрибуту, я и сам соображу...

Такой метод, как создать некий массив из всех элементов и сверять с этим массивом, тоже не нужен, тем более, что я уже так делал...

6
  • stackoverflow.com/a/28210364/4794368 следующий за этим - тоже оригинален, ну и далее вариант для 2017 года
    – qwabra
    29 мар 2018 в 14:50
  • как я могу захватить все кастомные элементы - никак.
    – Grundy
    29 мар 2018 в 17:16
  • 1
    @Grundy, благодарю... Лаконично и ясно...))
    – Air
    29 мар 2018 в 17:39
  • А если попробовать через regexp всего html? 29 мар 2018 в 17:50
  • @StepanKasyanenko, Ну костыли можно разные придумать...Меня интересовало, может быть есть какой-нить встроенный метод...
    – Air
    29 мар 2018 в 17:57

3 ответа 3

6

const elems = document.body.getElementsByTagName('*');

const isUnknown = function(value) {
  return value instanceof HTMLUnknownElement;
};


for (let el of elems) {
  if (isUnknown(el)) {
    el.classList.add('unknown');
  } else {

    el.classList.add('no-unknown');
  }
};
.unknown {
  color: red;
}

.no-unknown {
  color: green;
}
<!--есть в DOM элементы-->
<zinaida>zinaida</zinaida>
<pavel>pavel</pavel>

<div>div</div>
<span>span</span>
<p>p</p>

А еще есть второй вариант. По требованиям спецификации кастомные элементы надо создавать через дефис.

Можно почитать тут

Например так:

<ce-zinaida>zinaida</ce-zinaida>

И тут оказывается, что пример выше не будет работать с касотмным элементом с дефисом. И выйти из ситуации можно так:

const elems = document.body.getElementsByTagName('*');

for (let el of elems) {
  if (!(el.__proto__ instanceof HTMLElement)) {
    el.classList.add('custom');
  } else {
    el.classList.add('no-custom');
  }
};
.custom {
  color: red;
}

.no-custom {
  color: green;
}
<!--есть в DOM элементы-->
<ce-zinaida>zinaida</ce-zinaida>
<ce-pavel>pavel</ce-pavel>
<div>div</div>
<span>span</span>
<p>p</p>


Этот блок добавлен автором вопроса. Так как при использовании данного примера, выявлен БАГ. Почему-то 'элемент- NAV определяется как custom

Коллеги, предлагаю, если кто выявит еще какие проблемы, дополнить ответ

const elems = document.body.getElementsByTagName('*');

for (let el of elems) {
  if (!(el.__proto__ instanceof HTMLElement)) {
    el.classList.add('custom');
  } else {
    el.classList.add('no-custom');
  }
};
.custom {
  color: red;
}

.no-custom {
  color: green;
}
<zi-na>Это Zina</zi-na>
<nav>Это NAV</nav>
<div>Это div</div>
<p>Это p</p>
<span>Это span</span>

5

Посмотрев примеры выше, пришла еще одна идея. Раз кастомные элементы обязательно надо создавать через дефис, почему бы тогда не проверить наличие дефиса в tagName

Вариант первый - регулярное выражения:

const elems = document.body.getElementsByTagName('*');

for (let i of elems) {
  let reg = new RegExp(/-/g);
  console.log(i.localName + ' - ' + (reg.test(i.localName) ? 'da' : 'net'));
}
<ce-zinaida>zinaida</ce-zinaida>
<ce-pavel>pavel</ce-pavel>
<div>div</div>
<span>span</span>
<p>p</p>

Вариант два:

const elems = document.body.getElementsByTagName('*');

for (let i of elems) {
  if (i.localName.indexOf('-') !== -1) {

    console.log(i.localName + ' - da')
  } else {
    console.log(i.localName + ' - net')
  }
}
<ce-zinaida>zinaida</ce-zinaida>
<ce-pavel>pavel</ce-pavel>
<div>div</div>
<span>span</span>
<p>p</p>

1

Похоже что у кастомных (не зарегистрированных) элементов прототип HTMLUnknownElement - тогда как у стандартных прототипом является его предок HTMLElement, а у зарегистрированных свои прототипы.

Соответственно, определить незарегистрированный кастомный элемент можно по этому признаку, выражением

element instanceof HTMLUnknownElement

Под спойлером ниже, пример кода с простейшим методом Element.isCustom(), и функцией поиска кастомных элементов по селектору - getCustomElements():

HTMLElement.prototype.isCustom = function () {
  return this instanceof HTMLUnknownElement; 
}; 

function getCustomElements(selector, fromElement = null) {
  let result = [], 
      allEls = (fromElement || document).querySelectorAll(selector); 
  for (let el of allEls) { 
    if (el.isCustom())
      result.push(el); 
  }
  return result; 
}

let cntnr = document.querySelector('#container'); 
cntnr.addEventListener('click', e => {
  let els = document.querySelectorAll('.found'); 
  els.forEach(el => el.classList.remove('found'));
  let selector = e.target.dataset.selector; 
  if (!selector)
    return; 
  els = getCustomElements(selector); 
  els.forEach(el => el.classList.add('found')); 
});
#container { height: calc(100vh - 10px); }

#container * {
  display: inline-block; 
  min-width: 40px; 
  line-height: 2em; 
  margin: 4px; padding: 10px; 
  font: 16px sans-serif; color: #000; 
  border: 1px dashed #aaa; 
}

#container > span {
  background-color: #777; 
  border: none; 
  text-transform: uppercase; 
  color: #fff; 
  cursor: pointer;
}

#container .found {
  border: 1px solid #d44;
  color: #d44;
}

#container test.found {
  border: 1px solid #2a2;
  color: #2a2;
}
<div id="container">
  <span data-selector="*">Найти все кастомные</span>
  <span data-selector="test">Найти только &lt;test&gt;</span>
  <br>
  <div>div</div>
  <zinaida>zinaida</zinaida>
  <test>test 1</test>
  <pavel>
    pavel
    <some>some</some>
    <span>span</span>
    <test>test 2</test>
  </pavel>
  <p>p</p>
</div>

Необязательным параметром fromElement задается тот элемент, от которого будет выполняться поиск ("вниз" по DOM).
Клик по области результата сбрасывает классы с найденных элементов.
В целом, код достаточно простой, думаю что он не требует подробных пояснений :)


Источники инфы:
https://stackoverflow.com/q/27334365
HTMLUnknownElement (MDN)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.