原生js訪問各種節(jié)點，有更好的可以回復(fù)

標簽：

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id=div1>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

<script>

//查找子节点
    var div=document.getElementById('div1');
    var arr=[]
    function child(n){
        var n=n.childNodes;
        for(var i=0;i<n.length;i++){
            if(n[i].nodeType==1){
                arr.push(n[i])
            }
        }
    }
    child(div)
    console.log(arr)

    //查找兄弟节点
    var divlist=div.getElementsByTagName("div")[0];
    function next(n){
        var n=n.nextSibling;
        if(n.nodeType!=1){
            n=n.nextSibling
        }
        return n;
    }

    var y=next(divlist)
    console.log(y)

    //访问子节点的第一项
    function first(n){
        var n=n.firstChild;
        if(n.nodeType!=1){
            n=n.nextSibling;
        }
        return n
    }
    var x=first(div)
    console.log(x)

    //访问最后一个子节点

    function last(n){
        var n=n.lastChild;
        if(n.nodeType!=1){
            n=n.previousSibling;
        }
        return n
    }
    var las=last(div)
    console.log(las)
</script>

</body>
</html>

點擊查看更多內(nèi)容