javascript - 如何用变量替换 HTML 元素的所有实例(或更简单的方法)

Question

我有一个 HTML 片段，我在整个片段中重复了文本，并且希望能够设置单个变量并更新文档以显示我有占位符的文本。 HTML 没有任何 body、head 等标签，因为这将是一个更大网页的子部分。

如果有人知道的话，我还可以使用任何更简单/更容易的方法来完成此任务，但如果不知道，最好只使用 JavaScript 的解决方案会很棒。

当前的问题是，通过使用“document.getElementById()”，它只会替换元素的第一个实例，这正是它应该做的事情，但我需要一个可以替换所有实例的解决方案。

<script type="text/javascript">
    var Name = "Some Name";
    var WebAddress = "https://example.com";
    window.onload = function Placeholder() {
        document.getElementById('Placeholder-Name').innerHTML = Name;
        document.getElementById('Placeholder-WebAddress').innerHTML = WebAddress;
        document.getElementById('Placeholder-WebAddress-href').href = WebAddress;
    }
</script>
<h1><placeholder id="Placeholder-Name"></placeholder></h1>

<p>
    Blah blah blah<a id="Placeholder-WebAddress-href" href="#"><placeholder id="Placeholder-WebAddress"></placeholder></a> blah blah blah <placeholder id="Placeholder-WebAddress"></placeholder>.
    And some more blah <placeholder id="Placeholder-WebAddress"></placeholder>.
</p>

Answer 1

document.querySelectorAll() 是您应该使用的方法，而不是 document.getElementsByClassName()，因为它返回一个 Live Collection，在某些情况下会导致意外值。最重要的是，一旦获得标签集合，您必须使用数组方法或循环遍历每个标签。

详细信息可以在评论和演示内容中找到(即阅读所有内容)。

/** insStr()
@Param: selector [string]...........: CSS syntax to target tags
        string [string].............: Text content or attribute value
        attribute [string](optional): Name of attribute to modify
This function will insert a string into a given group of tags, either as text content or an 
attribute value.
//A - Pass a selector, a string for text in between the tags.
      If it's for an attribute then add it as third parameter
//B - Collect all tags that match selector
      '#ID' -- '.CLASS' -- '[ATTRIBUTE=VALUE]' -- 'TAGNAME'
      This collection is called a NodeList
//C - Iterate through the NodeList in a for...of loop
//D - if the third parameter exists, set string as the value
//E - otherwise set string as text content
*/
function insStr(selector, string, attribute = null) { //A
  const nodes = document.querySelectorAll(selector); //B  
  for (let node of nodes) { //C
    if (attribute) {
      node.setAttribute(attribute, string); //D
    } else {
      node.textContent = string; //E
    }
  }
  return false;
}

insStr('#main-title', `Prefix Ids with a Hash: #. Also IDS MUST BE UNIQUE! NEVER DUPLICATE AN ID!!!`);

insStr('.content', `Prefix class with a dot: .`);

insStr('[name=field]', `If there's no id or class, try any attribute/value an element has and wrap it in brackets: [...] 
-- Also note that the third parameter is setting the value attribute`, 'value');

insStr('a', `If the element is totally void of any usable attribute/value you can use the tagName -- ex. 'a' for <a>`);

insStr('a', `https://stackoverflow.com`, 'href');

insStr('article', `BTW there's no such thing as <placeholder> tag -- it's not standard. Follow standards else it'll come back and bite you in the arse`);

input {
  display: block;
  width: 99%;
}

<h1 id='main-title'></h1>
<p class='content'></p>
<p class='content'></p>
<p class='content'></p>
<p class='content'></p>
<input name='field'><br>
<a href=''></a><br>
<a href=''></a><br>
<a href=''></a><br>
<a href=''></a><br><br>
<article></article>