Javascript獲取div的子節點

Question

HTML代碼：

<div id="section">
  <div id="title" onclick="hideBody()"></div>
  <div id="body"></div>
</div>

如何使用this.訪問id="body"元素this. ...？
例：
this.parent.child[1];

Answer 1

您可以使用nextElementSibling 。

例：

function hideBody(el) {
    'use strict';
    var sibling = el.nextElementSibling;
    console.log(sibling);

    sibling.style.visibility = 'hidden';
}

參見jsFiddle 。

為了回答有關子節點的原始問題，有一個childNodes屬性。 例如：

var children = document.getElementById('section').childNodes;

相對於“ this ”（顯示在hideBody函數中）：

function hideBody(el) {
    'use strict';
    var children = el.parentNode.childNodes;
    console.log(children);

    children[1].style.visibility = 'hidden';
}

Answer 2

我不確定在這里使用'this'是合適的，但是您當然可以傳遞事件並獲取點擊目標的ID：

http://jsfiddle.net/isherwood/6k7fc/

<div id="title" onclick="hideBody(event)"></div>

function hideBody(event) {
    var myId = event.target.id;
    var myEl = document.getElementById(myId);
    ... do stuff with myEl ...
}

Answer 3

要獲取div的子節點，請使用：

var childNodes = parent.childNodes;

要么

var { childNodes } = parent;