DOM

DOM是什麼

DOM（Document Object Model）文檔對象模型。
當網頁加載時，可以將結構化文檔在內存中轉換成對象的樹。

爲什麼會有DOM?

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

在現實世界裏，正是因爲大家對抽象的世界對象模型有着基本的共識，人們才能用非常簡單的話表達出複雜的含義並得到對方的理解。
就如具體的例子中，你可以有把握地斷定，其他人對“第三”和“左邊”的理解和我完全一樣。

有了DOM，才便於描述和去操作HTML文檔。

DOM圖示：

DOM本質：

DOM並不是一種技術，而是一種訪問結構化文檔的一種思想。

藉助DOM模型，我們可以對DOM樹進行增刪修改等操作，讓結構化文檔動態化。

掌握了DOM編程模型，就可以用js腳本動態修改HTML頁面的能力。

DOM模型中的節點：

DOM模型中的節點——文檔可以說是由節點構成的集合。

DOM對HTML元素訪問操作：

爲了動態地修改HTML元素，須**先訪問**HTML元素。

DOM組要提供2種方式：id或tag

實例：通過id修改HTML元素

DOM1.HTML

實例：通過TAG修改HTML元素

DOM2.HTML

DOM訪問表單控件的常用屬性和方法

在elements返回的數組中訪問具體的表單控件語法

實例：DOM3.html

DOM訪問列表框、下拉菜單的常用屬性：

使用options[index]返回具體選項所對應的常用屬性：

實例：DOM4.html

DOM訪問表格子元素的常用屬性和方法：

通過rows[index]返回表格指定的行所對應的屬性：

通過cells[index]返回表格指定的列所對應的屬性：

對象：

對象是JavaScript的特性之一，它是一種非常重要的數據類型，是自我包含的數據集合。

常用的內置對象

Date
Math

對象的創建

使用object直接創建對象
使用new關鍵字調用構造器創建對象
使用json語法創建對象

BOM（brower object model）：

JavaScript是運行在瀏覽器中的，所以提供了一系列對象用於和瀏覽器窗口進行交互，這些對象主要包括

window
document
location
navigator
screen
等。

通常稱爲瀏覽器對象模型（brower object model）

瀏覽器結構：

BOM的層次結構：

window對象：

window對象是整個JavaScript腳本運行的頂層對象，它的常用屬性如下：

Window對象的常用方法：

window對象的方法和屬性可以分成4類：

創建新窗口、維護現有窗口的行爲：
在窗口中創建帶分區的文檔（窗體和iframe）
定時器的創建和控制
用來控制瀏覽器窗口內特定元素的屬性，如document、navigator、screen等

實例：BOM1.html

history對象：

實例：
history1.html
history2.html
history3.html

location對象：

screen對象：

navigator對象：

實例：loaction.html

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

    <script type="text/javascript">
        document.write("hostname:"+location.hostname+"<br/>");
        document.write("href:"+location.href+"<br/>");  
        document.write("host address:"+location.host+"<br/>");  
        document.write("port:"+location.port+"<br/>");  
        document.write("protocol:"+location.protocol+"<br/>");  
        document.write("availHeight:"+screen.availHeight+"<br/>");  
        document.write("availWidth:"+screen.availWidth+"<br/>");
        document.write("colorDepth:"+screen.hostname+"<br/>");  
        document.write("appCodeName:"+navigator.appCodeName+"<br/>");   
        document.write("appName:"+navigator.appName+"<br/>");   
        document.write("appVersion:"+navigator.appVersion+"<br/>"); 
        document.write("platform:"+navigator.platform+"<br/>"); 
        document.write("userAgent:"+navigator.userAgent+"<br/>");   
        document.write("cookieEnabled:"+navigator.cookieEnabled+"<br/>");
    </script>
</head>
<body>

</body>
</html>

事件

事件的概念：

JavaScript使我們有能力創建動態頁面，網頁中的每個元素都可以產生某些可以觸發JavaScript函數的事件，我們可以認爲事件是可以被JavaScript偵測到的一種行爲。

事件流：

分爲兩類。

冒泡型事件（IE支持）
捕獲型事件 (Firefox、chrome均支持)

使用返回值改變HTML元素的默認行爲
HTML元素大都包含了自己的默認行爲。例如：超鏈接、提交按鈕等。
我們可以通過在綁定事件中加入return false 來阻止它的默認行爲。

通用性的事件監聽方法：

綁定HTML元素屬性：

<input type= "button" value = "clickMe" onclick = "check(this)" />

綁定DOM對象屬性

document.getElementById("btn1").onclick = test ;

實例：jianting1.html

IE中的事件監聽方法：

標準DOM中的事件監聽方法：

實例：jianting2.html

常見的事件監聽：

冒泡型事件：shijianliu1.html
捕獲型事件：shijianliu2.html

訪問事件對象：

事件對象封裝了事件發生的詳細信息，尤其是鼠標、鍵盤事件。如果鼠標事件發生的位置、鍵盤事件的鍵盤鍵等。

IE中的事件對象

IE中的事件對象是一個隱式可用的全局對象：event，它是window對象一個屬性。

//IE中得到事件對象
op.onclick = function(){
    var oEvent = window.event;
}

標準DOM中的事件對象

在標準DOM瀏覽器檢測到發生了某個事件時，將自動創建一個event對象，並隱式地將該對象作爲事件處理函數的第一個參數傳入。

//標準DOM中得到事件對象
op.onclick = function(oEvent{
 //作爲參數傳進來
}

爲了兼容不同的瀏覽器，通常採用下面的方法得到事件對象

op.onclick = function(oEvent){
    if(window.event){oEvent = window.event;}
}

Event事件對象常用屬性：

實例：event.html

常見的事件類型：

常用的鼠標事件：

實例：shubiao.html

常用的鍵盤事件：

實例：jianpan.html

HTML事件：

foolisheddy

發佈了55 篇原創文章 · 獲贊 21 · 訪問量 9萬+

私信關注

Javascript學習筆記(2017.4.13-2017.4.17)

DOM