JS之BOM、DOM_ZenDei技術網路在線

一、BOM對象 1，window對象所有瀏覽器都支持window對象，從概念上講：一個HTML文檔對應一個window對象，從功能上講：控制瀏覽器視窗的，從使用上講：window對象不需要創建對象，直接使用即可 2，window對象方法 3，方法的使用 3.1彈窗方法，警告窗alert、確認窗co ...

　　一、BOM對象

　　1，window對象

　　所有瀏覽器都支持window對象，從概念上講：一個HTML文檔對應一個window對象，從功能上講：控制瀏覽器視窗的，從使用上講：window對象不需要創建對象，直接使用即可

　　2，window對象方法

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。

open()             打開一個新的瀏覽器視窗或查找一個已命名的視窗。
close()            關閉瀏覽器視窗。

setInterval()      按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的坐標。

　　3，方法的使用

　　3.1彈窗方法，警告窗alert、確認窗confirm、輸入窗prompt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function waring() {
            alert('小心點')
        }
        function certain() {
            var status=confirm('確定跳轉？');
            if (status){
                location.href='http://www.baidu.com';
        }
        }
        function shuru() {
            var content=prompt('請輸入');
            console.log(content)
        }
    </script>
</head>
<body>
    <button onclick="waring()">警告窗</button>
    <button onclick="certain()">確認窗</button>
    <button onclick="shuru()">輸入窗</button>
</body>
</html>

　　3.2 setinterval：間隔指定的毫秒數不停的執行指定的代碼、clearInterval：停止方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function gettime() {
            let now=new Date().toLocaleString();
            let ss=document.getElementById('content');
            ss.value=now;
        }
        var id;
        function settime() {
            if (id==undefined){
                gettime();
                id=setInterval(gettime,1000);    #每1000毫秒（即1秒）後執行
            }
        }
        function over() {
            clearInterval(id);
            id=undefined
        }
    </script>
</head>
<body>
    <input type="text" id="content">
    <button onclick="settime()">start</button>
    <button onclick="over()">end</button>
</body>
</html>

　　3.3 settimeout（）：在指定的毫秒數後執行代碼，cleartimeout（）：停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="set()">執行</button>
    <button onclick="cle()">停止</button>
    <p id="p1">歡迎光臨</p>
    <script>
        var id;
        function set(){
            id=setTimeout(function () {
           document.getElementById('p1').innerHTML='謝謝'
        },3000)
        }
        function cle() {
            clearTimeout(id)
        }
    </script>
</body>
</html>

　　二、DOM對象

　　HTML document object model（文檔對象模型）

　　1，DOM樹，展示文檔中各個對象的關係，用於導航

　　2，節點關係

　　3，節點查找方法

　　3.1 直接查找

document.getElementById();   #通過id查找，得到是一個準確標簽
document.getElementsByClassName();      #通過類查找，不管同一類有幾個標簽，得到都是由同一類標簽組成的數組
document.getElementsByTagName();        #通過標簽名查找，不管同一種標簽有幾個，得到的都是由同一種標簽組成的數組
document.getElementsByName();      #通過name屬性查找，返回的是同一name值的標簽組成的數組
註意：涉及尋找元素，註意<script>的位置，寫在被查找標簽後面

　　3.2 導航查找

'''

parentElement           // 父節點標簽元素

children                // 所有子標簽

firstElementChild       // 第一個子標簽元素

lastElementChild        // 最後一個子標簽元素

nextElementtSibling     // 下一個兄弟標簽元素

previousElementSibling  // 上一個兄弟標簽元素

'''
註意：是沒法直接找到所有的兄弟標簽

　　4，節點操作

創建節點
var tag=document.createElement（標簽名）
var father=document.Element.....

添加節點
追加一個子節點
father.appendchild(tag)      在father標簽裡加一個tag標簽
在某個節點前面加一個節點
var ele=document.getElement.....
father.insertbefore(tag,ele)     在father標簽里的ele節點前加上tag節點

刪除節點
var ele=document.getElement.....
father.removechild(ele)     刪除father標簽里的ele節點

替換節點
var ele=document.getElement.....
father.replace(tag,ele)     把father標簽里的ele節點換成tag新節點
註意：所有的添加、刪除、替換節點都是基於父級標簽來操作的。創建幾個節點，就最多可以添加幾個節點。比如創建一個節點，最多添加幾個節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c2">
        <button class="c1">添加節點</button>
        <p>這是一個寂寞的天，下著有些傷心的雨</p>
        <button class="c3">刪除節點</button><br>
        <button class="c4">替換節點</button>
    </div>
    <script>
        var ele =document.getElementsByClassName('c1')[0];
        var ele1=document.getElementsByClassName('c2')[0];
        ele.onclick=function () {
           var tag=document.createElement('a');
           tag.setAttribute('href','#');
           tag.innerHTML='點我';
           ele1.appendChild(tag);
           var tag1=document.createElement('p');
           tag1.innerHTML='我哭了';
           var ele3=document.getElementsByTagName('p')[0];
           ele1.insertBefore(tag1,ele3);
        };
        var ele2=document.getElementsByClassName('c3')[0];
        var ele3=document.getElementsByTagName('p')[0];
        ele2.onclick=function () {
            ele1.removeChild(ele3)
        };
        var ele4=document.getElementsByClassName('c4')[0];
        ele4.onclick=function () {
            var tag1=document.createElement('p');
            tag1.innerHTML='下雨管你弔事，幹活去';
            tag1.setAttribute('style','font-size:30px');
            ele1.replaceChild(tag1,ele3);
        }
    </script>
</body>
</html>

節點操作例子

　　5，節點屬性操作

　　5.1 文本操作：innerHTML，innerText

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1"><a href="#">歡迎來電</a></div>
    <script>
        var t1=document.getElementsByClassName('c1')[0].innerHTML;
        var t2=document.getElementsByClassName('c1')[0].innerText;
        console.log(t1);
        console.log(t2);
    </script>
</body>
</html>
innerHTML拿到的是對應標簽里包含的所有內容，包括標簽，比如上面的例子拿到‘<a href="#">歡迎來電</a>’
innerText拿到的只是內容，沒有標簽，比如上面的例子就只拿到‘歡迎來電’，而沒有a標簽

　　5.2 屬性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: yellow;
        }
        .c2{
            color: white;
        }
        .c3{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="d1">你好啊</div>
    <button onclick="set1()">加背景</button>
    <button onclick="set2()">加背景，字體顏色，字體大小</button>
    <button onclick="rem1()">去掉class屬性</button>
    <button onclick="get1()">拿到class屬性</button>
    <script>
        var ele=document.getElementById('d1');
        function set1(){
            ele.setAttribute('class','c1')        #給標簽設置屬性，第一個參數為屬性名，第二參數為屬性值
        }
        function set2() {
            ele.setAttribute('class','c1 c2 c3')
        }
        function rem1() {
            ele.removeAttribute('class')         #把標簽的某個屬性給刪除，參數為屬性名
        }
        function get1() {
            var va=ele.getAttribute('class');        #拿到標簽的某個屬性值，參數為屬性名
            console.log(va)
        }
    </script>
</body>
</html>

　　5.3 class屬性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: grey;
            color: yellow;
            font-size: 20px;
            margin-bottom: 5px;
        }
        ul{
            list-style: none;
        }
        .hh{
            display: none;
        }
    </style>
</head>
<body>
    <div class="c1">菜單一</div>
    <ul class="hh">
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <div class="c1">菜單二</div>
    <ul class="hh">
        <li>222</li>
        <li>222</li>
        <li>222</li>
    </ul>
    <div class="c1">菜單三</div>
    <ul class="hh">
        <li>333</li>
        <li>333</li>
        <li>333</li>
    </ul>
    <script>
        var eles=document.getElementsByClassName('c1');
        for ( var i=0;i<eles.length;i++){
            eles[i].onclick=function () {
                for (var j=0;j<eles.length;j++){
                    if (eles[j]!=this){
                        eles[j].nextElementSibling.classList.add('hh')     #在標簽的class屬性列表裡加‘hh類’。若已經存在，就不用添加
                    }
                }
                this.nextElementSibling.classList.remove('hh')          #把標簽的class屬性列表裡刪除‘hh類’，若不存在，就不用刪除
            }
        }

　　5.4 改變css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p1">這是一個寂寞的天，下著有些傷心的雨</p>
</body>
    <script>
        document.getElementById('p1').style.color='red';
        document.getElementById('p1').style.fontSize='30px';
    </script>
</html>
註意：對於中間用—連接的屬性，在這裡中間的—給去掉。比如font—size寫成fontSize，後面的單詞首字母大寫

　　5.5 value操作

對於input，select，textarea標簽來說，可以.value獲取到value值

　　6，事件

　　6.1 事件分類

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。

onload         一張頁面或一幅圖像完成載入。

onmousedown    滑鼠按鈕被按下。
onmousemove    滑鼠被移動。
onmouseout     滑鼠從某元素移開。
onmouseover    滑鼠移到某元素之上。
onmouseleave   滑鼠從元素離開

onselect       文本被選中。
onsubmit       確認按鈕被點擊。

　　6.2 綁定事件方法

　　方法一：

<div id="div" onclick="foo(this)">點我呀</div>

<script>
    function foo(self){           // 形參不能是this;
        console.log("點你大爺!");
        console.log(self);   
    }
</script>

　　方法二：

<p id="abc">試一試!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>