day24總結(jié)：原生js操作（2019-05-20）

1. DOM

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

1）document對象

  • js會將整個網(wǎng)頁轉(zhuǎn)換成一個js對象叫document；如果想要通過js獲取網(wǎng)頁中的內(nèi)容，必須通過document來獲?。ㄟ@個對象系統(tǒng)自動創(chuàng)建，程序員只需要使用）

2）document結(jié)構(gòu)

  • 是一個樹結(jié)構(gòu)，樹下面就是各種節(jié)點（節(jié)點即Node，是js中Element對象，指向的是html中的標簽）；Element對象有哪些屬性，就看Element對應(yīng)的標簽有哪些html屬性（節(jié)點相當于標簽）

2. DOM節(jié)點操作

1）獲取節(jié)點

1.1）直接獲取
  • 通過id值來獲取節(jié)點：
    document.getElementById(id屬性值)：返回的是標簽對應(yīng)的節(jié)點對象
  • 補充：HTML標簽在js中全部都是對象，標簽的屬性就是對象的屬性；雙標簽的內(nèi)容對應(yīng)是innerText和innerHTML屬性：innerHTML指向的是內(nèi)容的文本和標簽； innerText只指向內(nèi)容中的文本
        <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值獲取節(jié)點：
    document.getElementsByClassName(class屬性值)：返回一個數(shù)組
c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
//根據(jù)下標獲取元素
imgNode = c1NodeArray[1]
imgNode.title = '路飛'
  • 通過標簽名獲取節(jié)點：
    document.getElementsByTagName(標簽名)：返回一個數(shù)組
pNodes = document.getElementsByTagName('p')
console.log(pNodes)
  • 通過name屬性獲取節(jié)點
    document.getElementsByName(name屬性值)：已經(jīng)被淘汰，不常用，與TagName相區(qū)分
1.2）獲取父節(jié)點
  • 節(jié)點.parentElement：獲取指定節(jié)點對應(yīng)的父節(jié)點
bodyNode = pNode.parentElement
console.log(bodyNode)
1.3）獲取子節(jié)點
  • 獲取所有子節(jié)點：
    節(jié)點.children：獲取指定節(jié)點所有的子節(jié)點(不會獲取孫子節(jié)點)
children1 = bodyNode.children
console.log(children1)
  • 獲取第一個子節(jié)點：
    節(jié)點.firstElementChild 
 firstNode = bodyNode.firstElementChild
 console.log(firstNode)
  • 獲取最后一個子節(jié)點：
    節(jié)點.lastElementChild 
 lastNode = bodyNode.lastElementChild
 console.log(lastNode)

2）創(chuàng)建節(jié)點

  • document.createElement（標簽名）：創(chuàng)建指定標簽對象的節(jié)點對象
  • 注意：創(chuàng)建的節(jié)點在沒有添加在網(wǎng)頁中的時候是不會顯示的，并且只能使用一次，如果重復添加則只有最后一次有效
inputNode = document.createElement('input')

3）添加節(jié)點

  • 節(jié)點1.appendChild（節(jié)點2）：在節(jié)點1的最后添加節(jié)點2
  • 節(jié)點1.insertBefore（節(jié)點2，節(jié)點3）：在節(jié)點1中的節(jié)點3前插入節(jié)點2
div2Node = document.getElementById('div2')
            
// 節(jié)點1.appendChild(節(jié)點2) - 在節(jié)點1的最后添加節(jié)點2
div2Node.appendChild(inputNode)
            
// 節(jié)點1.insertBefore(節(jié)點2, 節(jié)點3) - 在節(jié)點1中的節(jié)點3前插入節(jié)點2
div2Node.insertBefore(inputNode, div2Node.firstElementChild)

4）拷貝節(jié)點

  • 節(jié)點.cloneNode（）：復制指定節(jié)點，產(chǎn)生一個新的節(jié)點
inputNode2 = inputNode.cloneNode()
nputNode2.placeholder = '新節(jié)點'
div2Node.appendChild(inputNode2)

5）刪除節(jié)點

  • 節(jié)點1.removeChild（節(jié)點2）：刪除節(jié)點1中的節(jié)點2
div2Node.removeChild(div2Node.firstElementChild)
  • 節(jié)點.remove（）：刪除指定節(jié)點
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('我是函數(shù)')
    }
    window.func1() // func1()

2）window基本操作

2.1）打開新的窗口
  • open（url）：在新的窗口中打開新頁面
new_window = window.open('https://www.baidu.com')
console.log(new_window)
  • open（url，name屬性，窗口大?。?/strong>：打開新的窗口，同時設(shè)置窗口的寬度和高度，name默認空不用設(shè)置
new_window2 = open('https://www.baidu.com','','width=400,height=300')
2.2）關(guān)閉窗口
  • 窗口對象.close（）
    //關(guān)閉當前窗口
    window.close() / close()  
    
    //關(guān)閉其他窗口
    new_window2.close()
2.3）移動當前窗口
  • 窗口對象.moveTo（）
new_window2.moveTo(100, 100)
2.4）獲取窗口的寬度和高度
  • innerWidth / innerHeight：獲取瀏覽器能夠顯示內(nèi)容的部分的寬高
console.log(new_window2.innerWidth, new_window2.innerHeight)
  • outerWidth / outerHeight：獲取整個瀏覽器的寬高
console.log(new_window2.outerWidth, new_window2.outerHeight)

3）彈框

  • alert：只有確定按鈕和提示信息的彈框
alert('提示信息!')
  • confirm：一個提示信息、確定和取消按鈕的彈框；根據(jù)返回值是true還是false來判斷選擇的是確定還是取消
result = confirm('是否刪除?')
console.log(result)
  • prompt：一個提示信息、一個輸入框、確定和取消按鈕的彈框；根據(jù)返回值是否是null來判斷點擊的是取消還是確定
result = prompt('提示信息','輸入框中默認值')
console.log(result)

4）定時

4.1）開啟定時
  • setTimeout（函數(shù)，定時時間，實參列表）：指定時間后調(diào)用指定函數(shù)，并且傳入指定的參數(shù)，返回一個定時器對象
  • 函數(shù)：可以是匿名函數(shù)，也可以是普通函數(shù)的函數(shù)名
  • 定時時間：單位是毫秒（1 毫秒 = 0.001 秒）
  • 實參列表：給前面的函數(shù)提供參數(shù)（可以沒有）
    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（函數(shù)，定時時間，參數(shù)列表）：每隔指定的時間調(diào)用一次函數(shù)
    num = 1
    t4 = setInterval(function(){
        num ++
        console.log('~~~~:',num)
        if(num == 10){
            clearInterval(t4)
        }
    }, 2000)
4.2）清除定時
  • clearTimeout（定時對象）：clearTimeout(t2)
  • clearInterval（定時對象）：clearInterval(t4)
  • 練習：實現(xiàn)5s后自動跳轉(zhuǎn)到百度頁面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1">5秒后自動跳轉(zhuǎn)</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+'秒后自動跳轉(zhuǎn)'
                
            }, 1000)
        </script>
    </body>
</html>

4. 事件

  • js是事件驅(qū)動語言

1）事件三要素

  • 事件源、事件、事件驅(qū)動程序
  • 事件源發(fā)生某個事件就做什么事（事件驅(qū)動程序）

2）事件的綁定

  • 選哪種方式就看后面需不需要對事件源進行操作
2.1）方式一：在標簽內(nèi)部給標簽的事件屬性賦值（不推薦使用）
  • 注意：這種方式綁定的時候，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）方式二：通過給節(jié)點對象的事件屬性賦值來綁定（推薦使用）
  • 注意：這種方式綁定的時候，this指向的是事件源
        <button id="btn3">刪除</button>
        <button class="btn1">刪除3</button>
        <button class="btn1">刪除4</button>
        <button class="btn1">刪除5</button>

        btnNode = document.getElementById('btn3')
        // 給事件屬性賦函數(shù)名
        btnNode.onclick = btnClick     
        
        //獲取所有class值是btn1的標簽對應(yīng)的節(jié)點
        btn1Nodes = document.getElementsByClassName('btn1')
        for(x=0;x<btn1Nodes.length;x++){
            btn1Node = btn1Nodes[x]
            // 給事件屬性賦匿名函數(shù)
            btn1Node.onclick = function(){
                console.log(this)
                result = confirm('是否刪除?')
                if(result){
                    this.remove()
                }
            }
        }
2.3）方式三：通過addEventlistener方法進行綁定（推薦使用）
  • 語法：
    事件源節(jié)點.addEventListener(事件名稱,事件驅(qū)動程序)
  • 說明：
    事件名稱 - 事件屬性名去掉on
    事件驅(qū)動程序 - 事件發(fā)生后需要調(diào)用的函數(shù)
  • 注意：
    this是事件源
    可以給同一個節(jié)點的同一個事件綁定不同的事件驅(qū)動程序
    <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事件
  • 頁面加載完成對應(yīng)的事件（標簽加載成功）
  • window.onload = 函數(shù)（window.可以省略）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //寫在這兒的代碼，在頁面加載完成后才會執(zhí)行
                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：鼠標移動到元素上時觸發(fā)；onmouseleave：鼠標移開事件（類似于 onmouseover 和 onmouseout ，區(qū)別是 onmouseenter 和 onmouseleave 不支持冒泡）
  • onmousemove：鼠標在元素上移動（over （在上面）只觸發(fā)一次，move （移動） 只要移動就不停觸發(fā)）
    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）鍵盤事件
  • 鍵盤事件一般綁定在輸入框對應(yīng)的標簽上
  • 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：輸入框中輸入內(nèi)容的時候按回車（補：onchange 屬性可適用于 <input>, <textarea>, 和 <select> 元素，用于 <select> 元素中時，onchange表示切換選擇）
  • oninput：正在輸入
    //onchange - 輸入框中的輸入內(nèi)容的時候按回車
    inputNode2 = document.getElementById('input2')
    inputNode2.onchange = function(evt){
        console.log('內(nèi)容發(fā)生改變')
        console.log(evt)
    }
    
    //oninput - 正在輸入
    inputNode2.oninput = function(){
        console.log('正在輸入')
    }

4）事件對象

  • 每個事件驅(qū)動程序中，都可以設(shè)置一個參數(shù)（一般用evt）來表示當前事件對象，不同類型的事件對應(yīng)事件類型和事件屬性不同
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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容