您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

JavaScript 獲取父層 div 下特定子 div：getElementsByTagName 與 querySelector

編輯：程式設計綜合問答

需求

多組獨立外層 `div`，各含一內層 `div`。滑鼠進入外層時，僅操作**該外層下的內層 div** (顯示/改樣式)。

原生 JS 實現

<div class="outer" onmouseover="showInner(this)" onmouseout="hideInner(this)">
    外層內容
    <div class="inner">內層內容</div>
</div>

<script>
function showInner(outer) {
    // 取得該 outer 下第一個 class="inner" 的 div
    var inner = outer.querySelector('.inner'); // 推薦：支援任意選擇器
    // 或 var inner = outer.getElementsByClassName('inner')[0];
    // 或 var inner = outer.getElementsByTagName('div')[0]; // 僅適用結構固定
    inner.style.display = 'block';
    inner.style.backgroundColor = '#f60';
}
function hideInner(outer) {
    var inner = outer.querySelector('.inner');
    inner.style.display = 'none';
}
</script>

關鍵 API 比較

方法	回傳	動態性	選擇器支援
querySelector	Element (第一個)	靜態快照	完整 CSS 選擇器
querySelectorAll	NodeList (靜態)	靜態快照	完整 CSS 選擇器
getElementsByClassName	HTMLCollection (動態)	即時反映 DOM 變化	單一 class
getElementsByTagName	HTMLCollection (動態)	即時反映 DOM 變化	標籤名

現代最佳實踐

**事件委派**：外層容器綁定單一 `mouseover`/`mouseout`，用 `event.target.closest('.outer')` 判斷，效能更佳。

**CSS `:hover` 純樣式方案**：若僅需顯示/隱藏，**完全不需要 JS**：

.outer .inner { display: none; }
.outer:hover .inner { display: block; background: #f60; }

完整範例 (事件委派版)

document.getElementById('container').addEventListener('mouseover', e => {
    const outer = e.target.closest('.outer');
    if (outer) outer.querySelector('.inner').style.display = 'block';
});
document.getElementById('container').addEventListener('mouseout', e => {
    const outer = e.target.closest('.outer');
    if (outer) outer.querySelector('.inner').style.display = 'none';
});