BOM DOM

JavaScript---BOM和DOM

BOM和DOM實現與網頁交互

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。

DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。

Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。例如：window.document.write()能夠簡寫成：document.write()。

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些經常使用的Window方法：

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

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

window.open() - 打開新窗口

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

 

BOM

window的子對象

一.navigator對象（瞭解便可）

瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName　　// Web瀏覽器全稱
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="URL" // 跳轉到指定頁面
location.reload() // 從新加載頁面

 

 

五.彈出框

能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。

1.警告框

警告框常常用於確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做

alert("警告內容");

 

2.確認框（瞭解便可）

確認框用於使用戶能夠驗證或者接受某些信息。

當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。

若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

confirm('確認內容');
返回:true 或 false

 

3.提示框（瞭解便可)

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

prompt('提示','答案');

 

4.計時相關

經過使用 JavaScript在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行,通常和函數聯合使用

setTimeout(func, 時間)

var t=setTimeout("JS語句",毫秒)
/*
第一個參數:JS語句
第二個參數:時間(毫秒)
*/ 
<script>
    function func () {
        window.close();
    }
    var t = setTimeout(func, 3000);  // 3秒後執行func函數
</script>

 

clearTimeout()

用於取消 setTimeout 的執行

clearTimeout(setTimeout_variable)
// 在指定時間以後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000) // 取消setTimeout設置
clearTimeout(timer);

 

setInterval(func,時間)

在必定週期內執行某個函數,直到 clearInterval() 被調用或窗口被關閉

var t=setInterval("JS語句",毫秒) /*
第一個參數:JS語句
第二個參數:時間(毫秒)
*/ 

 

clearInterval()

用於取消 setInterval 的執行

clearInterval(setinterval返回的ID值)
// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000) // 取消setInterval設置
clearInterval(timer);

 

例:計時器

<script>
    function foo () {
        alert('彈框')
    }
    function show() {
        var t = setInterval(foo, 3000);
        function inner() {
            clearInterval(t)
        }
        setTimeout(inner, 9000)
    }
    show()
</script>

 

DOM(*****)

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造爲對象的樹

DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：

• 文檔節點(document對象)：表明整個文檔

• 元素節點(element 對象)：表明一個元素（標籤）

• 文本節點(text對象)：表明元素（標籤）中的文本

• 屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性

• 註釋是註釋節點(comment對象)　

JavaScript 能夠經過DOM建立動態的 HTML：

• JavaScript 可以改變頁面中的全部 HTML 元素(標籤)

• JavaScript 可以改變頁面中的全部 HTML 屬性

• JavaScript 可以改變頁面中的全部 CSS 樣式

• JavaScript 可以對頁面中的全部事件作出反應

一.查找標籤(*****)

1.直接查找

注意: 根據ID獲得的是標籤對象,根據標籤名合類得到的是數組

document.getElementById           根據ID獲取一個標籤
document.getElementsByClassName   根據class屬性獲取
document.getElementsByTagName     根據標籤名獲取標籤合集

2.間接查找

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

二.節點操做

1.建立節點

document.createElement('標籤名')

2.添加節點

追加一個子節點（做爲最後的子節點）

標籤對象1.appendChild(標籤對象2)

把增長的節點放到某個節點的前邊。

標籤對象.insertBefore(新標籤對象,某個標籤對象);

 

3.刪除節點

得到要刪除的元素，經過父元素調用該方法刪除。

標籤對象.removeChild(要刪除的節點)

 

4.替換節點

標籤對象.replaceChild(newnode, 某個節點);

 

5.屬性節點

獲取文本節點的值：

標籤對象.innerText  // 只識別文本
標籤對象.innerHTML  // 文本標籤都識別

設置文本節點的值：

標籤對象.innerText="1" 標籤對象.innerHTML="<p>2</p>" 

attribute操做

var divEle = document.getElementById("d1"); divEle.setAttribute("age","18") // 添加屬性及值
divEle.getAttribute("age")  // 獲取屬性值
divEle.removeAttribute("age")  // 刪除屬性

// 自帶的屬性還能夠直接.屬性名來獲取和設置
imgEle.src imgEle.src="..."

 

 

6.獲取值操做

標籤對象.value

 

適用於如下標籤：

• .input

• .select

• .textarea

 

7.class的操做

標籤對象.classList // 返回標籤對象中的類
classList.remove(cls)  // 刪除指定類
classList.add(cls)  // 添加類
classList.contains(cls)  // 存在返回true，不然返回false
classList.toggle(cls)  // 存在就刪除，不然添加

8.指定CSS操做

標籤對象.style.backgroundColor = 'red'

 

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

 

三.事件

符合某個條件下自動觸發的動做

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

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

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

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

 

綁定事件的兩種方式

指名道姓

<button onclick="foo()">按鈕1</button>
function foo() {
        alert('按鈕1彈出')
}

js代碼綁定(推薦)

標籤對象.事件名 = function(){
            // 事件代碼
}

 

事件實例:

<button onclick="foo()">按鈕1</button>  <!--當點擊按鈕1時觸發 onclick 屬性-->
<button id="d1">按鈕2</button>

<script>
    // 方式一:指名道姓 
    function foo() {
        alert('按鈕1彈出')
    }
    
    // 方式二:js代碼綁定(推薦)
    var button2Ele = document.getElementById('d1');
    // button2Ele標籤對象中添加 onclick 屬性
    button2Ele.onclick = function () {
        alert('按鈕2彈出')
    }
</script>

 

<input type="text" value="mac">

<script>
    // 獲取input 標籤對象
    var inputEle = document.getElementsByTagName('input')[0];
    // input 對象綁定 onfocus 事件
    inputEle.onfocus = function () {
        inputEle.value = ''
    };
    // input 對象綁定 onblur 事件
    inputEle.onblur = function () {
        inputEle.value = '歡迎下次光臨'
    }

焦點事件實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">開始</button>
<button id="b2">結束</button>

<script>
    var t;
    function showTime() {
        var i1Ele = document.getElementById('i1');
        var time = new Date();
        i1Ele.value = time.toLocaleString();
    }
    showTime();
    var b1Ele = document.getElementById('b1');
    b1Ele.onclick = function (ev) {
        if (!t){
            t = setInterval(showTime,1000)
        }
    };
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = function (ev) {
       clearInterval(t);
       t = undefined
    };

</script>
</body>
</html>

定時器示例

定時器實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="請輸入關鍵字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="請輸入關鍵字";
    }
}
</script>
</body>
</html>

搜索框示例

搜索框實例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select聯動</title>
</head>
<body>
<select id="province">
  <option>請選擇省:</option>
</select>

<select id="city">
  <option>請選擇市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");

  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.innerHTML = "";

    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

select聯動

select連動實例