如何在一个元素下取子元素.而不取到子元素内元素.

Question

例如:

<div id="div1">
    <div>
        <div>
        </div>
    </div>
    <div>
        <div>
        </div>
    </div>
</div>

在这种情况下我只想取到#div1下的子元素的div,不包括这些子div的更子级的div,该如何做到.

Answer 1

document.getElementById('div1').children

Answer 2

可以用jQuery么？ $('#div1>div')

Answer 3

$('#div1>div')获取直接的子元素 $('#div1 div')获取所有后代元素

Answer 4

javascript    var children = document.getElementById('div1').childNodes,
        output   = []

    for (var i = 0, ii = children.length; i < ii; i++) {
        output.push(children[i].nodeName)
    }

    console.log(output)

Answer 5

document.querySelectorAll("#div1>div")

Answer 6

4楼的方法兼容，但是需要加上nodeType的判断，不然文本结点（TextNode）也会被查出来，如：

var $d = document.getElementById('div1'),
    $childs = $d.childNodes,
    results = [];

for(var i = 0,len = $childs.length; i < len; i++){
    if($childs[i].nodeType === 1){
        results.push($childs[i]);
    }
}

console.log(results);

当然也可以使用nextSibling进行查找 :)