JavaScript parentNode 컨테이너 div를 건너 뛰는 중

Question

간단한 HTML을 사용하고 페이지가로드 된 div가 해당 div 컨테이너의 속성을 사용하게하려고합니다.

document.getElementById("menuButtonSub").parentNode.id 

그것은 "의 도구 모음"보다는 "menuButton"를 반환 :이 자바 스크립트를 실행하면

<div id=menuBar> 
    <div id=menuButton> 
    <div id=menuButtonSub> 
    </div> 
    </div> 
</div> 

다음은 HTML의 예입니다. 왜 그런 단서가 있니? 아직도 배우지 만, 대부분의 것들은 지금까지 부드럽습니다.

#menuBar { 
    width:100%; 
    min-height:50px; 
    background-color:#808080; 
} 
.menuButton { 
    color:#ffffff; 
    font-size:20px; 
    min-height: 50px; 
    text-align:center; 
    vertical-align:middle; 
    line-height:50px; 
    float:left; 
} 
.menuButton:hover { 
    color: #1a448f; 
    background-color: #ffffff; 
} 
.menuButtonSub { 
    background-color:red; 
    color:#ffffff; 
    min-height:50px; 
    line-height:50px; 
    text-align:center; 
    line-height:50px; 
    font-size:20px; 
    margin:0; 
    padding:0; 
} 

Answer 1

나는 다음과 같은 코드를 사용하여이 문제를 재현 할 수 있었다 :

여기에 관련 CSS입니다. HTML에 오류/오타가있을 가능성이 큽니다 (menuBar div에 태그 끝 문자가 없습니다). 검사기를 통해 실행 해보십시오.

document.body.innerHTML += document.getElementById("menuButtonSub").parentNode.id;

<div id='menuBar' 
 
    <div id='menuButton'> 
 
    <div id='menuButtonSub'> 
 
    </div> 
 
    </div> 
 
</div>