Javascript获取div的子节点

时间:2013-10-21 17:05:48

标签: javascript

HTML code:

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

如何使用id="body" ...来访问this.元素? 实例:
this.parent.child[1];

3 个答案:

答案 0 :(得分: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';
}

答案 1 :(得分:0)

我不确定在这里使用'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 ...
}

答案 2 :(得分:0)

要获取div的子节点,请使用:

var childNodes = parent.childNodes;

var { childNodes } = parent;