JS向元素添加类 - 使用父/子选择器

Question

I would like to ask how can i add class to element, but using nested navigation. Structure of HTML:

<form class="searchboxATM">
    <input name="submit_search" value="OK" class="btn btn-default" type="submit">
</form>

I can't simply use getElementsByClassName("btn"); because there is many more .btn elements which i dont want to change. How can i do it?

Thanks for any help!

Answer 1

In pure JS , you can use querySelector :

querySelector documentation

document.querySelector(".searchboxATM .btn");

Or you can add a specific id to your input:

<form class="searchboxATM">
    <input name="submit_search" id="submitSearch" value="OK" class="btn btn-default" type="submit">
</form>

and use getElementById :

document.getElementById("submitSearch");

Or a query selector on the id :

document.querySelector("#submitSearch");

Or use getElementsByName :

document.getElementsByName("submit_search")[0]

If you want to use JQuery , you just have to use $ instead of document.querySelector :

$("#submitSearch")

Or

$(".searchboxATM .btn")

Answer 2

Try

$(".searchboxATM .btn") if it works for you.