Как написать document.querySelector для следующего кода

Question

У меня проблемы с написанием document.querySelector для следующего кода. В настоящее время я написал этот код как querySelector, но он не охватывает всего ...

Пожалуйста, помогите мне улучшить это, спасибо.

Редактировать: как Казалось бы, какая-то путаница, позвольте мне уточнить. Я хотел бы, чтобы все элементы из div, a, img, everything были включены в querySelector.

var areaa = document.querySelector("#menu #envelope #links");

<div id="menu">Click here to browse the internet.
	<div id="envelope">
		<div id="links" >
			<div>
				<a id="g" class="redirect">
					<img id="google" src="assets/google.png" />
				</a>
			</div>
			<div style="width: 20%;"></div>
			<div>
				<a id="s" class="redirect">
					<img id="sava" src="assets/Logo_Sava.png"/>
				</a>
			</div>
		</div>
	</div>
</div>

Редактировать 2 - поскольку требуется больше кода (элементы href удаляются / добавляются по мере необходимости) ...

var menu = document.getElementById("menu");
var areaa = document.querySelectorAll(".areaa");

menu.addEventListener("mouseenter", addHref);
//areaa.addEventListener("mouseleave", remHref);

document.addEventListener("mousemove", function(){
    if(this != areaa){
        remHref();
    }
});

menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
    if (this != areaa){
        remHref();
    }
});

var g = document.getElementById("g");
var s = document.getElementById("s");

function remHref (){
    if (g.hasAttribute("href")){
        g.removeAttribute("href");
    }
    if (s.hasAttribute("href")){
        s.removeAttribute("href");
    }
}

function addHref (){
    setTimeout(activate, 250);
}

function activate (){
    document.getElementById("g").setAttribute("href", "https://www.google.com");
    document.getElementById("s").setAttribute("href", "https://www.example.com");
}

Answer 1

Вы можете добавить класс ко всем элементам, которые хотите захватить, а затем использовать document.querySelectorAll

var areaa = document.querySelectorAll(".my-class");

html должно выглядеть так:

<div id="menu" class="my-class">Click here to browse the internet.
<div id="envelope" class="my-class">
    <div id="links" class="my-class">
        <div>
            <a id="g" class="redirect">
                <img class="my-class" id="google" src="assets/google.png" />
            </a>
        </div>
        <div style="width: 20%;"></div>
        <div>
            <a id="s" class="redirect">
                <img id="sava" src="assets/Logo_Sava.png"/>
            </a>
        </div>
    </div>
</div>

Answer 2

2 вещи, либо добавьте класс в каждый div

<div id="menu" class="area">Click here to browse the internet.
    <div id="envelope" class="area">
        <div id="links" class="area" >
            <div>
                <a id="g" class="redirect">
                    <img id="google" src="assets/google.png" />
                </a>
            </div>
            <div style="width: 20%;"></div>
            <div>
                <a id="s" class="redirect">
                    <img id="sava" src="assets/Logo_Sava.png"/>
                </a>
            </div>
        </div>
    </div>
</div>

и выберите все div в

let areaa = getElementsByClassName("area");

, либо вы можете использовать document.querySelectorAll("yourclassname") для доступа ко всем div этого класса имя

Answer 3

Вы можете использовать querySelectorAll

Метод Document querySelectorAll () возвращает stati c (не в реальном времени) NodeList, представляющий список элементов документа, которые соответствуют указанной группе селекторов , Узнать больше: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Вы можете использовать его следующим образом:

var areaa = document.querySelectorAll('*');

Это вернет все предметов. Вы можете заменить document контейнером, если хотите ограничить его указанием c div .

Answer 4

Если вы хотите выбрать все, что вы можете использовать ниже:

var areaa = document.querySelectorAll("#menu #envelope #links *");

Если вы хотите быть более точным c, вы можете сделать следующее (код ниже будет выберите все теги привязки и изображения внутри #links):

var areaa = document.querySelectorAll("#menu #envelope #links a, #menu #envelope #links img");