0

我在编写document.querySelector以下代码时遇到了困难。目前我已经编写了这段代码，querySelector但它并不包含所有内容......

请帮我改进一下，谢谢。

编辑：由于似乎有些混乱，让我详细说明。我希望所有元素，从 div、a、img到所有内容都包含在 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");
}
4

4 回答 4

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>

于 2020-02-26T13:15:32.533 回答
0

如果要选择所有内容，可以使用以下内容：

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

如果您想更具体，可以执行以下操作（下面的代码将选择其中的所有锚标签和图像#links）：

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

于 2020-02-26T13:12:57.557 回答
0

您可以使用querySelectorAll

Document 方法 querySelectorAll() 返回一个静态（非实时）NodeList，表示与指定选择器组匹配的文档元素列表。了解更多：https ://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

你可以像这样使用它：

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

这将返回所有项目。如果要将其限制为特定的div ，则可以将document替换为容器。

于 2020-02-26T13:19:53.027 回答
0

两件事，要么为每个 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

于 2020-02-26T13:26:54.927 回答