时间戳

首页 > 解决方案 > Javascript：使用 querySelectorAll() 重新分配数组值更新失败

javascript - Javascript：使用 querySelectorAll() 重新分配数组值更新失败

问题描述

path = element[i].nextElementSibling;

获取更element[i].nextElementSibling改变量值的path值，但是当我重新分配的值element[i]

element[i] = path;

保持element[i]原样。为什么会这样？

/*
Press Ctrl+Shift+C while opening the web console with google chrome or mozzila firefox (Tools > Web Developer > Web Console) and hover over the element display by the console to highlight the element.
*/
let element = document.querySelectorAll("a");
console.log(element.length);
for (let i = 0; i < element.length; i++) {
	let path = element[i].nextElementSibling;
	//Is NOT next sibling element exist and is <p>
	if(!(path && path.matches("p"))){
		//path is null, reasign to <a>
		path = element[i];
		console.log("path = element[i] (Origin):");
		console.log(path = element[i]);
		//get <a> parent element
		path = path.parentElement;
		console.log("path = path.parentElement (Origin's Parent):");
		console.log(path); //display <div>
		if(path && path.nextElementSibling.matches("p")){
			//get destination
			element[i] = path.nextElementSibling;
			//fail to changed T_T
			console.log("element[i] = path.nextElementSibling; (Origin's Parent's Next Sibling)");
			console.log("'path.nextElementSibling' value:");
			console.log(path.nextElementSibling); //display <p>
			console.log("Value of 'element[i]' (did not change!):");
			console.log(element[i]); //why still <a>? not <p>
		}
	}else{ //sibling element
		element[i] = path;
		console.log("element[i] = path");
		console.log("'path' value:");
		console.log(path);
		console.log("Value of 'element[i]' (did not change!):");
		console.log(element[i]);
	}
	console.log("FINAL value of element[i]:");
	element[i].classList.add("get--target");
	console.log(element[i]);
}
body{
	font-size: 20px;
	font-weight: bold;
	color: white;
	background: black;
}
div{
	background: navy;
	padding: 20px;
}
span{
	display: none;
	margin: 10px 0;
	padding: 10px;
}
a, .get--target{
	display: block;
	margin: 10px;
	padding: 10px;
}
a{
	text-decoration: none;
	color: white;
	background: orange;
}
p{
	background: blue;
	padding: 10px;
}
p.get--target span{
	display: block;
	background: lightgreen;
}
a.get--target span{
	display: block;
	background: red;
}
<body>
	<div>
		<a href="#">Origin <span>Failed</span></a>
		<p>Destination <span>Success</span></p>
	</div>
	<p>Destination <span>Success</span></p>
</body>

PS Google Chrome 和 Mozilla Firefox 有不同的控制台日志显示第一个结果element[i]还没有设置有get--target类，在 Google Chrome 中有吗？ Google Chrome 和 Mozilla Firefox 控制台日志结果

标签： javascriptdom

解决方案

我认为原因是 document.querySelectorAll() 方法将 NodeList 对象。无法修改 NodeList 对象。为了更改 NodeList 对象，您必须将其转换为普通的 javascript 数组。Array.from(document.querySelectorAll('[selector]')) 将返回 javascript 数组而不是 NodeList Object。希望这会有所帮助。

/*
Press Ctrl+Shift+C while opening the web console with google chrome or mozzila firefox (Tools > Web Developer > Web Console) and hover over the element display by the console to highlight the element.
*/
let element = Array.from(document.querySelectorAll("a"));
console.log(element.length);
for (let i = 0; i < element.length; i++) {
	let path = element[i].nextElementSibling;
	//Is NOT next sibling element exist and is <p>
	if(!(path && path.matches("p"))){
		//path is null, reasign to <a>
		path = element[i];
		console.log("path = element[i] (Origin):");
		console.log(path = element[i]);
		//get <a> parent element
		path = path.parentElement;
		console.log("path = path.parentElement (Origin's Parent):");
		console.log(path); //display <div>
		if(path && path.nextElementSibling.matches("p")){
			//get destination
			element[i] = path.nextElementSibling;
			//fail to changed T_T
			console.log("element[i] = path.nextElementSibling; (Origin's Parent's Next Sibling)");
			console.log("'path.nextElementSibling' value:");
			console.log(path.nextElementSibling); //display <p>
			console.log("Value of 'element[i]' (did not change!):");
			console.log(element[i]); //why still <a>? not <p>
		}
	}else{ //sibling element
		element[i] = path;
		console.log("element[i] = path");
		console.log("'path' value:");
		console.log(path);
		console.log("Value of 'element[i]' (did not change!):");
		console.log(element[i]);
	}
	console.log("FINAL value of element[i]:");
	element[i].classList.add("get--target");
	console.log(element[i]);
}
body{
	font-size: 20px;
	font-weight: bold;
	color: white;
	background: black;
}
div{
	background: navy;
	padding: 20px;
}
span{
	display: none;
	margin: 10px 0;
	padding: 10px;
}
a, .get--target{
	display: block;
	margin: 10px;
	padding: 10px;
}
a{
	text-decoration: none;
	color: white;
	background: orange;
}
p{
	background: blue;
	padding: 10px;
}
p.get--target span{
	display: block;
	background: lightgreen;
}
a.get--target span{
	display: block;
	background: red;
}
<body>
	<div>
		<a href="#">Origin <span>Failed</span></a>
		<p>Destination <span>Success</span></p>
	</div>
	<p>Destination <span>Success</span></p>
</body>

推荐阅读