javascript day03

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执行点击事件*/
        btns[i].onclick = function(){
            /*4.把正在执行点击事件的btn隐藏*/
            this.parentNode.style.visibility = "hidden";
        }
    }
</script>

childNodes 所有类型的节点既有元素节点,也有文本节点

<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只会读取元素节点

<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获取的一个子节点(不会识别节点的类型)

<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(获取任意类型的节点)

<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一个点击事件,让对应的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"
            }
            /*让对应的显示就行*/
            contents[this.value].style.display="block";
        }
    }
</script>