How to write a document.querySelector for the following code

Question

I'm having difficulty writing the document.querySelector for the following code. Currently I've written this code as querySelector but it does not encompass everything...

Please help me improve this, thank you.

Edit: as there seemed to be some confusion, let me elaborate. I would like all the elements, from div, a, img, everything to be encompassed in the 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>

Edit 2 - as more code was required (the href elements are removed / added as needed)...

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

you might want to add a class to all elements you want to be captured, then use document.querySelectorAll

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

html shoud look like this:

<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 things, either add a class to every 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>

and select all divs by

let areaa = getElementsByClassName("area");

or you can use document.querySelectorAll("yourclassname") to access all divs of that class name

Answer 3

You can use querySelectorAll

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors. Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

You can use it like this:

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

This will return all items. You can replace document with the container if you want to restrict this to a specific div.

Answer 4

If you want to select everything you can use the below:

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

If you want to be more specific you can do the following (the code below will select all of the anchor tags and images inside #links):

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