如何使用多个 document.getElementById？答案

【问题标题】：How to use multiple document.getElementById's?如何使用多个 document.getElementById？
【发布时间】：2014-11-02 23:00:02
【问题描述】：

我遇到了 html 和 js 的问题。我不知道为什么我只能使用最上面的第一个 document.getElementById。

JavaScript.js

var one = "sentence"
document.getElementById("text").innerHTML = one;

var two = "sentence sentence"
document.getElementById("text_2").innerHTML = two;

var three = "sentence sentence sentence"
document.getElementById("text_3").innerHTML = three;

网页.html

<html>
<head>
</head>
<body>
<div id="text"></div>
</body>
</html>
<script src="test.js"></script>

当使用 div id="text_2" 或 div id="text_3" 时，输出不会出现任何内容。网页上只能看到 js 文件最上面的 document.getElementById。所以我想我不能使用多个 getElementById，但我还不知道其他方法。怎么办？

谢谢

【问题讨论】：

您无法通过 ID 检索不存在的元素
.. 因为在您的 HTML 中只有一个元素带有 id of 'text'
这里缺少 html 代码吗？我看不到 ID 为“text_2”和“text_3”的元素
没有理由不能使用多个document.getElementById 调用。你检查过控制台吗？您的其他声明之一是抛出异常，因为您正在寻找的 DOM 元素不存在（但您仍然在设置 innerHTML）。使用空值检查。
也许你应该解释一下，你究竟想要达到什么目的。

标签： javascript html innerhtml getelementbyid var

【解决方案1】：

var sentence1 = 'sentence',
    sentence2 = 'sentence two',
    sentence3 = 'sentence three',
    el1 = document.getElementById('text'),
    el2 = document.getElementById('text_2'),
    el3 = document.getElementById('text_3');

if (el1) {
    el1.innerHTML = sentence1;
}

if (el2) {
    el2.innerHTML = sentence2;
}

if (el3) {
    el3.innerHTML = sentence3;
}

【讨论】：

+1 是的，完全回答了问题，当元素存在时添加内容

【解决方案2】：

我想要的是，有时我只需要“文本”，另一次需要 text_2，对于 text_3 也是如此。

这很简单，您只需将任何您想要的变量放入可以传递给getElementById 的变量中。比如：

var elementId;
if (conditionForText) {
    elementId = "text";
} 
else if (conditionForText2) {
    elementId = "text_2"
}
else if (conditionForText3) {
    elementId = "text_3"
}
// Note: you might want to handle the case where none of the above conditions 
// evaluate to true

document.getElementById(elementId).innerHTML = someText

不清楚您要选择的元素是否应该获得相同的文本，但如果您有多个 id 需要设置几个不同的字符串，您可以将它们映射到一个对象：

var elementsAndStrings = {
    text : "sentence one",
    text_2 : "sentence two",
    text_3 : "sentence three"
};

现在您可以执行以下操作：

document.getElementById(elementId).innerHTML = elementsAndStrings[elementId];

【讨论】：

非常感谢您的麻烦！

【解决方案3】：

HTML

<div class="text">Text1</div>
<div class="text">Text2</div>
<div class="text">Text3</div>
<div class="text">Text4</div>

Javascript

function getElementByClass (className, parent) {
  parent || (parent = document);
  var descendants= parent.getElementsByTagName('*'), i=-1, e, result=[];
  while (e=descendants[++i]) {
    ((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
  }
  return result;
}
texts= getElementByClass("text");
var txtVal="";
for (i = 0; i < texts.length; i++) {
    txtVal += texts[i].innerHTML  + ", ";
}
alert (txtVal);

DEMO

【讨论】：

【解决方案4】：

http://jsfiddle.net/mt78j5m0/

<div id="text_1"></div>
<div id="text_2"></div>
<div id="text_3"></div>

var text = {};

text.text_1 = "One";
text.text_2 = "Two";
text.text_3 = "Three";

var divs = document.querySelectorAll("[id^='text']");

for (var div of divs) {
    div.innerHTML = text[div.id];
}

【讨论】：

IE、Safari 和 Opera 不支持 for...of 循环

【解决方案5】：

怎么样：

const elements = [
  "id1",
  "id2"
].map(document.getElementById);

【讨论】：