JavaScript：检查元素是否可以接受值

Question

我正在尝试实现以下功能（伪代码）：

if ( element can accept a value )
    element.value = "my new value";
else
    element.innerHTML = "my new value";

对于输入、文本区等元素，它会设置“value”属性，但对于div或span等元素，它会设置“innerHTML”属性。

或者我应该同时设置“value”和“innerHTML”属性，因为对于输入元素来说，设置“innerHTML”是无害的吗？

- C C

---

为什么您需要这样做呢？您为什么不知道该元素是输入还是内容元素？ - Barmar

typeof element.value != 'undefined' -> typeof element.value != '未定义' - Hasan Daghash

我认为没有一种干净的方法来做到这一点，但你可以尝试像这样的东西：if (element.tagName == 'input' || element.tagName == 'testarea' || ...) - Alexandre Thyvador

你也可以使用element.nodeName == "INPUT"来确定HTML元素类型，详情请见这里。 - Kevin

只需要基本检查是否具有该属性即可。除非您喜欢维护元素列表，否则没有保持列表的真正理由。 - epascarello

Answer 1

基本的“in”运算符应该能解决问题。

function hasValue(elem) {
  return 'value' in elem
}

console.log('input', hasValue(document.querySelector('#t1')))
console.log('div', hasValue( document.querySelector('#t2')))
console.log('select', hasValue(document.createElement('select')))
console.log('textarea', hasValue(document.createElement('textarea')))
console.log('h1', hasValue(document.createElement('h1')))
console.log('span', hasValue(document.createElement('span')))

<input type="text" id="t1" />
<div id="t2"></div>

- epascarello

---

看起来非常简单，可以用来检查元素是否为输入！ - ptyskju

Answer 2

正如评论中所提到的，您可以使用

if (element.nodeName == "INPUT" || element.nodeName == "TEXTAREA") {}

你正在使用"INPUT"和"TEXTAREA"标签，因此根据需要添加你要检测的标签。

这里有一个更深入的关于nodeName的解释。

---

顺便提一下，你可以大大简化这个过程

if (element.nodeName != "DIV") {}

但是只有在您确定传入的任何元素都是输入类型或 div 类型时才能执行此操作。

- Kevin

Answer 3

你可以使用 attributes 属性来获取标签名称。

function updateElement(elemId) {
  var attr = document.getElementById(elemId).attributes;

  if (attr[0].ownerElement.tagName === 'INPUT') {
    document.getElementById(elemId).value = 'adding to value'
  } else {
    document.getElementById(elemId).innerHTML = 'added in inner html'
  }

}

updateElement('inputElem')
updateElement('divElem')

<input id='inputElem'>
<div id='divElem'></div>

- brk

Answer 4

您可以使用in操作符检查是否有任何元素具有value属性-请参见下面的演示：

Array.prototype.forEach.call(document.body.children, function(element) {
  if ('value' in element)
    element.value = "form";
  else
    element.innerHTML = "not form";
});

<input/>
<div></div>
<textarea></textarea>
<select>
  <option value="not form">Not form</option>
  <option value="form">Form</option>
</select>

如果你选择使用jQuery，有一个更简单的选项 - 请查看下面的演示：

：input选择器。

$('body').children().each(function() {
  if ($(this).is(':input'))
    $(this).val("form");
  else
    $(this).html("not form");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>
<div></div>
<textarea></textarea>
<select>
  <option value="not form">Not form</option>
  <option value="form">Form</option>
</select>

- kukkuz