Javascript 使用纯JS添加基于输入标签的占位符属性-无jQuery

我需要得到每个元素的标签，并将其作为占位符属性应用到输入中，虽然我得到了一半，但似乎无法仅获得元素的文本来添加属性

请注意，我不能在任何方面使用jQuery

JS:

HTML:

名字


姓


电子邮件


单位


评论

您很接近了：问题只是您试图使用第二个

querySelectorAll返回的对象，就好像它是一个元素一样。它返回一个集合，即使只有一个匹配的元素。如果您知道只有一个元素与之匹配，只需将其索引为零即可。如果您知道每个
p
元素中只有一个这样的元素，则可以使用相同的方法访问
输入
元素。因此，基本代码可以如下所示：

var elements = document.querySelectorAll('p.form-field');
Array.prototype.forEach.call(elements, function(el, i){
  el.querySelectorAll('input')[0].placeholder =
    el.querySelectorAll('.field-label')[0].textContent;
});

根据您对源代码的假设，有几种可能的方法

注意：复制标签文本作为占位符是无用的和令人不安的。用占位符替换标签文本不利于可访问性，并且在HTML5规范中被反复使用。但是，您正在执行的操作可能有不同的目的。
您很接近：问题在于，您试图使用第二个
querySelectorAll
返回的对象，就好像它是一个元素一样。它返回一个集合，即使只有一个匹配的元素。如果您知道只有一个元素与之匹配，只需将其索引为零即可。如果您知道每个
p
元素中只有一个这样的元素，则可以使用相同的方法访问
输入
元素。因此，基本代码可以如下所示：

var elements = document.querySelectorAll('p.form-field');
Array.prototype.forEach.call(elements, function(el, i){
  el.querySelectorAll('input')[0].placeholder =
    el.querySelectorAll('.field-label')[0].textContent;
});

根据您对源代码的假设，有几种可能的方法

注意：复制标签文本作为占位符是无用的和令人不安的。用占位符替换标签文本不利于可访问性，并在HTML5规范中被反复使用。但可能您正在执行的操作有不同的目的。
虽然前面的答案有效，但我建议使用一种更简单的方法，例如：

function placeholderLabels() {
  // get <input> elements that are in a <p> and follow a <label>:
  var inputs = document.querySelectorAll('p label + input');

  // iterate over those <input> elements:
  Array.prototype.forEach.call(inputs, function(input) {
  // input is the current <input> from the NodeList over which we're
  // iterating, here we set its placeholder property to either:
  // the textContent of the first <label> associated with the <input>
  // or to an empty string, if there's no associated <label>:
    input.placeholder = input.labels.length ? input.labels[0].textContent.trim() : '';
  });
}

placeholderLabels();

标签{
显示：内联块；
宽度：7em；
}
p、 所需标签：：后{
内容：“*”；
}


名字


姓


电子邮件


单位


评论



虽然前面的答案有效，但我建议使用更简单的方法，例如：

function placeholderLabels() {
  // get <input> elements that are in a <p> and follow a <label>:
  var inputs = document.querySelectorAll('p label + input');

  // iterate over those <input> elements:
  Array.prototype.forEach.call(inputs, function(input) {
  // input is the current <input> from the NodeList over which we're
  // iterating, here we set its placeholder property to either:
  // the textContent of the first <label> associated with the <input>
  // or to an empty string, if there's no associated <label>:
    input.placeholder = input.labels.length ? input.labels[0].textContent.trim() : '';
  });
}

placeholderLabels();

标签{
显示：内联块；
宽度：7em；
}
p、 所需标签：：后{
内容：“*”；
}


名字


姓


电子邮件


单位


评论



谢谢，太棒了！！还有一个问题，如果p标记有一个required类，那么占位符在textContent后面有一个*的话，我怎么能输入一个条件呢？非常受欢迎的新问题应作为新问题发布。回答应该是可以理解和正确的，作为对所问问题的回答，而不是对评论中提出的任何无关紧要的问题的回答。否则会使未来的访问者感到困惑。注意，如果label.parentNode.classList为空，则此操作将在IE的早期版本中崩溃。建议在适当的地方检查空值以确保兼容性。谢谢，太棒了！！还有一个问题，如果p标记有一个required类，那么占位符在textContent后面有一个*的话，我怎么能输入一个条件呢？非常受欢迎的新问题应作为新问题发布。回答应该是可以理解和正确的，作为对所问问题的回答，而不是对评论中提出的任何无关紧要的问题的回答。否则会使未来的访问者感到困惑。请注意，如果label.parentNode.classList为空，则在早期版本的IE中会出现这种情况。建议在适当的地方检查空值以确保兼容性。我知道我知道，向客户解释过，但他们需要placeholds：（我知道我知道，向客户解释过，但他们需要placeholds:(
function placeholderLabels() {
  // get <input> elements that are in a <p> and follow a <label>:
  var inputs = document.querySelectorAll('p label + input');

  // iterate over those <input> elements:
  Array.prototype.forEach.call(inputs, function(input) {
  // input is the current <input> from the NodeList over which we're
  // iterating, here we set its placeholder property to either:
  // the textContent of the first <label> associated with the <input>
  // or to an empty string, if there's no associated <label>:
    input.placeholder = input.labels.length ? input.labels[0].textContent.trim() : '';
  });
}

placeholderLabels();