时间戳

首页 > 解决方案 > 检查 DOM 元素类型/属性以将值分配给 innerHTML 或 value

javascript - 检查 DOM 元素类型/属性以将值分配给 innerHTML 或 value

问题描述

我想查询选定容器中的所有内容。

container = document.querySelector('[data-container]')

我也有一个variable包含一个值的。

如果子元素具有value属性（如输入）

child.value = variable

如果没有，像 'p'、'div' 使用：

child.innerHTML = variable

如何检查元素/类型属性？

我需要逐个检查标签，还是更一般的东西？

标签： javascript

解决方案

您可以使用更通用的东西in：：它检查对象（或其原型）上是否存在属性：

if ("value" in element) {
    // use value
} else {
    // Use innerHTML or textContent, etc.
}

例子：

var container = document.querySelector("[data-container]");
var children = container.children;
for (var n = 0; n < children.length; ++n) {
  var element = children[n];
  var hasValue = "value" in element;
  console.log(element.tagName, hasValue ? "has value" : "doesn't have value");
}
<div data-container>
  <p>Paragraph</p>
  <input type="text">
</div>

推荐阅读