javascript - 检查 HTMLElement 是否包含 value 属性的最佳方法

Question

想象一个函数，其签名如下:

function readElement(element: HTMLElement): string;

要实现该功能，您必须检查元素是否使用 value 属性(即 HTMLInputElement)或 textContent 属性(即 SpanElement) 并获取相应的属性。我要问的是几种可以实现 readElement 的方法，这些方法万无一失，并且具有较高的浏览器兼容性。

以下是我过去用来解决该问题的方法的列表:

• element.value !== 未定义
• element.constructor.hasOwnProperty("value")
• typeof element.value ===“字符串”
• [HTMLInputElement, HTMLTextAreaElement,...].some(proto => element instanceof proto)

Answer 1

要测试对象是否具有属性，只需在 obj 中使用 'prop':

[...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>