1. 获取节点

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

1. 获取节点
//           1.1 直接获取
//           a) 通过id值来获取节点: document.getElementById(id属性值)  - 返回是标签对应的节点对象
//          补充: HTML标签在js全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性
//                innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本
            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)
            
//          divNode.innerText = "<a href='https://www.baidu.com'>我是超链接</a>"
//          divNode.innerHTML = "<a href='https://www.baidu.com'>我是超链接</a>"

            divNode.innerHTML = "<p id='p2'>我是段落3</p>"
            
            //b) 通过class值获取节点: document.getElementsByClassName(class属性值) - 返回一个数组
            c1NodeArray = document.getElementsByClassName('c1')
            console.log(c1NodeArray)
            //根据下标获取元素
            imgNode = c1NodeArray[1]
            imgNode.title = '路飞'
            
            //c) 通过标签名获取节点: document.getElementsByTagName(标签名) - 返回一个数组 
            pNodes = document.getElementsByTagName('p')
            console.log(pNodes)
             
            //d)通过name属性获取节点(被淘汰)： document.getElementsByName(name属性值)
            //document.getElementsByName()
            
            //1.2获取父节点
            // 节点.parentElement  - 获取指定节点对应的父节点
            bodyNode = pNode.parentElement
            console.log(bodyNode)
            
            //1.3获取子节点
            //a)获取所有子节点: 节点.children  - 获取自定节点所有的子节点(不会获取孙子节点)
            children1 = bodyNode.children
            console.log(children1)
            
            //b)获取第一个子节点: 节点.firstElementChild
             firstNode = bodyNode.firstElementChild
             console.log(firstNode)
             
             //c)获取最后一个子节点: 节点.lastElementChild
             lastNode = bodyNode.lastElementChild
             console.log(lastNode)  
             
            // 2.创建节点
            //document.createElement(标签名)  - 创建指定标签对象的节点对象
            //注意: 创建的节点在没有添加在网页中的时候是不会显示的
            inputNode = document.createElement('input')
            
            //3.添加节点
            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()
            inputNode2.placeholder = '新节点'
            div2Node.appendChild(inputNode2)
            
            //5.删除节点
            //a)节点1.removeChild(节点2)  -  删除节点1中的节点2
            div2Node.removeChild(div2Node.firstElementChild)
            
            //b)节点.remove() - 删除指定节点
            div2Node.remove()

2.DOM练习

<table id="t1" border="" cellspacing="" cellpadding="">
            <tr id="tr1">
                <td>11</td>
                <td>12</td>
                <td>13</td>
            </tr>
            <tr id="tr2">
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>
            <tr id="tr3">
                <td>31</td>
                <td>32</td>
                <td>33</td>
            </tr>
            
        </table>
        
        <!--要求:
            1)用js将table的背景颜色设置为随机颜色
            2)将第一列的文字颜色全部变成红色
            3)在最后插入一行表格，内容分别是 41，42，43
        -->
        <script type="text/javascript">
            /*
            //产生1-10的随机整数
            randomNum = parseInt(Math.random()*9+1)
            console.log(randomNum)
            
            //产生0-255的随机整数
            randomNum = parseInt(Math.random()*255)
            console.log(randomNum)
            */
            //1)用js将table的背景颜色设置为随机颜色
            //获取table节点
            tableNode = document.getElementById('t1')
            //产生随机颜色值
            red = parseInt(Math.random()*255)
            green = parseInt(Math.random()*255)
            blue = parseInt(Math.random()*255)
            //设置背景颜色属性
            tableNode.style.backgroundColor = 'rgba('+red+','+green+','+blue+','+'0.6)'
            
            //2)将第一列的文字颜色全部变成红色
            //拿所有的tr
            trNodes = document.getElementsByTagName('tr')
            console.log(trNodes)
            for(x in trNodes){
                console.log(x)
                if(x == 'length'){
                    break
                }
                //获取每个tr
                trNode = trNodes[x]
                //获取每一行的第一个td
                tdNode = trNode.firstElementChild
                //修改文字颜色
                //tdNode.style.color = 'red'
                tdNode.style = 'color:red; font-size:25px'
            }
            
            //3)在最后插入一行表格，内容分别是 41，42，43
            trNode = document.createElement('tr')
//          tdNode = document.createElement('td')
//          tdNode.innerText = '41'
//          trNode.appendChild(tdNode)
//          
//          tdNode = tdNode.cloneNode()
//          tdNode.innerText = '42'
//          trNode.appendChild(tdNode)
//          
//          tdNode = tdNode.cloneNode()
//          tdNode.innerText = '43'
//          trNode.appendChild(tdNode)
            for(x=1;x<=3;x++){
                tdNode = document.createElement('td')
                tdNode.innerText = '4'+x
                trNode.appendChild(tdNode)
            }
            
            tableNode.appendChild(trNode)

3.BOM操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM操作</title>
    </head>
    <body>
        <div id="" style="background-color: yellowgreen; height: 10000px;">
            
        </div>
    </body>
</html>

<script type="text/javascript">
    //1.什么是BOM
    //BOM(browser object model)浏览器对象模型
    //js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
    //在使用的时候，window可以省略
    num = 10    // 相当于window.num = 10
    console.log(window.num, num)
    
    function func1(){
        console.log('我是函数')
    }
    window.func1()
    
    //2.window基本操作
    //1) 打开新的窗口
    //open(url, name属性, 窗口大小 )
    //a）打开新的窗口: open(url) - 在新的窗口中打开新页面, 
    //new_window = window.open('https://www.baidu.com')
    //console.log(new_window)
    //b) 打开新的窗口, 同时设置窗口的宽度和高度
    //new_window2 = open('https://www.baidu.com','','width=400,height=300')
    
    //2)关闭窗口
    //窗口对象.close()
    //window.close() / close()  - 关闭当前窗口
    //close()
    
    //关闭其他窗口
    //new_window2.close()
    
    //3)移动当前窗口
    //new_window2.moveTo(100, 100)
    
    //4)获取窗口的宽度和高度
    // innerWidth/innerHeight  - 获取浏览器能够显示内容的部分的宽高
    //console.log(new_window2.innerWidth, new_window2.innerHeight)
    // outerWidth/outerHeight - 整个浏览器的宽高
    //console.log(new_window2.outerWidth, new_window2.outerHeight)  
    
    //3.弹框
    //1) 只有确定按钮再加提示信息的弹框
    alert('提示信息!')
    
    //2)一个提示信息，再加确定和取消按钮；根据返回值是true还是false来判断选择是确定还是取消
    result = confirm('是否删除?')
    console.log(result)
    
    //3)一个提示信息，再加一个输入框和取消确定按钮；根据返回值是否是null来判断点击的是取消还是确定
    result = prompt('提示信息','输入框中默认值')
    console.log(result)
    
</script>

4.定时事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

<script type="text/javascript">
    //1. 开启定时
    /*
     1)setTimeout(函数, 定时时间, 实参列表) - 指定时间后调用指定函数，并且传入指定的参数; 返回一个定时器对象
     函数 - 可以是匿名函数，也可以是普通函数的函数名
     定时时间 - 单位是毫秒
     实参列表 - 函数提供参数
     */
    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)
    
    /*
     2)setInterval(函数,定时时间，参数列表) - 每隔指定的时间调用一次函数
     */
    num = 1
    t4 = setInterval(function(){
        num ++
        console.log('~~~~:',num)
        if(num == 10){
            clearInterval(t4)
        }
    }, 2000)
    
    
    // 2.清除定时
    //clearTimeout(定时对象)
    clearTimeout(t2)
    
    //clearInterval(定时对象)
    
    //练习: 实现5s后自动跳转到百度页面
    
    
</script>

5.自动跳转

<!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>

6.事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--事件绑定方式1（不推荐使用）-->
        <button onclick="alert('你好！')">按钮1</button>
        <button id="btn1" onclick="btnClick()">删除1</button>
        <button id="btn2" onclick="btnClick()">删除2</button>
        <br /><br />
        
        <!--事件绑定方式2（推荐使用）-->
        <button id="btn3">删除</button>
        <button class="btn1">删除3</button>
        <button class="btn1">删除4</button>
        <button class="btn1">删除5</button>
        <br /><br />
        
        <!--事件绑定方式3（推荐使用）-->
        <button id="btn4">按钮</button>
        
    </body>
</html>

<script type="text/javascript">
    // js是事件驱动语言
    // 1.事件三要素: 事件源、事件、事件驱动程序
    // 事件源发送某个事件就做什么事情(事件驱动程序)
    // 2.事件的绑定
    // 1) 在标签内部给标签的事件属性赋值
    // 注意: 这种方式绑定的时候，this指向的是window
    function btnClick(){
        console.log(this)
        result = confirm('是否删除?')
        if(result){
            document.getElementById('btn1').remove()
        }
    }
    
    // 2) 通过给节点对象的事件属性赋值来绑定
    // 注意: 这种方式绑定的时候，this指向的是事件源
    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()
            }
        }
    }
    
    // 3)通过addEventListener方法进行绑定
    /*
     a.语法
     事件源节点.addEventListener(事件名称,事件驱动程序)
     b.说明
     事件名称 - 事件属性名去掉on
     事件驱动程序 - 事件发生后需要调用的函数
     c.注意
     this是事件源
     可以给同一个节点的同一个事件绑定不同的事件驱动程序
    */
    btnNode4 = document.getElementById('btn4')
    btnNode4.addEventListener('click', function(){
        console.log(this)
        alert('你好！')
    })
    btnNode4.addEventListener('click', function(){
        this.style.color = 'red'
    })
    

</script>

7.常见事件类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //1.onload事件 - 页面加载完成对应的事件(标签加载成功)
            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>

<script type="text/javascript">
    //2.鼠标事件
    pNode = document.getElementById('p1')
    // 1)onclick - 鼠标点击事件
    pNode.onclick = function(evt){
        alert('p标签被点击')
        console.log(evt)
    }
    
    //2)onmouseover - 鼠标悬停事件
    pNode.onmouseover = function(){
        //alert('鼠标移动到标签上')
        this.style = 'background-color:yellow'
    }
    
    //3) onmouseout - 鼠标离开事件
    pNode.onmouseout = function(){
        this.style = 'background-color:pink'
    }
    
    //3.键盘事件
    //键盘事件一般绑定在输入框对应的标签上
    //1)onkeypress - 按下弹起
    inputNode = document.getElementById('input1')
    inputNode.onkeypress = function(evt){
        console.log('键盘按下弹起')
        console.log(evt)
    }
    
    //2)onkeydown - 按键按下 、 onkeyup - 按键弹起
    inputNode.onkeydown = function(){
        console.log('键盘按下')
    }
    inputNode.onkeyup = function(){
        console.log('键盘弹起')
    }
    
    //4.输入框事件
    //onchange - 输入框中的输入内容的时候按回车
    inputNode2 = document.getElementById('input2')
    inputNode2.onchange = function(evt){
        console.log('内容发生改变')
        console.log(evt)
    }
    
    //oninput - 正在输入
    inputNode2.oninput = function(){
        console.log('正在输入')
    }
    
    
    //5.事件对象
    /*
    每个事件驱动程序中，都可以设置一个参数来表示当前事件对象。不同类型的事件对应事件类型和事件属性不同
    1)鼠标事件对象
    clientX/clientY  - 鼠标的位置到浏览器左边和顶部的距离
    offsetX/offsetY  - 鼠标的位置到事件源标签左边和顶部的距离
    
    2)键盘事件对象
    key - 哪个按键被按下
    */
    
</script>