前端之：BOM、DOM

前戲

　　到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。

　　也就是我們還不能制作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。

　　JavaScript分為 ECMAScript，DOM，BOM。

 

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

　　DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。

 

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

BOM

window對象

　　

　　看上面的例子你會發現，name直接封裝到了window對象上，了解一下就可以了。

　　所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。

　　*如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，並為每個框架創建一個額外的 window 對象（了解）。

　　*沒有應用於 window 對象的公開標准，不過所有瀏覽器都支持該對象（了解）。

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

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

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

　　一些常用的Window方法：（在瀏覽器調試器的console里面輸入下面這些屬性或者方法，就能看到對應的效果）

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口 (只能關閉用js的window.open()打開的頁面，了解一下就行了)

window的子對象 

1. navigator對象（了解即可）

　　瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操作系統

　　看示例：

　　　　

 2. screen對象（了解即可）

　　屏幕對象，不常用。

　　一些屬性：

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

3.history對象（了解即可）

　　window.history 對象包含瀏覽器的歷史。

　　瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或后退一個頁面。

history.forward()  // 前進一頁，其實也是window的屬性，window.history.forward()
history.back()  // 后退一頁

　　　　

4.location對象（記住）

　　window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

　　常用屬性和方法：

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新加載頁面,就是刷新一下頁面

　　　　

　　

　　上面的內容需要大家記住的是：

　　　　1.window對象

　　　　2.window的子對象：location的那幾個屬性和方法

　　　　3.其他的作為了解

 我們下面來學些比較有意思有用的內容：

彈出框

　　可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。

1. 警告框

　　警告框經常用於確保用戶可以得到某些信息。

　　當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。

　　語法：

alert("你看到了嗎？");

　　　　

 

2.確認框（了解即可）

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

　　當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

　　如果用戶點擊確認，那么返回值為 true。如果用戶點擊取消，那么返回值為 false。

　　語法：

confirm("你確定嗎？")

　　　　

　　　　　　　　　　

　　　　我們可以根據返回的true和false來判斷一下，然后根據這個值來使用location去跳轉對應的網站。

3. 提示框（了解即可）

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

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

　　如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為默認值，就是第二個參數，如果沒有默認值那么返回null。

　　語法：

prompt("請在下方輸入","你的答案")

　　　　

　　　　可以通過用戶輸入的內容來判斷我們怎么去進行后面的操作

　　除了那個警告框（用的也不都），其他的都很少用，比較丑陋，了解一下就行

計時相關（比較重要）

　　通過使用 JavaScript，我們可以在一定時間間隔之后來執行代碼，而不是在函數被調用后立即執行。我們稱之為計時事件。

1. setTimeout()  一段時間后做一些事情

　　語法：

var t=setTimeout("JS語句",毫秒)  第一個參數js語句多數是寫一個函數，不然一般的js語句到這里就直接執行了，先用函數封裝一下，返回值t其實就是一個id值（瀏覽器給你自動分配的）

　　setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。

　　setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

　　第二個參數指示從當前起多少毫秒后執行第一個參數（1000 毫秒等於一秒）。

　　　　　　

 

　　clearTimeout()

　　語法：

clearTimeout(setTimeout_variable)

　　舉個例子：

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

　　小結：

setTimeout('confirm("未滿18歲禁止入內")',3000);
1
setTimeout(confirm("未滿18歲禁止入內"),3000);
2
setTimeout(function(){confirm('666')},3000);
3
var ret = setTimeout(function(){confirm('666')},3000);
undefined
clearTimeout(ret);

 

2.setInterval() 每隔一段時間做一些事情

　　setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

　　setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

　　語法：

setInterval("JS語句",時間間隔)

　　返回值

　　一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。

　　clearInterval()

　　clearInterval() 方法可取消由 setInterval() 設置的 timeout。

　　clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

　　語法：

clearInterval(setinterval返回的ID值)

　　舉個例子：

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

 

DOM

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

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

　　HTML DOM 模型被構造為對象的樹。

HTML DOM 樹

　　　　

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

• 文檔節點(document對象)：代表整個文檔
• 元素節點(element 對象)：代表一個元素（標簽）
• 文本節點(text對象)：代表元素（標簽）中的文本
• 屬性節點(attribute對象)：代表一個屬性，元素（標簽）才有屬性
• 注釋是注釋節點(comment對象)　

　　JavaScript 可以通過DOM創建動態的 HTML：

• JavaScript 能夠改變頁面中的所有 HTML 元素
• JavaScript 能夠改變頁面中的所有 HTML 屬性
• JavaScript 能夠改變頁面中的所有 CSS 樣式
• JavaScript 能夠對頁面中的所有事件做出反應（鼠標點擊事件，鼠標移動事件等）

查找標簽

和css一樣，你想操作某個標簽需要先找到它

直接查找

document.getElementById           根據ID獲取一個標簽
document.getElementsByClassName   根據class屬性獲取（可以獲取多個元素，所以返回的是一個數組）
document.getElementsByTagName     根據標簽名獲取標簽合集

　　　　例子：　

　　　　　

// 通過id獲取標簽元素
var d = document.getElementById('d1');
d
<div class="c1" id="d1">
    待到將軍歸來日，朕與將軍解戰袍
</div>

d.innerText = 'xx';
"xx"

// 簡單演示js動態效果：
<div class="c1" id="d1">
    待到將軍歸來日，朕與將軍解戰袍
</div>


<div class="c1" id="d2">
    日照香爐生紫煙，遙看瀑布掛前川
</div>

<button id="but" onclick="f1(this);">改變</button>

<script>
    
    // 演示js動態效果
    function f1(ths) {
        var d = document.getElementById('d1');
        d.innerText = '兩開花'
    }
</script>

// 通過類名查找標簽
var d_l = document.getElementsByClassName('c1');
d_l // 返回一個數組 [div,div]兩個class名為c1的div對象

// 通過標簽名查找標簽 也是返回一個數組
var d_l = document.getElementsByTagName('div');
d_l // 返回一個數組 [div,div...] 所有的div標簽對象

間接查找

parentElement            父節點標簽元素
children                 所有子標簽
firstElementChild        第一個子標簽元素
lastElementChild         最后一個子標簽元素
nextElementSibling       下一個兄弟標簽元素
previousElementSibling   上一個兄弟標簽元素

　　　　

　　　如果查找出來的內容是個數組，那么就可以通過索引來取對應的標簽對象

　　　　

 

　　上面說的這些查找標簽的方法，以后我們很少用，等學了JQuery，會有很好用、更全的查找標簽的功能，上面這些大家簡單練習一下，有個了解就行了。

# 標簽結構：
<a href="">更多古詩詞</a>

<div class="cc">

    <div class="c1" id="d1">
    待到將軍歸來日，朕與將軍解戰袍
    </div>

    <div class="c1" id="d2">
    日照香爐生紫煙，遙看瀑布掛前川
    </div>

</div>
<button id="but" onclick="f1(this);">改變</button>
<span>這是span標簽</span>

# 查詢方式展示：
<script>

    var parent_ele = document.getElementsByClassName('cc');
    // parent_ele:通過類名查找到的結果是一個數組

    // 所有的子標簽
    parent_ele[0].children;

    // 第一個子標簽
    parent_ele[0].firstElementChild;

    // 最后一個子標簽
    parent_ele[0].lastElementChild;

    // 下一個兄弟標簽
    parent_ele[0].nextElementSibling; // button標簽

    // 上一個兄弟標簽
    parent_ele[0].previousElementSibling;  // a標簽

</script>

節點操作

　　引子：

　　我們找到節點為的是進行相應的操作，操作非常多一點一點來，這里我們就要重新捋一下文檔樹有什么節點：

　　元素(標簽)節點

　　文本節點

　　屬性節點（屬性又有詳細的划分）

 

元素（標簽）節點操作

//標簽示例：
<div class="cc" id="d">

    <div class="c1" id="d1">
    待到將軍歸來日，朕與將軍解戰袍
    </div>

    <div class="c1" id="d2">
    日照香爐生紫煙，遙看瀑布掛前川
    </div>

</div>

 

創建節點（就是創建標簽）

　　語法：

　　createElement(標簽名)

　　示例：

var a = document.createElement('a');
a.innerText = '百度';
"百度"
<a>​百度​</a>​

　　　　　

 添加節點

　　語法：

　　追加一個子節點（作為最后的子節點）

　　somenode.appendChild(newnode)；

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

　　somenode.insertBefore(newnode,某個節點);

　　示例：

// 添加標簽
// 追加一個子標簽節點
var d = document.getElementById('d');
d.appendChild(a);

// 在某個標簽的前面增加標簽節點
// 比如在id為d1與d2的中間加入a標簽
var d = document.getElementById('d');
var d2 = document.getElementById('d2');
d.insertBefore(a,d2);

　　　

刪除節點：

　　語法：

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

　　somenode.removeChild(要刪除的節點)

var d = document.getElementById('d');
var d1 = document.getElementById('d1');
d.removeChild(d1);

 

替換節點：

　　語法：

　　somenode.replaceChild(newnode, 某個節點);

　　somenode是父級標簽，然后找到這個父標簽里面的要被替換的子標簽，然后用新的標簽將該子標簽替換掉

var d = document.getElementById('d');
d1 = d.children[0];
var a = document.createElement('a');
a.innerText = '百度';
d.replaceChild(a,d1);

標簽節點的操作都是基於先要找到父級標簽，通過父級標簽的相應功能進行操作。 

文本節點操作

　　獲取文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText  #輸入這個指令，一執行就能獲取該標簽和內部所有標簽的文本內容
divEle.innerHTML  #獲取的是該標簽內的所有內容，包括文本和標簽

　　　　　　

　　　　　　

 

　　設置文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"  
divEle.innerHTML="<p>2</p>" #能識別成一個p標簽

var d = document.getElementById('d');
d.innerText = '<a href="">百度</a>';
d.innerHTML = '<a href="">百度</a>'; // 可以識別標簽

屬性節點操作

// 示例標簽：

<div class="cc" id="d">

    <div class="c1" id="d1">
    待到將軍歸來日，朕與將軍解戰袍
    </div>

    <div class="c1" id="d2">
    日照香爐生紫煙，遙看瀑布掛前川
    </div>

</div>
<a href="http://www.taobao.com" id="a1">淘寶</a>
<a id="a2">百度</a>

// 具體操作

    // 查看屬性
    // var a1 = document.getElementById('a1');
    // var url = a1.getAttribute('href');

    // 增加屬性
    // var a2 = document.getElementById('a2');
    // a2.setAttribute('href', 'http://www.baidu.com')

    // 更改屬性
    // var a1 = document.getElementById('a1');
    // a1.setAttribute('href', 'http://www.jd.com')

    // 刪除屬性
    // var a1 = document.getElementById('a1');
    // a1.removeAttribute('href');

    // 如果是標簽自帶屬性可以通過.的方式獲取或者設置屬性值
    // 比如 a標簽的href ，img的src屬性等
    // var a1 = document.getElementById('a1');
    // 獲取href屬性
    // console.log(a1.href);
    // 設置href屬性
    // a1.href = 'http://www.baidu.com'

特殊標簽屬性操作

　　語法：

　　elementNode.value

　　適用於以下標簽，用戶輸入或者選擇類型的標簽：

　　　　1.input   

　　　　2.select

　　　　3.textarea 

　　html代碼示例：

用戶名：<input type="text" id='username'>

<select name="city" id="city">
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3">深圳</option>
</select>

<textarea name="" id="ta" cols="30" rows="10">
    太白金星
</textarea>

　　js代碼示例：

// 特殊標簽的值操作
    // input
    // var inp = document.getElementById('username');
    // inp.value
    // inp.value = '太白';

    // select
    // var sele = document.getElementById('city');
    // sele.value;
    // sele.value=3;

    // textarea
    // var ta = document.getElementById('ta');
    // ta.value;
    // ta.value = '隨便寫點啥吧';

class類的操作

　　其實class類也算是屬性節點操作，只不過這個屬性比較特殊，我們可以通過它做很多效果。

className  獲取所有樣式類名(字符串)

首先獲取標簽對象

標簽對象.classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，否則返回false
classList.toggle(cls)  存在就刪除，否則添加，toggle的意思是切換，有了就給你刪除，如果沒有就給你加一個

　　　　　　例如：我想將c2的類加到class里面去

　　　　　　　　

　　　　　　　　

 

var d = document.getElementById('d');
d.classList.add('c2');
d.classList.remove('c2');
d.classList.contains('c2');
d.classList.toggle('c2');
d.classList.toggle('c1');

指定CSS操作

obj.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

　　　　　　　　

 

　　我們上面所說的這些修改樣式的方法，是不是應該應用在用戶的某些操作上啊，如果你用戶點擊了某個內容，讓它變變顏色之類的，給用戶一些好看的效果或者指示的效果啊，所以這就要和我們下面要學的事件結合起來要做的事情，通過事件+上面的樣式修改來實現。

事件

　　HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。

　　常用事件(就先講一下onfocus，onblur，onclick，onchange吧，其他的回頭再說~~)

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

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

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

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

 綁定方式：

　　　　方式一：（已經不常用了，多數用方式二了）

<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 () {
　　 //console.log(this)
    this.innerText="呵呵"; #哪個標簽觸發的這個事件，this就指向誰
  }
</script>

注意一個問題：

　　　　　　

 

　　　　　　

 　　　　　　

　　　　　　還有一種解決辦法就是將script標簽寫到body標簽最下面

 　　　　　　

示例1:單擊藍色圓圈讓其變成紅色。

#d {
            width: 200px;
            height: 200px;
            background-color: #7fb8ff;
            border-radius: 50%;
        }


<body>

<!--方式一 可以簡寫-->
    <div id="d" onclick="ChangeColor(this)"></div>
    function ChangeColor(ths) {
        ths.style.backgroundColor = 'red' ;
    }
</script>

示例2:單擊 '單擊'按鈕，讓單擊按鈕消失並且藍色圓球變紅色圓球。

<style>
        #d {
            width: 200px;
            height: 200px;
            background-color: #7fb8ff;
            border-radius: 50%;
        }
</style>
<body>

<!--    方式二（推薦使用）-->
    <button id="btn">單擊</button>
    <div id="d"></div>
<script>
    // 單擊 '單擊'按鈕，讓單擊按鈕消失並且藍色圓球變紅色圓球。
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        this.style.display = 'none';
        var d = document.getElementById('d');
        d.style.backgroundColor = 'red';
    }
</script>

示例3:利用onfocus讓圓球變粉變藍。

<style>
        #d {
            width: 200px;
            height: 200px;
            background-color: #7fb8ff;
            border-radius: 50%;
        }

    </style>
<body>


<!--onfocus-->

    用戶名<input id="inp">
    <div id="d"></div>
<script>
   
    // onfocus
    // 獲取焦點
    var inp = document.getElementById('inp');
    inp.onfocus = function () {
        var d = document.getElementById('d');
        d.style.backgroundColor = 'pink';
    }

    // onblur
    // 失去焦點
    var inp = document.getElementById('inp');
    inp.onblur = function () {
        var d = document.getElementById('d');
        d.style.backgroundColor = '#7fb8ff';
    };
</script>
</body>

示例4:利用onchange事件獲取select對應的值。

<select id="sele">
    <option value="1">珍珍</option>
    <option value="2">瀲瀲</option>
    <option value="3">愛愛</option>
</select>

<input type="text" id="inp">
 // onchange 適用於域內容的改變。當元素內容被改變時觸發。(select聯動)
    var sele = document.getElementById('sele');
    sele.onchange = function () {
        console.log(this.options);  // 獲取select所有標簽
        console.log(this.selectedIndex) // 獲取選中的option標簽的索引值
    };

    // var inp = document.getElementById('inp');
    inp.onchange = function () {
       console.log(this.value);
       // 必須回車或鼠標點擊其他任意地方，這樣才確定你的input標簽內容最終確定了
    };

oninput事件，實時監聽用戶輸入的內容，jQuery之后再說。

<input type="text" id="inp">

var inp = document.getElementById('inp');
    inp.oninput = function () {
        console.log(this.value);
    }

 

相關練習題：

想看答案？

誰TM買小米兒！

window.onload

　　　　當我們給頁面上的元素綁定事件的時候，必須等到文檔加載完畢。因為我們無法給一個不存在的元素綁定事件。

　　　　window.onload事件在文件加載過程結束的時候觸發。此時，文檔中的所有對象都位於DOM中，並且所有圖像，腳本，鏈接和子框架都已完成加載。

　　　　注意：.onload()函數存在覆蓋現象。