JavaScript父节点跳过容器div

我有一些简单的HTML，并希望一个div在页面加载后具有其容器div的属性。以下是HTML的一个示例：

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

它返回“菜单栏”而不是“菜单按钮”。有什么线索说明原因吗？仍在学习，但到目前为止，大多数事情都进展顺利

以下是相关CSS：

#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;
}

---

我能够用下面的代码重现这一点。您的HTML很可能有错误/输入错误（我在菜单栏div中缺少一个标记结束字符）。尝试通过验证器运行它

document.body.innerHTML+=document.getElementById（“menuButtonSub”）.parentNode.id
无法重新编程：。也许你的HTML/DOM不是你想象的那样。在这里工作：对我来说我知道我有点晚了，但这是我第一次创建自己的js提琴，所以我还是发布了：）奇怪。它当然可以在js fiddle上使用，但它仍然在VisualStudio中返回菜单栏。一定是什么我没看见的地方。无论如何，感谢您验证代码！看起来您只是混淆了选择器，假设在HTML中有ID，在CSS类中有ID。所以你的问题中可能没有反映出一些困惑。
#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;
}