检查 HTMLElement 是否包含值属性的最佳方法

Best ways to check if an HTMLElement contains the value property

想象一个签名如下所示的函数：

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)

要测试对象是否具有属性，只需使用 '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>