javascript - 获取 HTML 正文中的所有元素

Question

我正在尝试编写一个 Javascript 函数来获取 HTML 正文中的所有元素。我试过类似的东西：

function getAllElements(){
        let el = document.body.childNodes;
        for(var i=0; i<el.length; i++)
        {
            if(el[i].getAttribute("id") != "monkeyparentdiv" || el[i].getAttribute("id") != "monkeydiv"
            || el[i].getAttribute("id") != "monkeyspan1" || el[i].getAttribute("id") != "monkeyspan2")
            {
                el[i].classList.add("opacityformonkey");
            }
        }
}

在我的 CSS 中

.opacity-for-monkey{
    animation-name: burnImage;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes burnImage {
    from {
        opacity: 1
    }
    to {
        opacity: 0.3
    }
}

长话短说，我想将除 if 条件中提到的元素之外的所有元素的不透明度设置为 0.3。
但这给了我一个错误：

el[i].getAttribute is not a function.

我究竟做错了什么？

Answer 1

document.body.childNodes返回所有类型的节点，包括没有属性的文本节点。你应该document.body.children改用。

此外，你的 JavaScript 代码添加了类opacityformonkey（没有连字符），但在 CSS 中你有opacity-for-monkey（有连字符）。

Answer 2

所有子节点可能不是一个元素。您还必须检查文本节点并排除它们。这是您的代码的修改版本：

function getAllElements(){
    let el = document.body.childNodes;
    for(var i=0; i<el.length; i++){
        if (el[i].nodeType != Node.TEXT_NODE){
            if(el[i].getAttribute("id") != "monkeyparentdiv" || el[i].getAttribute("id") != "monkeydiv"
            || el[i].getAttribute("id") != "monkeyspan1" || el[i].getAttribute("id") != "monkeyspan2")
            {
                el[i].classList.add("opacityformonkey");
            }
        }
    }
}