前端之BOM與DOM

前端之BOM與DOM

一、什麼是BOM與DOM

咱們在前面講了JavaScript，可是還不能跟瀏覽器有任何交互，因此就有了BOM與DOM

BOM：瀏覽器對象模型，讓JavaScript與瀏覽器進去對話的，操做瀏覽器

DOM：文檔對象模型，能夠經過DOM訪問HTML文檔中的元素，操做HTML文檔

二、Window對象

全部瀏覽器都支持Window對象，她表示瀏覽器窗口

一些經常使用的Window方法：

• window.innerHeight - 瀏覽器窗口內部的高度

• window.innerWidth - 瀏覽器窗口內部的寬度

• window.open() - 打開新窗口，指定連接，打開窗口的尺寸與位置(第一個參數是地址，第二個空字符串，第三個參數指定尺寸與位置)

• window.close() - 關閉當前窗口

三、window的子對象

經過window調用，window能夠省略不寫

一、navigator對象

瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器信息

屬性：

• window.navigator.appName - 獲取瀏覽器全稱，window能夠省略不寫

• navigator.appVersion - Web瀏覽器廠商和版本詳細字符串

• navigator.userAgent - 客戶端絕大部分信息，斷定是不是一個瀏覽器，初始反爬策略

• navigator.platform - 瀏覽器運行所在的操做系統

二、screen對象

屏幕對象

一些屬性：

• screen.availWidth - 可用的屏幕寬度

• screen.availHeight - 可用的屏幕高度

三、history對象

window.history對象包含瀏覽器的歷史，可作瀏覽器的前進和返回頁

屬性：

• history.forward() - 前進一頁

• history.back() - 後退一頁

四、location對象

window.location對象用於獲取當前頁面的url或跳轉指定頁面，刷新頁面

屬性：

• location.href - 獲取當前窗口的url

• location.href="https://www.baidu.com" - 指定url跳轉到指定頁面

• location.reload() - 刷新頁面

五、彈出框

能夠在JavaScript建立三種彈出框：警告框、確認框、提示框

警告框 ：alert：當出現警告框用戶需點擊肯定後才能進行操做

語法：alert("警告語")；

確認框：confirm：用戶點擊肯定返回true，取消返回false

語法：confirm("確認語")

提示框：prompt：用戶點擊肯定後返回輸入的值，點擊取消返回null

語法：prompt("提示語")

六、計時相關

在必定時間間隔以後來執行代碼

setTimeout()：在指定多少毫秒以後執行js代碼

語法：setTimeout("JS語句"，毫秒)

clearTimeout()：清除setTimeout的設置

語法：clearTimeout(setTimeout語句)

setInterval()：設置按照指定週期（以毫秒）來不停的調用函數或計算表達式

語法：setInterval("JS語句"，時間間隔毫秒)

clearInterval()：取消由setInterval()設置的週期循環函數

語法：clearInterval(setInterval語句)

function show(){
    alert('123');
}
function func(){
    let t = setInterval(show,3000);
    function inner(){
        clearInterval(t)
    }
    setTimeout(inner,9000)
}
func()

四、DOM

HTML DOM模型被構造爲對象的樹，能夠經過每個節點找到其餘節點

一、查找標籤

若是用變量名來臨時存儲，變量名建議用查找的元素+Ele，如：

var divEle = document.getElementByTagName('div')[0]

• 直接查找

document.getElementbyId() - 跟據ID獲取一個標籤，id是惟一的結果就是標籤自己

document.getElementByClassName() - 根據class屬性獲取，結果是一個數組，須要某一個值用索引取值

document.getElementByTagName() - 根據標籤名獲取標籤合集，結果是一個數組，須要某一個值用索引取值

• 間接查找：先經過直接查找獲得臨時變量來查找其餘的元素

parentElement - 父節點標籤元素

children - 全部的子標籤

firstElementChild - 第一個子標籤元素

lastElementChild - 最後一個子標籤元素

nextElementSibling - 下一個兄弟標籤元素

previousElementSibling - 上一個兄弟標籤元素

 

二、節點操做

建立節點

語法：createElement(標籤名)

var divEle = document.createElement('div');

添加節點

語法：追加一個子節點，最後一個子節點

.appendChild(子節點)

var imgEle = document.createElement('img')
imgEle.setAttribute('src','http://img1.imgtn.bdimg.com/it/u=4238142487,3274484296&fm=26&gp=0.jpg')
var d1Ele = document.getElementById('d1')
d1Ele.appendChild(imgEle);

語法：把某個節點添加在某個節點以前

.insertBefore(新節點，某個節點)

刪除節點

語法：獲取要刪除的元素，經過父元素調用該方法刪除

父節點.removeChild(要刪除的節點)

替換節點

把某個節點換成一個新節點

語法：somenode.replaceChild(新節點，舊節點)

屬性節點

給某個節點添加屬性能夠經過點的方式設置默認屬性，可是自定義屬性無法設置，全部能夠經過setAttribute方法便可以設置默認屬性也能夠設置自定義屬性

var divEle = document.getElementByTagName('div')[0];
divEle.setAttribute('age',18)   // 設置屬性
divEle.getAttribute('age')   // 獲取屬性值
divEle.removeAttribute('age')   // 刪除屬性

獲取節點值能夠直接經過innerText獲取，在後面加=某個值來設置文本值

var divEle = document.getElementByTagName('div')[0]
divEle.innerText   // 獲取div節點文本
divEle.innerText='<h1>111</h1>'  // 清空div全部的標籤及文本後設置div的文本，不能識別HTML代碼
var divEle = document.getElementByTagName('div')[0]
divEle.innerHTML   // 獲取div節點標籤及文本
divEle.innerHTML='<h1>111</h1>'  // 清空div全部的標籤及文本後設置div的文本,能夠識別HTML代碼

獲取值的操做

適用點value的方式獲取用戶輸入或選擇的文本，適用於input，select，textarea

var inputEle = document.getElementsByTagName('input')[0];
inputEle.value
// "1112132"
var selectEle = document.getElementsByTagName('select')[0]
selectEle.value
// "111"
var textareaEle = document.getElementsByTagName('textarea')[0]
textareaEle.value
// "12e2qdqwda"

獲取文件對象數據 js對象.files[0]

var fileEle = document.getElementById('d2')
fileEle.files[0]  // 獲取文件的真實數據
/* File {name: "ttrar.com下載說明.txt", lastModified: 1535635667143, 
lastModifiedDate: Thu Aug 30 2018 21:27:47 GMT+0800 (中國標準時間), 
webkitRelativePath: "", size: 3331, …} */

class的屬性

對類進行一系列操做

var c1Ele = document.getElementsByClassName('c1')[0]
c1Ele.className  // 查看全部的類名"c1 getgreen getred"
c1Ele.classList  // 查看全部的類屬性 DOMTokenList(3) ["c1", "getgreen", "getred", value: "c1 getgreen getred"]
c1Ele.classList.remove('getred')  // 刪除指定類
c1Ele.classList.add('getred')  // 添加指定類
c1Ele.classList.contains('getred')  //判斷某個類是否存在
true
c1Ele.classList.contains('c2')
false
c1Ele.classList.toggle('getred')  // 有則移除無則添加某個類
false
c1Ele.classList.toggle('getred')
true

對CSS操做

經過js對象.style.css屬性名的方式進行操做，將CSS語句中的-換成了大寫的

obj.style.margin
obj.style.width
obj.style.left
obj.style.position
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

五、事件

js代碼一般寫在body裏的最下方

一、什麼是事件

一旦標籤達到某個條件就會自動觸發一系列的動做

二、經常使用事件

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

onfocus        元素得到焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

三、綁定事件的兩種方式

一、直接在標籤內部書寫事件名

<button onclick="func()">按鈕1</button>

二、利用js動態查找動態綁定，一般使用這種

<div>    
    <button>按鈕</button>
</div>
<script>
    var divEle = document.getElementsByTagName('div')[0];     
    divEle.onclick=function () {
        alert(123)    }
</script>

事件練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態展現時間</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">開始</button>
<button id="b2">結束</button>

<script>
    var ipEle = document.getElementById('d1');
    var b1Ele = document.getElementById('b1');
    var b2Ele = document.getElementById('b2');
    // 定義一個變量用來存儲定時器
    var t = null;
    function showtime() {
        var currentTimeObj = new Date();
        ipEle.value = currentTimeObj.toLocaleString();
    }
    b1Ele.onclick = function () {
        if(!t){
            t=setInterval(showtime,1000);
        }
    };
    b2Ele.onclick = function () {
        clearInterval(t);
        t=null;
    }
</script>
</body>
</html>

動態展現時間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>開關燈</title>
    <style>
        .c1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
        }

        .setgreen {
            background-color: green;
        }

        .setred {
            background-color: red;
        }
    </style>
</head>
<body>
<div class="c1 setred setgreen"></div>
<button id="d1">點我變色</button>

<script>
    var btEle = document.getElementById('d1');
    var divEle = document.getElementsByClassName('c1')[0];
    btEle.onclick = function () {
        // 對類進行有則刪除無在添加
        divEle.classList.toggle('setred')
    }
</script>
</body>
</html>

開關燈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市聯動</title>
</head>
<body>
<select name="" id="province"></select>
<select name="" id="city"></select>

<script>
    data = {
        "河北": ["廊坊", "邯鄲"],
        "北京": ["朝陽區", "海淀區"],
        "山東": ["威海市", "煙臺市"],
        '上海': ['徐彙區','黃埔區'],
        '安徽': ['六安市','合肥市']
    };
    let prEle = document.getElementById('province');
    let ciEle = document.getElementById('city');
    // 獲取省份的信息
    for (let i in data){
        // 手動建立一個標籤添加到省份標籤內
        let opEle = document.createElement('option');
        // 給標籤設置value屬性
        opEle.value = i;
        // 給標籤設置文本
        opEle.innerText = i;
        // 將建立的標籤添加到select框中
        prEle.append(opEle)
    }
    // 當文本信息改變是觸發
    prEle.onchange = function () {
        // 先置空再操做
        ciEle.innerHTML = '';
        // this表明當前對象，至關於python中的self
        // 獲取用戶選擇的省份
        let currentPro = this.value;
        // 根據省份查找到城市
        let currentcity = data[currentPro];
        // 循環放入第二個select框中
        for (let i=0; i<currentcity.length;i++){
            let opEle = document.createElement('option');
            opEle.value = currentcity[i];
            opEle.innerText = currentcity[i];
            ciEle.append(opEle)
        }
    }
</script>
</body>
</html>

省市聯動（文本域變化）