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

Question

例如:

<p id="p1">
    <p>
        <p>
        </p>
    </p>
    <p>
        <p>
        </p>
    </p>
</p>

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

Answer 1

document.getElementById('p1').children

Answer 2

可以用jQuery么？ $('#p1>p')

Answer 3

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

Answer 4

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

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

    console.log(output)

Answer 5

document.querySelectorAll("#p1>p")

Answer 6

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

var $d = document.getElementById('p1'),
    $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进行查找 :)