4.DOM 事件等

1.输入框

1-1 onchange

1-11 
    <input type="text" id="input">
    <script>
        // 当输入框的内容发生改变的时候,触发
        var input=document.getElementById("input");
        input.onchange=function(){
            console.log("hello world")
        }
        // onresize窗口大小改变的时候,会触发
        window.onresize=function(){
            console.log(1)
        }
        // 窗口滚动的时候会触发
        window.onscroll=function(){
            console.log(2)
        }
    </script>
1-12 submit

1-2 onfoucs onblur（获取焦点 遗失焦点）

    <input id="app" type="text">
    <script>
        // onfocus 获取焦点
        // onblur 遗失焦点
        var app=document.getElementById("app");
        app.onfocus=function(){
            this.style.backgroundColor="green"
        }
        app.onblur=function(){
            this.style.backgroundColor="yellow"
        }
    </script>

2.鼠标

2-1 mouse

    <p id="p">hello world</p>
    <script>
        var p=document.getElementById("p");
        p.onmouseover=function(){
            this.style.backgroundColor="red"
        }
        p.onmouseout=function(){
            this.style.backgroundColor="blue"
        }
    </script>

3.节点事件

3-1 节点获取

 <!--1 元素节点
    3 文本节点
    2 属性节点 -->
    <!-- getAttributeNode() 获取节点属性
    firstChild获取第一个子节点 -->
    <p id="app">hello world</p>
    <script>
        var app=document.getElementById("app");
        var id=app.getAttributeNode("id");
        console.log(app.nodeType)//1
        console.log(app.firstChild.nodeType)//3
        console.log(id.nodeType)//2
    </script>

3-2获取元素节点

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    <script>
        var app=document.getElementById("app");
        var childs=app.childNodes;
        var arr=[];
        for(var i=0;i<childs.length;i++){
            if(childs[i].nodeType ==1){
                arr.push(childs[i])
            }
        }
        console.log(arr);//==1,li li li li
                                        //==3,text*5
    </script>

3-3 获取全部元素

    <ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    <script>
        var app=document.getElementById("app");
        var childs=app.childNodes;
        // var children=app.children;
        console.log(childs)//全部元素text li text li text li text li text
        // console.log(children)//元素节点 li li li li

3-4 增加节点元素

    <div id="app"></div>
    <script>
        var app=document.getElementById("app");
        var p=document.createElement("p");
        var txt =document.createTextNode("hello world");
        p.appendChild(txt);
        app.appendChild(p);
    </script>

3-5 修改节点元素

    <ul id="app">
        <li>html</li>
        <li id="js">javascript</li>
    </ul>
    <script>
        // 给元素添加内容innerHTML 
        /* 
        parentNode.insertBefore(newNode,targetNode)
         */
        var app=document.getElementById("app");
        var js=document.getElementById("js") ;
        var li=document.createElement("li");
        li.innerHTML="vue";
        app.insertBefore(li,js);
    </script>

3-6 移除节点元素

    <div id="app">
        <div id="child">child</div>
    </div>
    <script>
                 // removeChild()让从元素DOM树,渲染树上都消失
        var app=document.getElementById("app");
        var child =document.getElementById("child");
        app.removeChild(child);
    </script>

3-7 替换节点元素

<div id="app">
        <div id="child">child</div>
        <!-- <p id="p">hello world</p> -->
    </div>
    <!-- 替换某个元素
    replaceChild(newNode,targetNode) -->
    <script>
        var app=document.getElementById("app");
        var child =document.getElementById("child");
        var p=document.createElement("p");
        p.innerHTML="hello world";
        app.replaceChild(p,child);
    </script>

3-8 克隆节点

    <div id="app">
        <div class="one">
            hello world
        </div>
    </div>
    <script>
        var app=document.getElementById("app");
        var one=document.getElementsByClassName("one")[0];
        var test=one.cloneNode(true);
        console.log(test);
        app.appendChild(test);
    </script>

4 点击事件

4-1 点击

index.js
window.onload=function(){
    var p=document.getElementById("p");
    p.onclick=function(){
        console.log("hello world")
    }
}
html
<p id="p">hello world</p>

1-11 onchange

    <input type="text" id="input">
    <script>
        // 当输入框的内容发生改变的时候,触发
        var input=document.getElementById("input");
        input.onchange=function(){
            console.log("hello world")
        }
        // onresize窗口大小改变的时候,会触发
        window.onresize=function(){
            console.log(1)
        }
        // 窗口滚动的时候会触发
        window.onscroll=function(){
            console.log(2)
        }
    </script>

1-12 submit

                <form id="form" onsubmit="alert(1)">
        <p>用户名：<input type="text" name="user"></p>
        <p>密码：<input type="password" name="pwd"></p>
        <input type="submit" id="input">//点击提交，出现网页内容为1

4-2 onkey

    <input type="text" id="input">
    <script>
        var input=document.getElementById("input");
        input.onkeydown=function(event){
            console.log(event.keyCode)
            if(event.keyCode==82){
                console.log("放下")
            }
        }
        input.onkeypress=function(){
            console.log("press")
        }
        input.onkeyup=function(){
            console.log("放开")
        }
    </script>  //输入r依次出现82 放下 press 放开

1-14 value

    <input type="text" id="input" value="hello world">
    <script>
        // element.value
        var input=document.getElementById("input");
        input.onkeyup=function(event){
            if(event.keyCode==13){
                console.log(this.value)
            }
        }
    </script>

1-15 文本字数限制

    <p>还可以输入<em id="em" style="color: aqua;">0</em> /150</p>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <script>
        var tex=document.getElementById("txt");
        var em=document.getElementById("em");
        txt.onkeydown=function(){
            var length=this.value.length;
            if(length<=30){
                em.innerHTML=this.value.length;
            }else{
                alert("只能输入30个字符")
            }   
        }
    </script>//当字数超过30出现页面"只能输入30个字符"

1-16 全局列表

var a=10;
        function go(){
            console.log("hello world")
        }
        // const window={
        //     a:10,
        //     go:function(){
        //         console.log("hello world")
        //     }
        // }
        // console.log(window.a);
        // window.go();
        console.log(a);
        go();//10  hello world

1-17 删除按钮

    <ul>
        <li>html <button>删除</button></li>
        <li>css <button>删除</button></li>
        <li>javascript <button>删除</button></li>
    </ul>
    <script>
         // parentNode --元素的父节点
        var btns=document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                var temp=window.confirm("确定吗");
                if(temp){
                    this.parentNode.style.display="none"
                }
            }
        }
    </script>

1-18 setTimeout

                // 超时调用  间隔一段时间触发，只会触发一次
        setTimeout(function(){
            console.log("hello world")
        },2000)
        // 间歇调用  每隔一段时间，就会触发
        setInterval(function(){
            console.log("1")
        },1000)

1-19 递归

        function show(){
            setTimeout (function(){
                console.log(1)
                show();
            },1000)
        }
        show()

1-20 setInterval

         <button id="btn">停止定时器</button>
    <script>
                /* 设置定时器的时候,会在window下挂载一个属性 */
        /* 
        clearInterval()  清除定时器
         */
        var btn =document.getElementById("btn");
        var temp =setInterval(function(){
            console.log("2")
        },1000)
        btn.onclick=function(){
            clearInterval(temp);
        }
    </script>