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>

附言谷歌浏览器和Mozilla Firefox具有不同的控制台日志显示尚未设置get--target类的element[i]的第一个结果在谷歌浏览器中有吗？谷歌浏览器和Mozilla Firefox控制台日志结果

我认为原因是document.querySelectorAll()方法将NodeList Object。无法修改节点列表对象。为了改变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>

相关内容

最新更新

热门标签：