parentNode，獲取元素的父級

<ul>
    <li id="test">hello world</li>
</ul>
<script>
    var test = document.getElementById("test");
    test.onclick=function(){
        console.log(this.parentNode)
    }
</script>

小效果

<ul>
    <li>hello world1 <button class="btn">隱藏</button></li>
    <li>hello world2 <button class="btn">隱藏</button></li>
    <li>hello world3 <button class="btn">隱藏</button></li>
    <li>hello world4 <button class="btn">隱藏</button></li>
</ul>
<script>
    /*1.獲取所有的btn*/
    var btns = document.getElementsByClassName("btn");
    /*2.對btns進行遍歷*/
    for(var i =0;i<btns.length;i++){
        /*3.對每一個btn執(zhí)行點擊事件*/
        btns[i].onclick = function(){
            /*4.把正在執(zhí)行點擊事件的btn隱藏*/
            this.parentNode.style.visibility = "hidden";
        }
    }
</script>

childNodes 所有類型的節(jié)點既有元素節(jié)點,也有文本節(jié)點

<ul id="test">
    hello world
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var test = document.getElementById("test");
    var childs = test.childNodes;
    for(var i =0;i<childs.length;i++){
       if(childs[i].nodeType == 1){
           childs[i].style.background="red";
       }
    }
</script>

children只會讀取元素節(jié)點

<ul id="test">
    hello world
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var test = document.getElementById("test");
    var childs = test.children;
   alert(childs.length)
</script>

firstChild獲取的一個子節(jié)點(不會識別節(jié)點的類型)

<ul id="test">
    hello world
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var test = document.getElementById("test");
    var first = test.firstChild;
    alert(first);
</script>

firstElementChild的兼容處理

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var test = document.getElementById("test");
    if(test.firstElementChild){
        //ie9+加其他瀏覽器
        test.firstElementChild.style.background="pink"
    }else{
        //ie8
        test.firstChild.style.background="red";
    }
</script>

nextSibling(獲取任意類型的節(jié)點)

<ul id="test">
    <li id="one">1</li>
    <li id="two">2</li>
    <li>3</li>
</ul>
<script>
    var two = document.getElementById("two");
    var sibling =two.previousElementSibling;
    console.log(sibling)
</script>

offsetParent獲取給了定位元素的父級

//css
    <style>
        #parent{
            position: relative;
        }
        #child{
            margin-left: 200px;
            width:100px;
            height:100px;
            left:200px;
            top:100px;
            position: absolute;
            background-color: red;
        }
    </style>

//html
<div id="parent">
    <div id="child">

    </div>
</div>
<script>
    /*offsetParent獲取給了定位元素的父級*/
    var child = document.getElementById("child");
    alert(child.offsetWidth);
    console.log(child.offsetParent)
</script>

改變元素的樣式

//css
    <style>
        #parent{
            position: relative;
        }
        #child{
            margin-left: 200px;
            width:100px;
            height:100px;
            left:200px;
            top:100px;
            position: absolute;
            background-color: red;
        }
    </style>

//html
<div id="parent">
    <div id="child">

    </div>
</div>
<script>
    var child = document.getElementById("child");
    child.setAttribute("style","display:none")
</script>

小效果

<input type="text" id="input" value="hello world"/>
<button id="btn">點擊</button>
<script>
    var input = document.getElementById("input");
    var btn = document.getElementById("btn");
    btn.onclick=function(){
//        input.value="hello world"
        input.removeAttribute("value")
    }
</script>

小效果

//css
<style>
        ul{list-style: none}
        *{margin:0;padding:0}
        .table{
            text-align: center;
            margin-top: 100px;
            margin-left:auto;
            margin-right: auto;
            width:350px;
            border:1px solid #333;
        }
        .tab_wrap{
            border-top: 1px solid #333;
            position: relative;
            height:300px;
        }
        .tab_wrap>div{
            position: absolute;
            height:100%;
            width:100%;
        }
        .tab{
            line-height: 50px;
        }
        .tab>li{
            display: inline-block;
            cursor: pointer;
        }
        input{
            margin-top: 15px;
            width:250px;
            height:40px;
        }
        .code{
            display: none;
        }
        .tab>li:first-child{
            color:orangered;
        }
    </style>

<div class="table">
    <ul class="tab">
        <li class="tab_menu">賬號登錄</li>
        <li class="tab_menu">掃碼登錄</li>
    </ul>
    <div class="tab_wrap">
        <div class="account tab_content">
            <p><input type="text" placeholder="請輸入手機號"/></p>
            <p><input type="password" placeholder="請輸入密碼"/></p>
            <p><input type="submit" placeholder="請輸入密碼"/></p>
        </div>
        <div class="code tab_content">
            ![](images/01.png)
        </div>
    </div>
</div>
<script>
    /*獲取兩個被點擊的li*/
    var tabs = document.getElementsByClassName("tab_menu");
    /*獲取兩個顯示的div*/
    var contents = document.getElementsByClassName("tab_content");
    for(var i=0;i<tabs.length;i++){
        tabs[i].value = i;
        /*給每個li一個點擊事件,讓對應(yīng)的div顯示*/
        tabs[i].onclick=function(){
            /*讓所有的li的字體的顏色為#333*/
            var siblings = document.getElementsByClassName("tab")[0].children;
            for(var k =0;k<siblings.length;k++){
                siblings[k].style.color="#333"
            }
            /*讓正在被點擊的字體的顏色為orangered*/
            this.style.color="orangered";
            /*讓所有的content隱藏*/
            for(var j=0;j<contents.length;j++){
                contents[j].style.display="none"
            }
            /*讓對應(yīng)的顯示就行*/
            contents[this.value].style.display="block";
        }
    }
</script>