在我的情况下，我的 nextElementSibling 是什么？

问题描述

我不明白这段代码中的 nextElementSibling 是什么，你从哪里得到它？谁能给我解释一下？太感谢了！顺便说一句，我的代码不起作用，控制台将错误宣布为“未捕获的类型错误：无法读取 null 的属性‘样式’ 在 HTMLButtonElement。”有人知道出了什么问题吗？由于某些原因我不能把它留在这里，我会把我的代码留在评论部分。非常抱歉给您带来不便！

解决方法

这是我的代码。非常抱歉，因为我无法在我的问题中附上它，所以我会把它留在这里。非常感谢你帮助我！

这是我的 JS：

var coll = document.getElementsByClassName("collapsible")

for (let i=0; i<coll.length; i++) {
    coll[i].addEventListener('click',function(){
        this.classList.toggle("active")

        var content = this.nextElementSibling

        if(content.style.maxHeight){
            content.style.maxHeight = null
        }else{
            content.style.maxHeight = content.scrollHeight + "px"
        }
    } )
}

这是我的 html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet"  href="mes.css">
    <link rel="stylesheet"  href="chat.css">
    <script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
    <!--CHAT BAR BLOCK-->
    <div class="chat-bar-collapsible">
        <button id="chat-button" type="button" class="collapsible">Chat With Us! 
        <i id="chat-icon" style="color:#fff" class="fa fa-fw fa-comments-o"></i>
        </button>
    </div>
    <div class="content">
        <div class="full-chat-block">
            <!--Mesage Container-->
            <div class="outer-container">
                <div class="chat-container">
                    <!--Message-->
                    <div id="chatbox">
                        <h5 id="chat-timestamp"></h5>
                        <p id="botStarterMessage" class="botText"><span>Loading...</span></p>
                    </div>
                    <!--User Input Box-->
                    <div class="chat-bar-input-block">
                        <div id="userInput">
                            <input type="text" id="textInput" class="input-box" name="msg" placeholder="Tap 'enter' to send a message">
                            <p></p>
                        </div>
                        <div class="chat-bar-icon">
                            <i id="chat-icon" style="color:crimson" class="fa fa-fw fa-heart" onClick="heartButton()"></i>
                            <i id="chat-icon" style="color:#333" class="fa fa-fw fa-send" onClick="sendButton()"></i>
                        </div>

                        <div id="chat-bar-bottom">
                            <p></p>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="mes.js"></script>
</body>
</html>

for-loop javascript siblings styles