JavaScript- BOM, DOM

時間 2019-12-01

原文原文鏈接

BOM

Browser Object Model 瀏覽器對象模型, 提供與瀏覽器窗口進行交互的方法html

它使 JavaScript 有能力與瀏覽器進行「對話」。　BOM 最主要的對象就是 window 對象python

全局變量和全局方法都是 window 的屬性和方法, 實際使用的時候書寫能夠忽略 " window. "數組

var a = 100;
console.log(a,window.a)


function foo(){
    console.log(a)  
}
foo()
window.foo()

window 對象

核心的窗口對象, 隨着網頁打開自動建立瀏覽器

經常使用的方法

window.innerHeight　　　  //瀏覽器窗口的內部高度
window.innerWidth　　    // 瀏覽器窗口的內部寬度

window.open()　　　　　　 // 打開新窗口 詳情見下面
window.close() 　　      // 關閉當前窗口 無參數
window.opener　　　　　　 // 返回對建立該窗口的 Window 對象的引用 （可讀可寫）

window.alter()　　　　 // 警告框, 無返回值 只用於提示信息 只有確認按鈕
window.prompt()　　　　// 輸入框, 帶返回值的彈窗, 可輸入, 提供兩個按鈕 確認取消
window.confirm() 　　　// 確認框, 返回布爾值, 提供兩個按鈕 確認取消

open 詳解

window.open(URL,name,features,replace)

參數緩存

URL: 可選，新開頁面的 URL 　　
name: 可選，聲明窗口名稱　　
features: 可選，制定窗口特性

經常使用 replac 參數 服務器

height=100 窗口高度；　　　　　　　　　　　　
width=400 窗口寬度；　　　　　　　　　　　　
top=0 窗口距離屏幕上方的象素值；　　　　　　　　　　　　
left=0 窗口距離屏幕左側的象素值；　　
replace 　可選，布爾值，規定瀏覽歷史搜否替換覆蓋 window.opener

psapp

對一個經過 window.open 打開的窗口，經過 window.opener 調用父窗口的方法.ide

可直接經過 window.opener.foo({{ yangtuo }} 在子頁面經過參數的將數據傳遞給父頁面調用父頁面的參數　　.函數

從而能夠實現子頁面和父頁面之間的數據傳遞.post

經常使用屬性

history

功能　　保存當前窗口訪問過的 URL .

屬性

　　length　　當前窗口訪問過的數量 ( 只要 URL 不一樣都會被記錄不是訪問次數, 要注意區分 ).

方法

　　back()　　返回前一個 URL ( 後退按鈕 ).

　　forward()　　前進到下一個 URL ( 前進按鈕 ).

　　go(n)　　參數可取正負值, 值表明幾個 URL , 正 - 前進, 負 - 後退 .

location

功能　　保存或操做地址欄的URL

方法　　

　　reload( false / true )　　重載頁面, 設置爲 false 從緩存中加載頁面, 爲 true 表示強制從服務器重載

定時器方法

間隔調用 ( 週期性定時器 )

每隔一段時間就執行一次代碼

var timeID = setInterval(function,interval)

參數　　

　　function　　須要執行的操做

　　interval 　　指定時間間隔 單位 ms

返回值　　返回定時器 ID 彼此區分

關閉間歇調用定時器

clearInterval(timeID)

超時調用 ( 一次性定時器 )

等待一段時間後執行一次代碼

var timeID = setTimeout(function,timeout)

用法參數返回值同上

關閉超時調用計時器

clearTimeout(timeID)

定時器關閉處理

超時調用的內存佔用較少.這裏的關閉方法只是提供了一個關閉途徑

可是間歇調用的不間斷調用是會對內存形成影響所以須要考慮什麼時候關閉

定時器實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function start() {
            // 開啓定時器
            timer = setInterval(function () {
                var date = new Date();
                console.log(date);
            }, 1000);
            return timer
        }

        function stop() {
            clearInterval(timer)
        }
    </script>
</head>
<body>
<button onclick="start()">開始</button>
<button onclick="stop()">關閉</button>


</body>
</html>

每隔一秒打印當前時間

        var i = 5;
        var timerID = setInterval(function () {
            if (i == 1) {
                clearInterval(timerID)
            }
            console.log(i);
            i--
        },1000)

倒計時5s

var res = confirm("是否關閉當前窗口");
if (res) {
    setTimeout(function () {
        window.close()
    }, 3000);
}

超時調用, 延時3s關閉窗口

DOM 對象

Document Object Model,提供操做文檔（html元素）的方法，核心爲document對象

節點概念

將文檔中全部的內容（標籤，文本，標籤屬性，註釋）封裝成節點對象

節點查找

查找到多個節點的時候會以列表的形式返回

能夠用索引的方式取出內部元素, 固然也能夠切片

直接查找

document.getElementById("") 　　　　　　　 　  // 根據ID獲取一個標籤
document.getElementsByClassName("") 　　　  // 根據class屬性獲取
document.getElementsByTagName("")　　　　  // 根據標籤名獲取標籤合集
document.getElementsByName("") 　　　　　 // 根據 表單控件的 name 屬性值獲取

間接查找(無括號)

經過一個已知節點, 基於位置或者親屬關係來間接查找

A.parentElement 　　　　　　　　　     //找父節點標籤元素
A.children　　　　 　　　　　　　　    // 找全部子標籤
A.firstElementChild 　　　　　　    // 第一個子標籤元素
A.lastElementChild 　　　　　　    // 最後一個子標籤元素
A.nextElementSibling 　　　　    // 下一個兄弟標籤元素
A.previousElementSibling 　　  // 上一個兄弟標籤元素

節點建立 / 刪除 / 替換

建立節點

建立後是不存在的, 必需要找位置安置

document.createElement("B"); 　　// 建立一個 B 標籤

添加節點

添加節點必須基於父節點來操做

A.appendChild(B)    　　    // 在 A 的裏面做爲 A 的最後一個子節點添加 B
A.insertBefore(B,C)    　　// 在 A 裏面的 子標籤C 前面添加 B

刪除節點

節點的刪除只能有父節點來操做

A.document.removeChild(B)	// 從 A 標籤裏面移除 B 標籤

替換節點

節點的替換一樣只能由父節點來操做

A.replaceChild(B, C)　　　　　　 // 從 A 標籤中將 C 標籤替換成 B 標籤

節點屬性建立 / 刪除

建立屬性

自帶的屬性能夠直接設置和取值

A.B = "C"	   　　　　　　  // 爲 A 建立 B 屬性,值爲 C

自定義屬性

A.setAttribute("B", "C");      // A 節點添加 B 屬性, B 屬性值爲 C
A.getAttribute("B");           // 獲取 A 標籤的 B 屬性值

刪除屬性

自定義,默認均可

A.removeAttribute("B")    　　　 // 移除 A 節點的 B 屬性

節點內容

innerText

A.innerText = "B"    // 給 A 節點設置顯示內容爲 B

ps:

若是 A 有子標籤.設置 A 內容後.會清除子標籤只剩下一個文本 B

取值的時候只能取到子標籤的內容

innerHtml

A.innerHtml = "<p>p</p>"    // 給 A 節點設置顯示內容爲 B

ps:

主要用於快速添加簡單的標籤

取值的時候能夠取到子標籤自己不單單是內容

value

只適用於 input, select, textarea

A.value	　　　　　　　　　　　　// 獲取A的值

節點樣式操做

A.className 　　　　　　　　　　　　  // 獲取全部樣式類名(字符串)
A.classList.remove("c1") 　　　　 // 刪除指定類
A.classList.add("c1")　　　　 　　// 添加類
A.classList.contains("c1")     // 存在返回true，不然返回false
A.classList.toggle("c1") 　  　// 存在就刪除，不然添加

A.style.backgroundColor="red"	// 將 A 的背景顏色設置成紅色

JS操做CSS屬性的規律

1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：

　　obj.style.margin
　　obj.style.width
　　obj.style.left
　　obj.style.position

2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可(小駝峯)。如：

　　obj.style.marginTop
　　obj.style.borderLeftWidth
　　obj.style.zIndex
　　obj.style.fontFamily

3. 屬性值中的單位不可省略. 好比 px

節點空間關係

parentsNode

獲取父節點, 父元素

childNodes

獲取子節點, 包含文本節點和元素節點

children

獲取子節點數組, 只包含元素節點, 不包含文本節點

nextSibling

獲取下一個兄弟節點

previousSibling

獲取上一個兄弟節點

事件

事件類型

鼠標事件

onclick 　　　　　 //　單擊

ondblclick 　　  　// 　雙擊

onmousemove 　   //　鼠標移動

onmouseout 　　 //  鼠標移出

onmouseover 　　// 鼠標移入

鍵盤事件

onkeydown 　　     //  某個鍵盤按鍵被按下 ( 只要是按鍵都觸發 )

onkeypress 　　    // 某個鍵盤按鍵被按下 ( 今舉行字符按鍵 )

onkeyup 　　　　  // 某個鍵盤按鍵被鬆開

元素或者文檔加載完畢

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

表單控件的按鈕監聽

oninput           // 監聽輸入框的輸入狀態 ( 實時監聽 )

onchange 　　　　  // 監聽表單控件的值發生變化

onfocus 　　　　　 // 監聽文本框焦點狀態

onblur 　　　　　　// 監聽文本框失去焦點狀態

onsubmit 　　　   //　監聽提交狀態

onselect 　　　　  //  在文本框中的文本被選中時發生

// onsubmit 事件由form 監聽 , 點擊提交按鈕自動觸發,
// 檢測表單數據是否能夠發生, 容許給出返回值爲 布爾值
// true 表示能夠提交, false 表示不可發送
form.onsubmit = function () {
    if(uname.value.length == 0) {
        // 阻止提交
        return false;
    } else {
        return true;
    }
}

全部事件的實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
    <script>
        window.onload = function () {
            // 鼠標
            // console.log($("h1"));
            // $("h1").ondblclick = function () {
            //     alert("雙擊")
            // };
            // $("div").onmouseover = function () {
            //     console.log("鼠標移入")
            // };
            // $("div").onmousemove = function () {
            //     console.log("鼠標移動呀動")
            // };
            // $("div").onmouseout = function () {
            //     console.log("鼠標移出")
            // };

            // 鍵盤
            // onkeydown = function () {
            //     console.log("鍵盤被按")
            // };
            // onkeypress = function () {
            //     console.log("字符被按")
            // };
            // onkeyup = function () {
            //     console.log("鬆開了")
            // };

            // 表單
            var form = $("form");
            var uname = $("input");
            var hobby = $("input", 1);

            uname.onfocus = function () {
                console.log("表單的獲取焦點")
            };
            uname.onblur = function () {
                // this 表示當前的觸發對象
                console.log("獲取值: ", this.value)
            };
            uname.oninput = function () {
                console.log("實時監聽獲取值: ", this.value)
            };
            uname.onchange = function () {
                console.log("先後不一致了: ", this.value)
            };
            hobby.onchange = function () {
                console.log("按鈕變了: ", this.checked)
            };
            // onsubmit 事件由form 監聽 , 點擊提交按鈕自動觸發,
            // 檢測表單數據是否能夠發生, 容許給出返回值爲 布爾值
            // true 表示能夠提交, false 表示不可發送
            form.onsubmit = function () {
                if(uname.value.length == 0) {
                    // 阻止提交
                    return false;
                } else {
                    return true;
                }
            }

        };
    </script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: palegreen;
        }
    </style>
</head>
<body>
<h1>標題</h1>
<div>文本啦文本</div>
<form action="/" method="post" enctype="multipart/form-data">
    用戶名: <input type="text" name=""><br>
    興趣: <input type="checkbox" name="" value="1"><br>
    <input type="submit">

</form>


<script>
    console.log("我看看誰比我快")
</script>

</body>
</html>

整合後的實例

事件綁定方式

內斂方式

<div id="d1" onclick="changeColor(this);">點我</div>
<script>
　　function changeColor(ths) {
　　　　ths.style.backgroundColor="green";
　　}
</script>

注意

this是實參，表示觸發事件的當前元素。

函數定義過程當中的ths爲形參。

外部引入

<div id="d2">點我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>

標準事件監聽

btn.addEventListener("click",function(){},false)

參數

　　省略 on 前綴的事件名稱

　　事件發生後執行函數

　　設置事件傳遞機制默認 false

事件傳遞

　　事件由多個元素同時監聽

　　事件發生後的傳遞順序

　　默認冒泡傳遞, 從裏向外逐一觸發

　　設置爲 true 表示捕獲, 從外向內觸發執行

window.onload

　　綁定事件的時候，要等到文檔加載完畢

　　對於不存在的元素沒法綁定事件

　　window.onload事件在文件加載過程結束時觸發

　　位於DOM中的全部對象都被讀取完畢時纔會觸發

    <script>
        window.onload = function () {
            // 獲取元素
            console.log($("h1"));
        };
    </script>

注意

.onload()函數存在覆蓋現象

事件對象

事件對象伴隨事件觸發自動建立，存儲全部與當前事件相關的信息。

做爲參數自動傳入事件處理函數中，只須要接收後進行相關操做

div.onclick = function (evt){

};