代码之家 › 专栏 › 技术社区 › Jeff Higgins

使用Javascript选择DOM元素

dom javascript

Jeff Higgins · 技术社区 · 2 年前

我有以下HTML和Javascript的片段。

在Javascript中,我引用了一个按钮元素我想从中获得对第一个元素的引用类“定理”的封闭div元素中的类“证明”的。

到目前为止,我在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>

2 回复 | 直到 2 年前

Alexander Nenashev 2 年前

你忘了两件事:

使用 . 之前 theorem 正确选择父项
使用 定理 变量来找到证明elem。

<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>

-1

Fernando A. León 2 年前

最好选择元素 document.querySelector() 用于单个元素或 document.querySelectorAll() 对于多个元素

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

推荐文章

Robo Robok · 为什么我无法使用Dom\HTMLDocument搜索标签?

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

LLScheme · 无法使用Playwright&Pyppeteer找到关键字

1 年前

Konrad Viltersten · 无法修改ViewContainerRef的内部内容,只能在Angular中添加标签

1 年前

Eric G · 如何将svg文本元素垂直居中?

1 年前

Nail Val · 当条件通过时,If语句不显示console.log,并按意外情况继续工作

2 年前

Juan Lanus · 如何获取对所选内容的DOM元素的引用

2 年前

huz3y · addEventListener不适用于从javascript添加的新类所选的元素

2 年前

Toby Hogan · 元素React状态更改后未在DOM中更新

2 年前

user23745914 · 能够访问javascript中的dom元素,而无需显式定义查询选择器

2 年前