Question

我需要使用JavaScript document.querySelector访问一个类。当在#add-occasion id中有两个类似的命名.formBox类时，如何访问id（#add-occasion）中的类（.formBox）中的类（.btnCancel）？我有很多模态与按钮和不同的模态ID相同的类名。

<div data-role="modal" id="add-occasion">
    <h3>Add new occasion</h3>
    <form>
        <div class="formBox">
            <input type="text" id="new-occ" value="" placeholder="" class="" />
        </div>
        <div class="formBox">
            <input type="button" class="btnCancel" value="CANCEL" />
            <input type="button" class="btnSave" value="SAVE" />
        </div>
    </form>
</div>

Answer 1

所有你需要的是：

var elements = document.querySelectorAll("#add-occasion .formBox .btnCancel");
elements[0].style.border = "1px solid red";

由于只有一个元素满足所有这三个条件，因此它只返回一个元素。 querySelector()函数会在.formBox个元素中查找，但在第一个元素中找不到.btnCancel元素，因此它只会移动到下一个.formBox元素会找到一个。

事实上，使用您显示的HTML，您甚至不需要.formBox引用，因为.btnCancel以外没有.formBox项，因此您可以使用此项我试图避免：

var elements = document.querySelectorAll("#add-occasion .btnCancel");
elements[0].style.border = "1px solid red";

或者，如果您确定只有一个元素符合您的条件，或者您只想要第一个元素，那么您可以使用document.querySelector()：

var item = document.querySelector("#add-occasion .btnCancel");
item.style.border = "1px solid red";

JavaScript：当有两个B类元素时，如何在id X中的B类中选择A类？

1 个答案: