如何设置任何DOM元素的显示值

How do you set the display value of any DOM element?

本文关键字:元素 DOM 显示 任何 何设置 设置      更新时间:2023-09-26

有时我想更新一个随机DOMNode的值,但我真的不知道它是什么类型的元素。我假设我需要一些代码块来检查它是什么类型的节点。

if(el.tagName == 'input' ) el.value = "foo";
if(el.tagName == 'div') el.innerHTML = "foo";

或者即使某些属性存在:

var value = "foo";
if(el.value != "undefined" && el.value != value) {
    el.value = value;
}
if(el.innerHTML != "undefined" && el.innerHTML != value) {
    el.innerHTML = value;
}

el。nodeType确实列出了几个基本类型,但它们只是基本的节点类型。

更新任何类型的元素显示的最佳方法是什么?

Update: @dfsq有一个好主意。

el["value" in el ? "value" : "innerHTML"] = value;

然而,它似乎并不适用于任何元素:

["value" in document.createElement('li')] // true

更新2严格类型检查可能是一个解决方案:

document.createElement('input').value
""
document.createElement('li').value
0
document.createElement('div').value
undefined
document.createElement('textarea').value
""

注意:没有jQuery解决方案,除非你想指出jQuery是如何做到的

似乎对el.value进行类型检查是可行的:

var els = ['p', 'div', 'li', 'a', 'input', 'textarea'];
for (var i in els) { 
    var el = document.createElement(els[i]); el.value = 'foo'; console.log(el.value);
}

jsfiddle

el[typeof el.value === "string" ? "value" : "innerHTML"] = value;