我是在 html 和 css 中使用 javascript 的初學者。我想嘗試有沒有辦法通過父容器類訪問子容器類。或者我可以通過“第一”類向“第二”類添加一個新類（“second_new”）。
/* CSS */
.first {
background-color: red;
}
.first_new {
background-color: pink;
}
.second {
background-color: blue;
}
.second_new {
background-color: purple;
}<!-- HTML -->
<div class="row">
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script>
var firstClass = document.getElementsByClassName("first");
function Mousein() {
this.classList.add("first_new");
};
function Mouseout() {
this.classList.remove("first_new");
};
for (var i = 0; i < firstClass.length; i ) {
firstClass[i].addEventListener('mouseover', Mousein);
firstClass[i].addEventListener('mouseout', Mouseout);
}
</script>uj5u.com熱心網友回復：
謝謝伙計們，我找到了答案
/* CSS */
.first {
background-color: red;
}
.first_new {
background-color: pink;
}
.second {
background-color: blue;
}
.second_new {
background-color: purple;
}<!-- HTML -->
<div class="row">
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
<div class="first">
<h1>This is first class</h1>
<div class="second"> <!-- I want to change this -->
<h2>This is Second class</h2>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script>
var firstClass = document.getElementsByClassName("first");
var child;
function Mousein() {
this.classList.add("first_new");
child = this.querySelector(".second");
child.classList.add("second_new")
};
function Mouseout() {
this.classList.remove("first_new");
child.classList.remove("second_new")
};
for (var i = 0; i < firstClass.length; i ) {
firstClass[i].addEventListener('mouseover', Mousein);
firstClass[i].addEventListener('mouseout', Mouseout);
}
</script>uj5u.com熱心網友回復：
是的你可以
方法一
document.querySelector('.first .second');
方法二
let parent = document.querySelector('.first');
parent.querySelector('.second');
uj5u.com熱心網友回復：
是的，您可以訪問 bey 選擇器。document.querySelector('parent child'). 你的情況是：const childEl = document.querySelector('.first .second');
uj5u.com熱心網友回復：
您可以getElementsByTagName()在任何型別的元素上使用。這將是
var parents = document.getElementsByClassName('parent');
var child = [];
for (let i = 0; i < parents.length; i ) {
var child = parents.getElementsByTagName('div')[0];
children.push(child);
}
或者，更簡單：
var parents = document.querySelectorAll('.parent');
var children = document.querySelectorAll('.parent > div');
注意： 選擇的元素querySelectorAll()類似于陣列，可以應用陣列方法。注意：選擇一種元素使用querySelector()方法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/420414.html
標籤：
上一篇：在“推送”到陣列但不呼叫“Promise.all”期間為承諾列印的日志訊息
下一篇：.env檔案變數無法讀取