day24总结：原生js操作（2019-05-20）

1. DOM

DOM（Document Object Modle）：文本对象模型

1）document对象

js会将整个网页转换成一个js对象叫document；如果想要通过js获取网页中的内容，必须通过document来获取（这个对象系统自动创建，程序员只需要使用）

2）document结构

是一个树结构，树下面就是各种节点（节点即Node，是js中Element对象，指向的是html中的标签）；Element对象有哪些属性，就看Element对应的标签有哪些html属性（节点相当于标签）

2. DOM节点操作

1）获取节点

1.1）直接获取

通过id值来获取节点：
document.getElementById(id属性值)：返回的是标签对应的节点对象
补充：HTML标签在js中全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性：innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本

        <p id="p1" class="c1">我是段落</p>
        <img class="c1" src="img/luffy.jpg"/>
        <div id="div1">
            我是div
            <p>我是段落2</p>
        </div>
        
        <div id="div2">
            <h1 id="h1">我是标题1</h1>
            <h1 id="h2">我是标题2</h1>
        </div>

pNode = document.getElementById('p1')
console.log(pNode, typeof(pNode), pNode.id, pNode.innerHTML, pNode.innerText)

divNode = document.getElementById('div1')
console.log('html:',divNode.innerHTML, typeof(divNode.innerHTML))
console.log('text:', divNode.innerText)

通过class值获取节点：
document.getElementsByClassName(class属性值)：返回一个数组

c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
//根据下标获取元素
imgNode = c1NodeArray[1]
imgNode.title = '路飞'

通过标签名获取节点：
document.getElementsByTagName(标签名)：返回一个数组

pNodes = document.getElementsByTagName('p')
console.log(pNodes)

通过name属性获取节点
document.getElementsByName(name属性值)：已经被淘汰，不常用，与TagName相区分

1.2）获取父节点

节点.parentElement：获取指定节点对应的父节点

bodyNode = pNode.parentElement
console.log(bodyNode)

1.3）获取子节点

获取所有子节点：
节点.children：获取指定节点所有的子节点(不会获取孙子节点)

children1 = bodyNode.children
console.log(children1)

获取第一个子节点：
节点.firstElementChild

 firstNode = bodyNode.firstElementChild
 console.log(firstNode)

获取最后一个子节点：
节点.lastElementChild

 lastNode = bodyNode.lastElementChild
 console.log(lastNode)

2）创建节点

document.createElement（标签名）：创建指定标签对象的节点对象
注意：创建的节点在没有添加在网页中的时候是不会显示的，并且只能使用一次，如果重复添加则只有最后一次有效

inputNode = document.createElement('input')

3）添加节点

节点1.appendChild（节点2）：在节点1的最后添加节点2
节点1.insertBefore（节点2，节点3）：在节点1中的节点3前插入节点2

div2Node = document.getElementById('div2')
            
// 节点1.appendChild(节点2) - 在节点1的最后添加节点2
div2Node.appendChild(inputNode)
            
// 节点1.insertBefore(节点2, 节点3) - 在节点1中的节点3前插入节点2
div2Node.insertBefore(inputNode, div2Node.firstElementChild)

4）拷贝节点

节点.cloneNode（）：复制指定节点，产生一个新的节点

inputNode2 = inputNode.cloneNode()
nputNode2.placeholder = '新节点'
div2Node.appendChild(inputNode2)

5）删除节点

节点1.removeChild（节点2）：删除节点1中的节点2

div2Node.removeChild(div2Node.firstElementChild)

节点.remove（）：删除指定节点

div2Node.remove()

3. BOM操作

1）什么是BOM

BOM（Browser Object Modle）浏览器对象模型
js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
在使用的时候，window可以省略

    num = 10    // 相当于window.num = 10
    console.log(window.num, num)
    
    function func1(){
        console.log('我是函数')
    }
    window.func1() // func1()

2）window基本操作

2.1）打开新的窗口

open（url）：在新的窗口中打开新页面

new_window = window.open('https://www.baidu.com')
console.log(new_window)

open（url，name属性，窗口大小）：打开新的窗口，同时设置窗口的宽度和高度，name默认空不用设置

new_window2 = open('https://www.baidu.com','','width=400,height=300')

2.2）关闭窗口

窗口对象.close（）

    //关闭当前窗口
    window.close() / close()  
    
    //关闭其他窗口
    new_window2.close()

2.3）移动当前窗口

窗口对象.moveTo（）

new_window2.moveTo(100, 100)

2.4）获取窗口的宽度和高度

innerWidth / innerHeight：获取浏览器能够显示内容的部分的宽高

console.log(new_window2.innerWidth, new_window2.innerHeight)

outerWidth / outerHeight：获取整个浏览器的宽高

console.log(new_window2.outerWidth, new_window2.outerHeight)

3）弹框

alert：只有确定按钮和提示信息的弹框

alert('提示信息!')

confirm：一个提示信息、确定和取消按钮的弹框；根据返回值是true还是false来判断选择的是确定还是取消

result = confirm('是否删除?')
console.log(result)

prompt：一个提示信息、一个输入框、确定和取消按钮的弹框；根据返回值是否是null来判断点击的是取消还是确定

result = prompt('提示信息','输入框中默认值')
console.log(result)

4）定时

4.1）开启定时

setTimeout（函数，定时时间，实参列表）：指定时间后调用指定函数，并且传入指定的参数，返回一个定时器对象
函数：可以是匿名函数，也可以是普通函数的函数名
定时时间：单位是毫秒（1 毫秒 = 0.001 秒）
实参列表：给前面的函数提供参数（可以没有）

    t1 = setTimeout(function(){
        console.log('时间到！')
    }, 1000)
    
    t2 = setTimeout(function(name, age){
        console.log(name, age)
    }, 3000, '小明', 18)
    
    
    //t1和t3的功能一样
    function timeFunc(){
        console.log('时间到了')
    }
    t3 = setTimeout(timeFunc, 1000)

setInterval（函数，定时时间，参数列表）：每隔指定的时间调用一次函数

    num = 1
    t4 = setInterval(function(){
        num ++
        console.log('~~~~:',num)
        if(num == 10){
            clearInterval(t4)
        }
    }, 2000)

4.2）清除定时

clearTimeout（定时对象）：clearTimeout(t2)
clearInterval（定时对象）：clearInterval(t4)
练习：实现5s后自动跳转到百度页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1">5秒后自动跳转</p>
        
        <script type="text/javascript">
            time = 5
            pNode = document.getElementById('p1')
            t1 = setInterval(function(){
                time--
                if(time == 0){
                    open('https://www.baidu.com')
                    clearInterval(t1)
                }
                pNode.innerText = time+'秒后自动跳转'
                
            }, 1000)
        </script>
    </body>
</html>

4. 事件

js是事件驱动语言

1）事件三要素

事件源、事件、事件驱动程序
事件源发生某个事件就做什么事（事件驱动程序）

2）事件的绑定

选哪种方式就看后面需不需要对事件源进行操作

2.1）方式一：在标签内部给标签的事件属性赋值（不推荐使用）

注意：这种方式绑定的时候，this指向的是window

        <button onclick="alert('你好！')">按钮1</button>
        <button id="btn1" onclick="btnClick()">删除1</button>
        <button id="btn2" onclick="btnClick()">删除2</button>

        function btnClick(){
            console.log(this)
            result = confirm('是否删除?')
            if(result){
                document.getElementById('btn1').remove()
            }
        }

2.2）方式二：通过给节点对象的事件属性赋值来绑定（推荐使用）

注意：这种方式绑定的时候，this指向的是事件源

        <button id="btn3">删除</button>
        <button class="btn1">删除3</button>
        <button class="btn1">删除4</button>
        <button class="btn1">删除5</button>

        btnNode = document.getElementById('btn3')
        // 给事件属性赋函数名
        btnNode.onclick = btnClick     
        
        //获取所有class值是btn1的标签对应的节点
        btn1Nodes = document.getElementsByClassName('btn1')
        for(x=0;x<btn1Nodes.length;x++){
            btn1Node = btn1Nodes[x]
            // 给事件属性赋匿名函数
            btn1Node.onclick = function(){
                console.log(this)
                result = confirm('是否删除?')
                if(result){
                    this.remove()
                }
            }
        }

2.3）方式三：通过addEventlistener方法进行绑定（推荐使用）

语法：
事件源节点.addEventListener(事件名称,事件驱动程序)
说明：
事件名称 - 事件属性名去掉on
事件驱动程序 - 事件发生后需要调用的函数
注意：
this是事件源
可以给同一个节点的同一个事件绑定不同的事件驱动程序

    <button id="btn4">按钮</button>

    btnNode4 = document.getElementById('btn4')
    btnNode4.addEventListener('click', function(){
        console.log(this)
        alert('你好！')
    })
    btnNode4.addEventListener('click', function(){
        this.style.color = 'red'
    })

3）常见事件类型

3.1） onload事件

页面加载完成对应的事件（标签加载成功）
window.onload = 函数（window.可以省略）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //写在这儿的代码，在页面加载完成后才会执行
                pNode = document.getElementById('p1')
                console.log(pNode)
            }
        </script>
    </head>
    <body>
        <p id="p1">我是段落</p>
        <input type="" name="input1" id="input1" value="" />
        <input type="" name="input2" id="input2" value="" />
    </body>
</html>

3.2）鼠标事件

onmousedown：鼠标按钮按下事件；onmouseup：鼠标按钮松开事件；onclick：鼠标点击事件
onmouseover：鼠标悬停事件；onmouseout：鼠标离开事件
onmouseenter：鼠标移动到元素上时触发；onmouseleave：鼠标移开事件（类似于 onmouseover 和 onmouseout ，区别是 onmouseenter 和 onmouseleave 不支持冒泡）
onmousemove：鼠标在元素上移动（over （在上面）只触发一次，move （移动）只要移动就不停触发）

    pNode = document.getElementById('p1')

    //  鼠标点击事件
    pNode.onclick = function(evt){
        alert('p标签被点击')
        console.log(evt)
    }
    
    // 鼠标悬停事件
    pNode.onmouseover = function(){
        this.style = 'background-color:yellow'
    }
    
    // 鼠标离开事件
    pNode.onmouseout = function(){
        this.style = 'background-color:pink'
    }

3.3）键盘事件

键盘事件一般绑定在输入框对应的标签上
onkeypress：按下弹起
onkeydown：按键按下
onkeyup：按键弹起

    // 按下弹起
    inputNode = document.getElementById('input1')
    inputNode.onkeypress = function(evt){
        console.log('键盘按下弹起')
        console.log(evt)
    }
    
    // 按键按下 、按键弹起
    inputNode.onkeydown = function(){
        console.log('键盘按下')
    }
    inputNode.onkeyup = function(){
        console.log('键盘弹起')
    }

3.4）输入框事件

onchange：输入框中输入内容的时候按回车（补：onchange 属性可适用于 <input>, <textarea>, 和 <select> 元素，用于 <select> 元素中时，onchange表示切换选择）
oninput：正在输入

    //onchange - 输入框中的输入内容的时候按回车
    inputNode2 = document.getElementById('input2')
    inputNode2.onchange = function(evt){
        console.log('内容发生改变')
        console.log(evt)
    }
    
    //oninput - 正在输入
    inputNode2.oninput = function(){
        console.log('正在输入')
    }

4）事件对象

每个事件驱动程序中，都可以设置一个参数（一般用evt）来表示当前事件对象，不同类型的事件对应事件类型和事件属性不同

4.1）鼠标事件对象

clientX / clientY：鼠标的位置到浏览器左边和顶部的距离
offsetX / offsety：鼠标的位置到事件源标签左边和顶部的距离

4.2）键盘事件对象

key：哪个按键被按下

5）事件冒泡和捕获

事件冒泡：作用于子标签的事件会传递给父标签，如果希望作用于子标签的事件不传递给父标签，需要在子标签中对事件进行捕获
事件捕获：事件对象.stopPropagation()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <div id="div1"  style="background-color: yellow; width: 400px; height: 400px; margin-left: auto; margin-right: auto; ">
            <div id="div2" style="background-color: yellowgreen; width: 200px; height: 200px; margin-left: auto; margin-right: auto; ">
                <div id="div3" style="background-color: deepskyblue; width: 100px; height: 100px; margin-left: auto; margin-right: auto;">
                    
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            
            document.getElementById('div1').onclick = function(){
                alert('div1被点击')
            }
            
            document.getElementById('div2').onclick = function(evt){
                alert('div2被点击')
                
                evt.stopPropagation()
            }
            
            document.getElementById('div3').onclick = function(evt){
                alert('div3被点击')
                
                //阻止当前事件被传递给父标签
                evt.stopPropagation()
            }
            
        </script>
        
    </body>
</html>