Question

我需要获取文档中的所有标签标签，并将其文本值存储为关联数组中的键，并将for =“”属性的值作为其值。

示例：假设我有

<label for="name">First Name</label>

数组应存储表单中的所有字段

var arr['First Name'] = 'name';

我考虑过计算标签的数量并使用for循环来构建这个数组

<script>
     function getLabels(){
       var labels = document.getElementsByTagName("label");

      for (var i=0; i<labels.length;i++){
          var arr[labels.textContent] = labels.htmlFor;
      }
     return arr;
     }
</script>

以下是示例html文档

<!DOCTYPE html>
<html>
<head>
  <title>Form Test</title>
  <script type="text/javascript" src="form.js"></script>
</head>
<body>
  <form action="/my-handling-form-page" method="post">
    <div>
        <label for="unknow">Name:</label>
        <input type="text" id="unknow" name="user_name">
    </div>
    <div>
        <label for="unknow2">E-mail:</label>
        <input type="email" id="unknow2" name="user_mail">
    </div>
    <div>
        <label for="unknow3">Message:</label>
        <textarea id="unknow3" name="user_message"></textarea>
    </div>
</form>
</body>
</html>

Answer 1

你走在正确的轨道上。要模仿JS中的关联数组，您可以使用对象。另外，将对象变量声明在之外的循环中，否则每次迭代都会创建一个新对象。

修改：作为评论者指出，在这种情况下，最好使用.querySelectorAll()而不是.getElementsByTagName()。后者返回一个实时的NodeList，它不具备迭代的性能。

这样的事情：

function getLabels() {
  var labels = document.querySelectorAll('label');
  var store = {};
  
  for (var i = 0; i < labels.length; i++) {
    var label = labels[i];
    store[label.getAttribute('for')] = label.textContent;
  }
  
  return store;
}

Answer 2

JavaScript中的关联数组称为Object。数组本身只能将数组中的项与始终为非负整数的索引相关联。

因此，收集JavaScript数组中的所有标签，循环遍历它们，然后像往常一样，将属性（键）添加到新对象，并将键的值设置为label属性中的值。

＆＃13;

function getLabels(){

  // Get all the label elements and place them in a JavaScript array
  var labels = Array.prototype.slice.call(document.querySelectorAll("label"));

  // Create an object that will hold the keys and values we need
  var obj = {};

  // Loop over the label array
  labels.forEach(function(lbl){
    // Create a key in the object with the name of the label's content
    // and a value for the key that is the value of the "for" attribute
    obj[lbl.textContent] = lbl.htmlFor;
  });
  
  // Return the now populated object
  return obj;
}

// Print the object for testing:
console.log(getLabels());

＆＃13;

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="unknow">Name:</label>
        <input type="text" id="unknow" name="user_name">
    </div>
    <div>
        <label for="unknow2">E-mail:</label>
        <input type="email" id="unknow2" name="user_mail">
    </div>
    <div>
        <label for="unknow3">Message:</label>
        <textarea id="unknow3" name="user_message"></textarea>
    </div>
</form>

＆＃13;

Answer 3

这里我获取所有label个元素，然后创建一个空对象。然后我遍历所有这些元素，并使用每个项目的内部文本向obj添加新属性，并为其赋予一个等于for属性值的值。

var items = document.querySelectorAll('label');
var obj = {};
for (var i = 0; i < items.length; i++) {
  obj[items[i].innerText] = items[i].getAttribute('for');
}
console.log(obj)

<label for="name1">First Name</label>
<label for="name2">Second Name</label>
<label for="name3">Third Name</label>

Answer 4

首先，您每次都要尝试重新初始化变量arr。相反，你想要在循环之外初始化一个对象。

<script>
     function getLabels(){
      var labels = document.getElementsByTagName("label");
      var obj = {};
      for (var i=0; i<labels.length;i++){
          var obj[labels.textContent] = labels.htmlFor;
      }
     return obj;
     }
</script>

此外，这是一个ES6答案：

<script>
  const getLabels = () => {
    const labels = {};
    document.querySelectorAll('label').forEach(e => labels[e.innerText] = e.htmlFor);
    return labels;
  }
</script>

定位所有<label>标记并存储在关联数组中

4 个答案: