javascript - 获取元素的值(value) - 如果失败则获取 InnerHTML

Question

基本上，我正在创建一个 chrome 扩展程序，它可以从网页中提取数据以加快数据输入速度。我试图让这对用户尽可能简单，这让我自己有些头疼。我允许他们为要查找的字段输入一个 ID 或名称，而在我这边，我必须确定它是一个输入，还是他们想要拉出的文本，然后查看该元素是否存在 ID，如果不是，则检查一个以其提供的值作为名称的元素。这必须通过他们提供的多个字段来完成。

我已经尝试了几次代码迭代来做到这一点。目前我一直在尝试让下面的代码来完成这个技巧，但显然它没有用。是否有更好的方法仅通过 javascript 来完成此操作？

var msg = {
  "first": "first_name_id_name",
  "last": "last_name_id_name",
  "email": "email_id_name",
  "phone": "phone_id_name"
}
var fields_to_find = JSON.parse(msg);
var data_to_push = {};
var current;
var ele;
for (var key in fields_to_find) {
  if (fields_to_find.hasOwnProperty(key)) {
    console.log(fields_to_find[key]);
    ele = document.getElementById(fields_to_find[key]);
    if (!ele.value) {
      ele = document.getElementById(fields_to_find[key]);
      if (ele.innerHTML.length == 0) {
        ele = document.getElementsByName(fields_to_find[key]);
        if (!ele.value) {
          ele = document.getElementsByName(fields_to_find[key]);
          if (ele.innerHTML.length == 0) {
            current = "";
          } else {
            current = ele.innerHTML;
          }
        } else {
          current = ele.value;
        }
      } else {
        current = ele.innerHTML;
      }
    } else {
      current = ele.value;
    }
    data_to_push[key] = current;
  }
}
console.log(data_to_push);

<input type="text" id="first_name_id_name" value="John">
<p name="last_name_id_name">Doe</p>
<input type="text" name="email_id_name" value="johndoe@example.com">
<p id="phone_id_name">123-555-1234</p>

如果您能提供任何帮助，我们将不胜感激。

感谢您的宝贵时间!

Answer 1

您可以使用如下几个备用值去除大量多余的嵌套 if 语句。此外，由于 JSON 是 JS 中的原生对象，因此您不必对 msg 对象执行 JSON.parse。

var msg = {
  first: "first_name_id_name",
  last: "last_name_id_name",
  email: "email_id_name",
  phone: "phone_id_name"
};
var data_to_push = {};
var current;
var ele;
for (var key in msg) {
  if (msg.hasOwnProperty(key)) {
    console.log(msg[key]);
    ele = document.getElementById(msg[key]) || document.getElementsByName(msg[key])[0];
    if (ele) {
      current = ele.value || ele.innerHTML || '';
    } else {
      current = '';
    }
    data_to_push[key] = current;
  }
}
console.log(data_to_push);

<input type="text" id="first_name_id_name" value="John">
<p name="last_name_id_name">Doe</p>
<input type="text" name="email_id_name" value="johndoe@example.com">
<p id="phone_id_name">123-555-1234</p>