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 класс, есть в гугле Chrome? Google Chrome и Mozilla Firefox Результаты журнала консоли