如何使用 JavaScript 对包含一个类名的所有元素的 innerHTML 进行切片或子字符串

Question

我可以使用以下代码缩短按Id选择的元素的innerHTML：

<p id="demo">The quick brown fox jumps over the lazy dog</p>
<p id="demo2" class="demo">The quick brown fox jumps over the lazy dog</p>

let text = document.getElementById("demo").innerHTML; 
document.getElementById("demo").innerHTML = text.slice(0, 9);

作为输出

The quick
The quick brown fox jumps over the lazy dog

然而，我无法让它处理包含同一类的多个元素。我试过这个：

let text = document.getElementsByClassName('demo');
for (let i=0; i < text.length; i++) { 
text.innerHTML.slice(0, 9);
}

但在Codepen上，它只是说"；TypeError:elements.inerHTML未定义；。

请问我缺了什么？

Answer 1

使用普通javascript不能同时更改所有元素。相反，您需要对它们进行迭代。此外，仅在innerHTML上调用slice不会更改它，您需要分配值。

let texts = document.getElementsByClassName('demo');
for (let i=0; i < texts.length; i++) { 
texts[i].innerHTML = texts[i].innerHTML.slice(0, 9);
}

Answer 2

您在不引用索引的情况下对HTMLCollection进行迭代：text[i]。

1. 现代JS倾向于在元素选择上支持querySelectorAll，然后用类似for...of的forEach的东西迭代它。

2. 您应该针对元素的textContent或innerText，而不是其innerHTML。

3. 我可能更喜欢substr从字符串中获取字符，而不是slice。

forEach

// Cache all the demo elements
const els = document.querySelectorAll('.demo'); 
// Loop over them, and update the textContent
els.forEach(el => {
const text = el.textContent;
el.textContent = text.substr(0, 9);
});

<p class="demo">The quick brown fox jumps over the lazy dog</p>
<p>The quick brown fox jumps over the lazy dog</p>
<p class="demo">The quick brown fox jumps over the lazy dog</p>

注意：除了抛出异常之外，没有任何方法可以停止或中断forEach循环。如果您需要这样的行为，forEach方法是错误的工具。

IE11也存在兼容性问题，因此这里是@connexo在评论中建议的for...of。

for...of

// Cache all the demo elements
const els = document.querySelectorAll('.demo'); 
// Loop over them, and update the textContent
for (const el of els) {
const text = el.textContent;
el.textContent = text.substr(0, 9);
}

<p class="demo">The quick brown fox jumps over the lazy dog</p>
<p>The quick brown fox jumps over the lazy dog</p>
<p class="demo">The quick brown fox jumps over the lazy dog</p>

Answer 3

尝试：

let text = document.getElementsByClassName('demo');
for (let i=0; i < text.length; i++) { 
text[i].innerHTML = text[i].innerHTML.slice(0, 9);
}