获取 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
    }
}

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

el[i].getAttribute is not a function.

我做错了什么？

Answer 1

document.body.childNodes returns all types of nodes including text nodes that don't have attributes. You should use document.body.children 代替。

此外，您的 JavaScript 代码添加了 class 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");
            }
        }
    }
}

获取 HTML 正文中的所有元素

Get All Elements in HTML body

javascript

css

arrays

document-body