使用 Javascript 选择 DOM 元素

Question

我有以下 HTML 和 Javascript 片段。

在 Javascript 中，我引用了按钮元素 我想从中获取对第一个元素的引用 “theorem”类的封闭 div 元素中的“proof”类。

Javascript 片段中显示的迄今为止我的最佳尝试不起作用。

任何帮助将不胜感激。

<section>   
   <div id="t1" class="theorem">

        <div>
            <span>Theorem   1:</span>
            <button class="toggle">Proof</button>
        </div>  

        <p>
            Text of my Theorem 1.
        </p>

        <div class="proof">
            Proof of my Theorem 1.
        </div>  
        
    </div>
</section>

<script>
    var buttons = document.getElementsByClassName("toggle");
    var i;
    for (i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", function() {
            var theorem = this.closest("theorem");                  
            var proof = parent.querySelector(".proof");
        });
    }
</script>

Answer 1

你忘记了两件事：

1. 在

   .

   之前使用

   theorem

   来正确选择父级
2. 使用

   theorem

   变量来查找证明元素。

<section>   
   <div id="t1" class="theorem">

        <div>
            <span>Theorem   1:</span>
            <button class="toggle">Proof</button>
        </div>  

        <p>
            Text of my Theorem 1.
        </p>

        <div class="proof">
            Proof of my Theorem 1.
        </div>  
        
    </div>
</section>

<script>
    var buttons = document.getElementsByClassName("toggle");
    var i;
    for (i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", function() {
            var theorem = this.closest(".theorem");                  
            var proof = theorem.querySelector(".proof");
            console.log(proof);
        });
    }
</script>

Answer 2

最好使用

document.querySelector()

选择单个元素，或使用

document.querySelectorAll()

选择多个元素

两个选项可以使用 CSS 选择器来获取元素