javascript day02

DOM基础

HTML Dom是关于如何增，删，改，查HTML元素的标准。
节点：
节点树就是由一个个节点组成

获取节点

innerHTML可以改变元素的内容
<div id="test">
<!--hello world-->
</div>
<script>
    var test = document.getElementById("test");
通过id名获取
    test.innerHTML="hello world";
    console.log(test);
</script>
<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>
<script>
    /*通过class去获取*/
    var lis = document.getElementsByClassName("item");
    /*通过标签名去获取*/
    var tags = document.getElementsByTagName("li");
    /*通过选择器获取*/
    var qs = document.querySelectorAll(".item");
    /*
    * 改变样式的语法
    * object.style.color=value;
    * */
    qs[0].style.backgroundColor="pink";
</script>

节点类型

   * nodeType==1元素节点
   * nodeType==2属性节点
   * nodeType==3文本节点

添加节点

<div id="parent">
    <p id="one">hello world</p>
    <p id="two">hello world</p>

</div>
<script>
    /*
    在父元素的目标元素之前插入一个元素
    parentNode.insertBefore(newElement,targetElement)
    * */
    var h = document.createElement("h1");
    var txt = document.createTextNode("我是老大");
    h.appendChild(txt);

    /*获取parent*/
    var parent = document.getElementById("parent");
    var one = document.getElementById("one");
    var two = document.getElementById("two");


    parent.insertBefore(h,one);


    var p = document.createElement("p");
    var txt2 = document.createTextNode("我是老三");
    p.appendChild(txt2);

    parent.insertBefore(p,two);
</script>

删除节点

<div id="parent">
    <p id="child">hello world</p>
</div>
<script>
    /*
    * parentNode.removeChild(childNode)
    * */
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    parent.removeChild(child)
</script>

修改节点

<div id="parent">
    <p id="child">hello world</p>
    <!--<h1>修改</h1>-->
</div>
<script>
    /*
    parentNode.replaceChild(newElment,targetElement)
    * */
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");

    var h = document.createElement("h1");
    var txt = document.createTextNode("修改");
    h.appendChild(txt);

    parent.replaceChild(h,child)
</script>

input输入框背景色改变

<input type="text" id="input"/>
<script>
    var input = document.getElementById("input");
    input.onfocus=function(){
        this.style.background="red";
    };
    input.onblur=function(){
        this.style.background="pink"
    }
</script>

鼠标点击、进入、退出，背景色的改变

//css
    <style>
        div{
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
//HTML
<div id="test">

</div>
<script>
    var test = document.getElementById("test");
    test.onmouseover=function(){
        this.style.background="pink"
    };
    test.onmouseout=function(){
        this.style.background="green"
    }
</script>

条件判断

1.鼠标点击时如果背景是红，变为粉红，如果背景是粉红，变为红
//css
    <style>
        div{
            width:100px;
            height:100px;
        }
    </style>

//HTML
<div id="test" style="background: red">
</div>
<script>
    var test = document.getElementById("test");
    test.onclick=function(){
        var color = this.style.background;
        if(color=="red"){
            this.style.background="pink"
        }else{
            this.style.background="red"
        }
    }
</script>
*  背景色用内联样式，不然会出点小问题

2.a>=18时为成年人，其他则为未成年人
<script>
    var a=3;
    if(a>=18){
        alert("成年人")
    }else{
        alert("未成年")
    }
</script>

3.当sex为男时，弹出"可以逛xxx网站"，当sex为女时，弹出"不欢迎逛xxx网站,可以找许峰"，当sex为其他时，弹出"自己想办法"
<script>
    var sex="男";
    if(sex=="男"){
        alert("可以逛xxx网站")
    }else if(sex=="女"){
        alert("不欢迎逛xxx网站,可以找许峰")
    }else{
        alert("自己想办法")
    }
</script>

4.当sex为女时，弹出"可以生娃"，当sex为男时，弹出"喜欢看片"，当sex为其它时，弹出"自己玩"
<script>
    var sex="女";
    switch (sex){
        case "男":
            alert("喜欢看片");
            break;
        case "女":
            alert("可以生娃");
            break;
        default :
            alert("自己玩")
    }
</script>

循环

1.当a<5时，依次弹出小于的值
<script>
    var a=1;
    while(a<5){
        alert(a);
        a++;
    }
</script>

2.当i<5时，在控制台可以看到小于的值
<script>
    for(var i=0;i<5;i++){
        console.log(i);
    }
</script>

3.li中，所有奇数行为红色，所有偶数行为粉红色
<ul>
    <li class="item">0</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
</ul>
<script>
    var lis = document.getElementsByClassName("item");
    for(var i=0;i<lis.length;i++){
        if(i%2==0){
            lis[i].style.background="pink"
        }else{
            lis[i].style.background="red"
        }
    }
</script>

4.可以在控制台看到arr中的数字和yu中的内容依次排列
<script>
    var arr = [1,2,3,4,5,6];
   for(var key in arr){
     console.log(arr[key])
  }
    var yu = {
        name:"yuchangshuai",
        age:24,
        sex:"男"
    };
    for(var k in yu){
        console.log(yu[k])
    }
</script>