Лучшие способы проверить, содержит ли HTMLElement свойство value - PullRequest
Новая
       20

Лучшие способы проверить, содержит ли HTMLElement свойство value

0 голосов
/ 08 марта 2019

Представьте себе функцию, подпись которой выглядит следующим образом: 

function readElement(element: HTMLElement): string;

Чтобы реализовать функцию, вам нужно проверить, использует ли элемент свойство value (т.е. HTMLInputElement) или свойство textContent (т.е. SpanElement) и получить соответствующее свойство. То, что я спрашиваю, - это пара способов, которые могут реализовать readElement, надежны и имеют высокую совместимость с браузером.

Вот список способов, которые я использовал для решения этой проблемы в прошлом:

  • element.value !== undefined
  • element.constructor.hasOwnProperty("value")
  • typeof element.value === "string"
  • [HTMLInputElement, HTMLTextAreaElement,...].some(proto => element instanceof proto)

1 Ответ

1 голос
/ 08 марта 2019

Чтобы проверить, есть ли у объекта свойство, просто используйте 'prop' in obj: 

[...document.body.querySelectorAll('*')].forEach((el)=> {
  console.log(el.tagName + ' contains: ' + readEl(el));
})

function readEl(el) {
  return 'value' in el ? el.value : el.textContent || false;
}
<p>para</p>
<input value="input" />
<textarea>textarea</textarea>
<div>div</div>
...