javascript for循环将dom元素文本与数组进行比较

Question

我正在将 DOM 元素的 innerHTML 中的内容与静态文本数组中的内容进行比较。元素中的内容始终与文本数组中的条目匹配。

<p id="main1">b</p>

var textArr = ["<p>a</p>","<p>b</p>","<p>c</p>"];
if (main1.innerHTML == textArr[0]) {
            return 0;
        } else if (main1.innerHTML == textArr[1]) {
            return 1;
        } else if (main1.innerHTML == textArr[2]) {
            return 2;
        } else if (main1.innerHTML == textArr[3]) {
            return 3;
        } else {
            return 0;
}
//returns 1

我很快就会在 textArr 中添加条目，并且意识到对于这种情况，for 循环通常是更好的做法。但是，我的条件语句从未遇到循环。

var index;
for (index = 0; index < textArr.length; ++index) {
    if (main1.innerHtml == textArr[index]) {
        return index;
    } 
}
//does nothing

我如何检查元素中的内容与数组中的内容？

Answer 1

正如我在评论中所说，这样做可以完成工作，如果您仅想要相关 HTML 元素的文本内容，则使用 ```innerHtml`` 可能不是一个好主意。如果您还想要嵌套标签，那么当然，这根本不是问题，只是要小心您使用的是哪个标签，有时您会希望将嵌套的 HTML 元素作为一部分返回字符串，其他时候你不会，等等。

const textArr = ["a", "b", "c"];
const el = document.getElementById("main1");
const getIndex = () => textArr.indexOf(el.textContent);

console.log(getIndex());

<p id="main1">b</p>