Javascript之BOM與DOM講解

時間 2019-12-09

標籤 javascript bom dom 講解欄目 JavaScript 简体版

原文原文鏈接

一.Javascript組成

JavaScript的實現包括如下3個部分：javascript

ECMAScript(核心)html	描述了JS的語法和基本對象。html5
文檔對象模型（DOM）java	處理網頁內容的方法和接口node
瀏覽器對象模型（BOM）web	與瀏覽器交互的方法和接口編程

javascript 有三部分構成，ECMAScript，DOM和BOM，根據宿主（瀏覽器）的不一樣，具體的表現形式也不盡相同，ie和其餘的瀏覽器風格迥異,IE 擴展了 BOM，加入了 ActiveXObject 類，能夠經過 JavaScript 實例化 ActiveX 對象數組

1. DOM 是 W3C 的標準； [全部瀏覽器公共遵照的標準]
2. BOM 是各個瀏覽器廠商根據 DOM在各自瀏覽器上的實現;[表現爲不一樣瀏覽器定義有差異,實現方式不一樣]
3. window 是 BOM 對象，而非 js 對象；javacsript是經過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)瀏覽器

ECMAScript擴展知識：緩存

① ECMAScript是一個標準，JS只是它的一個實現，其餘實現包括ActionScript。

② 「ECMAScript能夠爲不一樣種類的宿主環境提供核心的腳本編程能力……」，即ECMAScript不與具體的宿主環境相綁定，如JS的宿主環境是瀏覽器，AS的宿主環境是Flash。

③ECMAScript描述瞭如下內容：語法、類型、語句、關鍵字、保留字、運算符、對象。

二. DOM, DOCUMENT, BOM, WINDOW 區別

DOM 是爲了操做文檔出現的 API，document 是其的一個對象；
BOM 是爲了操做瀏覽器出現的 API，window 是其的一個對象。

BOM是瀏覽器對象模型，DOM是文檔對象模型，前者是對瀏覽器自己進行操做，然後者是對瀏覽器（可當作容器）內的內容進行操做

歸DOM管的：

E區（就是你說的document啦。由web開發人員嘔心瀝血寫出來的一個文件夾，裏面有index.html，CSS和JS什麼鬼的，部署在服務器上，咱們能夠經過瀏覽器的地址欄輸入URL而後回車將這個document加載到本地，瀏覽，右鍵查看源代碼等。

歸BOM管的：

A區（瀏覽器的標籤頁，地址欄，搜索欄，書籤欄，窗口放大還原關閉按鈕，菜單欄等等）

B區（瀏覽器的右鍵菜單）

C區（document加載時的狀態欄，顯示http狀態碼等）

D區（滾動條scroll bar）

2.1 DOM

DOM 全稱是 Document Object Model，也就是文檔對象模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和接口，是HTML和XML的API，DOM把整個頁面規劃成由節點層級構成的文檔。

這個DOM定義了一個HTMLDocument和HTMLElement作爲這種實現的基礎,就是說爲了能以編程的方法操做這個 HTML 的內容（好比添加某些元素、修改元素的內容、刪除某些元素），咱們把這個 HTML 看作一個對象樹（DOM樹），它自己和裏面的全部東西好比 <div></div> 這些標籤都看作一個對象，每一個對象都叫作一個節點（node），節點能夠理解爲 DOM中全部 Object 的父類。

DOM 有什麼用？就是爲了操做 HTML 中的元素，好比說咱們要經過 JS 把這個網頁的標題改了，直接這樣就能夠了：

document.title = 'how to make love';

這個 API 使得在網頁被下載到瀏覽器以後改變網頁的內容成爲可能。

2.2 document

當瀏覽器下載到一個網頁，一般是 HTML，這個 HTML 就叫 document（固然，這也是 DOM 樹中的一個 node），從上圖能夠看到，document 一般是整個 DOM 樹的根節點。這個 document 包含了標題（document.title）、URL（document.URL）等屬性，能夠直接在 JS 中訪問到。

在一個瀏覽器窗口中可能有多個 document，例如，經過 iframe 加載的頁面，每個都是一個 document。

在 JS 中，能夠經過 document 訪問其子節點（其實任何節點均可以），如

document.body;document.getElementById('xxx');

2.3 BOM

BOM 是 Browser Object Model，瀏覽器對象模型。

剛纔說過 DOM 是爲了操做文檔出現的接口，那 BOM 顧名思義其實就是爲了控制瀏覽器的行爲而出現的接口。
瀏覽器能夠作什麼呢？好比跳轉到另外一個頁面、前進、後退等等，程序還可能須要獲取屏幕的大小之類的參數。
因此 BOM 就是爲了解決這些事情出現的接口。好比咱們要讓瀏覽器跳轉到另外一個頁面，只須要

location.href = "http://www.xxxx.com";這個 location 就是 BOM 裏的一個對象。

因爲BOM的window包含了document，所以能夠直接使用window對象的document屬性，經過document屬性就能夠訪問、檢索、修改XHTML文檔內容與結構。由於document對象又是DOM（Document Object Model）模型的根節點。

能夠說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js能夠操做瀏覽器以及瀏覽器讀取到的文檔。

2.4 window

window 也是 BOM 的一個對象，除去編程意義上的「兜底對象」以外，經過這個對象能夠獲取窗口位置、肯定窗口大小、彈出對話框等等。例如我要關閉當前窗口：

window.close();

三.瀏覽器對象模型(BOM)

BOM和DOM的結構關係示意圖

BOM的核心是Window，而Window對象又具備雙重角色，它既是經過js訪問瀏覽器窗口的一個接口，又是一個Global（全局）對象。這意味着在網頁中定義的任何對象，變量和函數，都以window做爲其global對象。

Window對象包含屬性：document、location、navigator、screen、history、frames

Document根節點包含子節點：forms、location、anchors、images、links

從window.document已然能夠看出，DOM的最根本的對象是BOM的window對象的子對象。

區別：DOM描述了處理網頁內容的方法和接口，BOM描述了與瀏覽器進行交互的方法和接口

3.1 Window對象

Window 對象是 JavaScript 層級中的頂層對象。

Window 對象表明一個瀏覽器窗口或一個框架。

Window 對象會在 <body> 或 <frameset> 每次出現時被自動建立。

1）對象屬性

成員對象屬性

window //窗戶自身, window=window.self 可以使用全局屬性 window訪問　Window對象

document 對 Document 對象的只讀引用。請參閱 Document 對象。

history 對 History 對象的只讀引用。請參數 History 對象。

location 用於窗口或框架的 Location 對象。請參閱 Location 對象。

screen 對 Screen 對象的只讀引用。請參數 Screen 對象。

navigator 對 Navigator 對象的只讀引用。請參數 Navigator 對象。

external.AddFavorite("地址","標題" ) //把網站新增到保藏夾

基本屬性

屬性	描述
closed	返回窗口是否已被關閉。
defaultStatus	設置或返回窗口狀態欄中的默認文本。
innerheight	返回窗口的文檔顯示區的高度。
innerwidth	返回窗口的文檔顯示區的寬度。
length	設置或返回窗口中的框架數量。
name	設置或返回窗口的名稱。
opener	返回對建立此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部寬度。
pageXOffset	設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。
pageYOffset	設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
parent	返回父窗口。
self	返回對當前窗口的引用。等價於 Window 屬性。
window	window 屬性等價於 self 屬性，它包含了對窗口自身的引用。
status	設置窗口狀態欄的文本。
top	返回最頂層的先輩窗口。
screenLeft screenTop screenX screenY	只讀整數。聲明瞭窗口的左上角在屏幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

2）對象方法

window.close(); //關閉窗口

window.alert("message"); //彈出一個具備OK按鈕的系統消息框，顯示指定的文本

window.confirm("Are you sure?"); //彈出一個具備OK和Cancel按鈕的詢問對話框，返回一個布爾值

window.prompt("What's your name?", "Default"); //提示用戶輸入信息，接受兩個參數，即要顯示給用戶的文本和文本框中的默認值，將文本框中的值做爲函數值返回

window.status //可使狀態欄的文本暫時改變

window.defaultStatus //默認的狀態欄信息，可在用戶離開當前頁面前一直改變文本

window.setTimeout("alert('xxx')", 1000); //設置在指定的毫秒數後執行指定的代碼，接受2個參數，要執行的代碼和等待的毫秒數

window.clearTimeout("ID"); //取消還未執行的暫停，將暫停ID傳遞給它

window.setInterval(function, 1000); //無限次地每隔指定的時間段重複一次指定的代碼，參數同setTimeout()同樣

window.clearInterval("ID"); //取消時間間隔，將間隔ID傳遞給它

window.history.go(-1); //訪問瀏覽器窗口的歷史，負數爲後退，正數爲前進

window.history.back(); //同上

window.history.forward(); //同上

window.history.length //能夠查看歷史中的頁面數

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

clearTimeout() 取消由 setTimeout() 方法設置的 timeout。

createPopup() 建立一個 pop-up 窗口。

moveBy() 可相對窗口的當前座標把它移動指定的像素。

moveTo() 把窗口的左上角移動到一個指定的座標。

open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。

print() 打印當前窗口的內容。

resizeBy() 按照指定的像素調整窗口的大小。

resizeTo() 把窗口的大小調整到指定的寬度和高度。

scrollBy() 按照指定的像素值來滾動內容。

scrollTo() 把內容滾動到指定的座標。

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

setTimeout(方法,秒數) 在指定的毫秒數後調用函數或計算表達式。　

timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定時器傳參數

擴展

① 若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。

② window.frames 返回窗口中全部命名的框架

③parent是父窗口（若是窗口是頂級窗口，那麼parent==self==top）

top是最頂級父窗口（有的窗口中套了好幾層frameset或者iframe）

self是當前窗口（等價window）

opener是用open方法打開當前窗口的那個窗口

④與消息框有關的方法：alert(String)、confirm(String)、prompt(String)

⑤兩種定時器：setTimeout(code,latency) 和 setInterval(code,period)

注：setTimeout只執行一次code，若是要屢次調用，可讓code自身再次調用setTimeout()；setInteval()會不停地調用code，直到clearInterval()被調用。

3.2 History對象

window.history.length //瀏覽過的頁面數

history.back() //在瀏覽歷史裏後退一步

history.forward() //在瀏覽歷史裏前進一步

history.go(i) //到汗青詳細登記單的第i位

//i>0進步,i<0撤退退卻

3 .3 Screen對象

screen對象：用於獲取某些關於用戶屏幕的信息，也可用window.screen引用它

window.screen.width //屏幕寬度

window.screen.height //屏幕高度

window.screen.colorDepth //屏幕顏色深度

window.screen.availWidth //可用寬度(除去任務欄的高度)

window.screen.availHeight //可用高度(除去任務欄的高度)

3.4 Navigator對象

navigator`對象：包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操做系統上很是有用

　　window.navigator.appCodeName //瀏覽器代碼名

　　window.navigator.appName //瀏覽器步伐名

　　window.navigator.appMinorVersion //瀏覽器補釘版本

　　window.navigator.cpuClass //cpu類型 x86

　　window.navigator.platform //操做體系類型 win32

　　window.navigator.plugins

　　window.navigator.opsProfile

　　window.navigator.userProfile

　　window.navigator.systemLanguage //客戶體系語言 zh-cn簡體中文

　　window.navigator.userLanguage //用戶語言,同上

　　window.navigator.appVersion //瀏覽器版本(包括體系版本)

　　window.navigator.userAgent//用戶代理頭的字符串表示

　　window.navigator.onLine //用戶否在線

　　window.navigator.cookieEnabled //瀏覽器是否撐持cookie

　　window.navigator.mimeTypes

3.5 Location對象

location對象：表示載入窗口的URL，也可用window.location引用它

location.href //當前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm

location.portocol //URL中使用的協議，即雙斜槓以前的部分，如http

location.host //服務器的名字，如www.wrox.com

location.hostname //一般等於host，有時會省略前面的www

location.port //URL聲明的請求的端口，默認狀況下，大多數URL沒有端口信息，如8080

location.pathname //URL中主機名後的部分，如/pictures/index.htm

location.search //執行GET請求的URL中的問號後的部分，又稱查詢字符串，如?param=xxxx

location.hash //若是URL包含#，返回該符號以後的內容，如#anchor1

location.assign("http:www.baidu.com"); //同location.href，新地址都會被加到瀏覽器的歷史棧中

location.replace("http:www.baidu.com"); //同assign()，但新地址不會被加到瀏覽器的歷史棧中，不能經過back和forward訪問

location.reload(true | false); //從新載入當前頁面，爲false時從瀏覽器緩存中重載，爲true時從服務器端重載，默認爲false

document.location.reload(URL) //打開新的網頁

3.6 Document對象

HtmlDocument 爲 Internet Explorer 的文檔對象提供託管包裝，該文檔對象也稱爲 HTML 文檔對象模型 (DOM)。您能夠經過 WebBrowser 控件的 Document 屬性獲取 HtmlDocument 的實例。

HTMLDocument 接口對 DOM Document 接口進行了擴展，定義 HTML 專用的屬性和方法。

HTML 文檔中的 HTML 標記能夠相互嵌套。所以，HtmlDocument 表示一個文檔樹，其子級是 HtmlElement 類的實例。下面的代碼示例演示一個簡單的 HTML 文件。

HtmlDocument 表示 HTML 標記內的整個文檔。BODY、DIV、FORM 和 SPAN 標記各由一個單獨的 HtmlElement 對象表示。

1）對象屬性

document.body//提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。

document.cookie 返回與當前文檔有關的全部 cookie。

document.title //返回文檔標題等價於HTML的title標籤

document.domain 返回當前文檔的域名。

document.URL //設置URL屬性從而在同一窗口打開另外一網頁

document.referrer 返回載入當前文檔的文檔的 URL。

document.lastModified 返回文檔被最後修改的日期和時間。

2）經常使用對象方法

document.write() //動態向頁面寫入內容

document.writeln() 等同於 write() 方法，不一樣的是在每一個表達式以後寫一個換行符。

document.createElement(<Tag>) //用指定標籤類型建立一個新的element對象)

document.getElementById(ID) //得到指定ID值的對象

document.getElementsByName(Name) //得到指定Name值的對象

document.getElementsByTagName() 返回帶有指定標籤名的對象集合。

3）body-主體子對象

document.body //指定文檔主體的開始和結束等價於body>/body>

document.body.bgColor //設置或獲取對象後面的背景顏色

document.body.link //未點擊過的連接顏色

document.body.alink //激活連接(焦點在此連接上)的顏色

document.body.vlink //已點擊過的連接顏色

document.body.text //文本色

document.body.innerText //設置body>…/body>之間的文本

document.body.innerHTML //設置body>…/body>之間的HTML代碼

document.body.topMargin //頁面上邊距

document.body.leftMargin //頁面左邊距

document.body.rightMargin //頁面右邊距

document.body.bottomMargin //頁面下邊距

document.body.background //背景圖片

document.body.appendChild(oTag) //動態生成一個HTML對象

Document子對象HTMLElement對象詳解

HTML DOM 節點

在 HTML DOM （文檔對象模型）中，每一個部分都是節點：

1.文檔自己是文檔節點

2.全部 HTML 元素是元素節點

3.全部 HTML 屬性是屬性節點

4.HTML 元素內的文本是文本節點

5.註釋是註釋節點

Element 對象

在 HTML DOM 中，Element 對象表示 HTML 元素。

Element 對象能夠擁有類型爲元素節點、文本節點、註釋節點的子節點。

NodeList 對象表示節點列表，好比 HTML 元素的子節點集合。

元素也能夠擁有屬性。屬性是屬性節點

獲取

document.getElementById(ID) //得到指定ID值的對象

document.getElementsByName(Name) //得到指定Name值的對象

getElementsByTagName() 返回帶有指定標籤名的對象集合。

屬性和方法

方法裏有a,b的參數僅僅是爲了加深說明,其餘元素沒有a,b不表明是無參方法

Element.add(<class>)給元素添加指定的類

element.accessKey 設置或返回元素的快捷鍵。

element.appendChild() 向元素添加新的子節點，做爲最後一個子節點。

element.attributes 返回元素屬性的集合。

element.childNodes 返回元素子節點的 NodeList。

element.className 設置或返回元素的 class 屬性。

element.clientHeight 返回元素的可見高度。

element.clientWidth 返回元素的可見寬度。

element.cloneNode() 克隆元素。

element.compareDocumentPosition() 比較兩個元素的文檔位置。

element.contentEditable 設置或返回元素的文本方向。

element.dir 設置或返回元素的文本方向。

element.firstChild 返回元素的首個子。

element.getAttribute() 返回元素節點的指定屬性值。

element.getAttributeNode() 返回指定的屬性節點。

element.getElementsByTagName() 返回擁有指定標籤名的全部子元素的集合。

element.getFeature() 返回實現了指定特性的 API 的某個對象。

element.getUserData() 返回關聯元素上鍵的對象。

Element.hidden獲取或設置hidden屬性的存在狀態

element.hasAttribute() 若是元素擁有指定屬性，則返回true，不然返回 false。

element.hasAttributes() 若是元素擁有屬性，則返回 true，不然返回 false。

element.hasChildNodes() 若是元素擁有子節點，則返回 true，不然 false。

element.id 設置或返回元素的 id。

element.innerHTML 設置或返回元素的內容。

element.insertBefore(<a>,<b>) 在指定的已有的子節點以前插入新節點。A插到b前

element.isContentEditable 設置或返回元素的內容。

element.isDefaultNamespace() 若是指定的 namespaceURI 是默認的，則返回 true，不然返回 false。

element.isEqualNode(<a>) 檢查a元素是否與當前元素相等。

element.isSameNode(a) 檢查指定元素是否就是當前元素.

element.isSupported() 若是元素支持指定特性，則返回 true。

element.lang 設置或返回元素的語言代碼。

element.lastChild 返回元素的最後一個子元素。

element.namespaceURI 返回元素的 namespace URI。

element.nextSibling 返回當前元素以後的兄弟元素

element.nodeName 返回元素的名稱。

element.nodeType 返回元素的節點類型。

element.nodeValue 設置或返回元素值。

element.normalize() 合併元素中相鄰的文本節點，並移除空的文本節點。

element.offsetHeight 返回元素的高度。

element.offsetWidth 返回元素的寬度。

element.offsetLeft 返回元素的水平偏移位置。

element.offsetParent 返回元素的偏移容器。

element.offsetTop 返回元素的垂直偏移位置。

element.ownerDocument 返回元素的根元素（文檔對象）。

element.parentNode 返回元素的父節點。

element.previousSibling 返回當前元素以前的兄弟元素

Element.remove(<class>) 從元素移除指定的類

element.removeAttribute() 從元素中移除指定屬性。

element.removeAttributeNode() 移除指定的屬性節點，並返回被移除的節點。

element.removeChild(a) 從元素中移除子節點。

element.replaceChild(a,b) 替換元素中的子節點。

element.scrollHeight 返回元素的總體高度。

element.scrollLeft 返回元素左邊緣與視圖之間的距離。

element.scrollTop 返回元素上邊緣與視圖之間的距離。

element.scrollWidth 返回元素的總體寬度。

element.setAttribute() 把指定屬性設置或更改成指定值。

element.setAttributeNode() 設置或更改指定屬性節點。

element.setIdAttribute()

element.setIdAttributeNode()

element.setUserData() 把對象關聯到元素上的鍵。

element.style 設置或返回元素的 style 屬性。

Element.toggle(<class>)若是類不存在就添加它存在就移除它

element.tabIndex 設置或返回元素的 tab 鍵控制次序。

element.tagName 返回元素的標籤名。

element.textContent 設置或返回節點及其後代的文本內容。

element.title 設置或返回元素的 title 屬性。

element.toString() 把元素轉換爲字符串。

nodelist.item() 返回 NodeList 中位於指定下標的節點。

nodelist.length 返回 NodeList 中的節點數。

contentWindow 屬性若是文檔裏有iframe屬性利用此屬性能夠返回iframe的內容

事件監聽方法單講

element.addEventListener(event, function, useCapture)

參數	描述
event	必須。字符串，指定事件名。注意: 不要使用 "on" 前綴。例如，使用 "click" ,而不是使用 "onclick"。提示：全部 HTML DOM 事件，能夠查看咱們完整的 HTML DOM Event 對象參考手冊。
function	必須。指定要事件觸發時執行的函數。當事件對象會做爲第一個參數傳入函數。事件對象的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent(鼠標事件) 對象。
useCapture	可選。布爾值，指定事件是否在捕獲或冒泡階段執行。可能值: true - 事件句柄在捕獲階段執行 false- false- 默認。事件句柄在冒泡階段執行

Table 對象詳解

Table 對象集合

集合	描述
cells[]	返回包含表格中全部單元格的一個數組。
rows[]	返回包含表格中全部行的一個數組。
tBodies[]	返回包含表格中全部 tbody 的一個數組。

rows 集合返回表格中全部行（TableRow 對象）的一個數組，該集合包括 <thead>、<tfoot> 和 <tbody> 中定義的全部行

TableRow 對象

TableRow 對象表明一個 HTML 表格行。

在 HTML 文檔中 <tr> 標籤每出現一次，一個 TableRow 對象就會被建立。

cells 集合返回表格中全部 <td> 或 <th> 元素。

TableCell 對象

TableCell 對象表明一個 HTML 表格單元格。

在一個 HTML 文檔中 <td> 標籤每出現一次，一個 TableCell 對象就會被建立

Table 對象方法

方法	描述
createCaption()	爲表格建立一個 caption 元素。
createTFoot()	在表格中建立一個空的 tFoot 元素。
createTHead()	在表格中建立一個空的 tHead 元素。
deleteCaption()	從表格刪除 caption 元素以及其內容。
deleteRow()	從表格刪除一行。
deleteTFoot()	從表格刪除 tFoot 元素及其內容。
deleteTHead()	從表格刪除 tHead 元素及其內容。
insertRow()	在表格中插入一個新行。

四.文檔對象模型(DOM)

DOM節點樹模型（以HTML DOM樹爲例）

DOM模型將整個文檔（XML文檔和HTML文檔）當作一個樹形結構，

在DOM中，HTML文檔的層次結構被表示爲一個樹形結構。並用document對象表示該文檔，樹的每一個子節點表示HTML文檔中的不一樣內容。

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象,Document是探索DOM的入口,利用全局變量document能夠訪問Document對象

4.1認識DOM

先看下面代碼

將HTML代碼分解爲DOM節點層次圖:

DOM經過建立樹來表示文檔，描述了處理網頁內容的方法和接口，從而使開發者對文檔的內容和結構具備空前的控制力，用DOM API能夠輕鬆地刪除、添加和替換節點。

1）節點類型

DOM規定文檔中的每一個成分都是一個節點（Node）,HTML文檔能夠說由節點構成的集合，DOM節點有:

類型	描述
元素節點（Element）	上圖中<html>、<body>、<p>等都是元素節點，即標籤。
文本節點（Text）	向用戶展現的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
屬性節點（Attr）	元素屬性，元素纔有屬性,如<a>標籤的連接屬性href="http://www.baidu.com"。

2） DOM節點三大屬性（XML DOM）

屬性	描述
nodeName	元素節點、屬性節點、文本節點分別返回元素的名稱、屬性的名稱和#text的字符串。
nodeType	元素節點、屬性節點、文本節點的nodeType值分別爲一、二、3.、
nodeValue	元素節點、屬性節點、文本節點的返回值分別爲null、屬性值和文本節點內容。

4.2 DOM常見操做

Node爲全部節點的父接口，其定義了一組公共的屬性和方法，以下：

1）獲取節點

① 獲取元素節點：經過document對象的三個方法獲取

document.getElementById("ID")

document.getElementByName("name")

document.getElementsByTagName("p");

② 獲取屬性節點：屬性節點附屬於元素節點，可經過元素節點的getAttributeNode(attrName)方法獲取屬性節點，也可經過getAttribute(attrName)直接獲取屬性值。（與之相對的是Element接口的setAttribute(attrName , attrValue)方法，若是屬性不存在，則直接添加到元素節點上）

③ 獲取文本節點：文本節點爲元素節點的子節點，可經過元素節點（Element接口）提供的childnodes()[index] 方法得到。

childNodes //NodeList，全部子節點的列表

firstChild //Node，指向在childNodes列表中的第一個節點

lastChild //Node，指向在childNodes列表中的最後一個節點

parentNode //Node，指向父節點

previousSibling /Node，/指向前一個兄弟節點：若是這個節點就是第一個節點，那麼該值爲 null

nextSibling //Node，指向後一個兄弟節點：若是這個節點就是最後一個節點，那麼該值爲null

hasChildNodes()` //Boolean，當childNodes包含一個或多個節點時，返回真值

2）改變節點

① 改變屬性節點的值：能夠經過屬性節點的nodeValue直接修改屬性值，也可經過元素節點的setAttribute()方法改變。

② 改變文本節點的值：經過文本節點的nodeValue直接修改。

在HTML DOM中，獲取和改變元素內容最簡單方法是使用元素的innerHTML屬性（innerText屬性返回去掉標籤的innerHTML）

拓展:

innerText、innerHTML、outerHTML、outerText

innerText: 表示起始標籤和結束標籤之間的文本

innerHTML: 表示元素的全部元素和文本的HTML代碼

如：<div><b>Hello</b> world</div>的innerText爲Hello world，innerHTML爲Hello world

outerText: 與前者的區別是替換的是整個目標節點，問題返回和innerText同樣的內容

outerHTML: 與前者的區別是替換的是整個目標節點，返回元素完整的HTML代碼，包括元素自己

一張圖瞭解OUTHTML和innerText、innerHTML：

改變HTML樣式（style屬性）：element.style.color =「red」;

3）刪除節點

① 刪除元素節點：要想刪除元素節點A，需得到A的父節點B，父節點可經過17.1.1中的方法得到，也能夠直接經過A的parentNode屬性得到（推薦）。調用B的removeChild(A) 便可刪除A節點。

② 刪除屬性節點：可經過屬性節點所屬的元素節點的removeAttribute(attrName)或removeAttributeNode(node)刪除。

③ 清空文本節點：最簡單也是最經常使用的方法就是直接設置文本節點的nameNode屬性爲空串：textNode.nodeValue = 」」。

混淆點:

這是一段文本

</p>

var p = document.getElementById('example');

p.nodeValue //null,p是元素節點，因此nodeValue爲null

p.getAttributeNode('id').nodeValue //example，這裏獲取到p的id屬性的屬性節點，nodeValue就是它的屬性值

p.childNodes[0].nodeValue //這是一段文本,

p是含有兩個子節點的，插入的文本雖然沒有標籤，但它依然是一個節點。

其類型是是文本節點，其nodeValue是就是寫入在其中的字符串，包含換行和縮進

p.innerHTML//這是一段文本 <span></span>"

這裏innerHTML返回了p所包含的所有的節點的所包含的各類值了，以字符串的形式。

4）建立和添加節點

① 建立節點：經過document對象的createElement(eleName)、createTextNode(nodeValue)方法可分別建立元素節點和文本節點。屬性節點也有本身的create方法，可是用的少，直接用元素節點的setAttribute()方法便可添加屬性。

② 添加節點：兩個重要的方法：appendChild()和insertBefore()，具體見Node接口中的方法。

擴展：上面的兩個方法都是在已知父節點時用到的，也能夠直接在兄弟節點後添加新節點：x.insertBefore(newNode) 和 x.appendChild(newNode) 均可以向 x 後追加一個新的子節點。

5）替換節點

主要掌握replaceChild(newNode , oldNode) 替換元素節點。（屬性節點和文本節點有更簡單的方法）

4.3 DOM事件

DOM同時兩種事件模型：冒泡型事件和捕獲型事件

冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標的順序觸發

<div onclick="handleClick()">Click Me</div>

</body>

觸發的順序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)

捕獲型事件：與冒泡事件相反的過程，事件從最不精確的對象開始觸發，而後到最精確

上面例子觸發的順序是：document、div

DOM事件模型最獨特的性質是，文本節點也觸發事件(在IE中不會)。

1）事件處理函數/監聽函數

在JavaScript中：

var oDiv = document.getElementById("div1");

oDiv.onclick = function(){ //onclick只能用小寫

alert("Clicked!");

}

或者

var elem =document.getElementById(「id」)

elem.onmouseover=handleMouseOver //handleMouseOver 是函數名

function handleMouseOve(e){...}

在HTML中：

<div onclick="javascript: alert("Clicked!")"></div> //onclick大小寫任意

擴展:

IE事件處理程序attachEvent()和detachEvent()

在IE中，每一個元素和window對象都有兩個方法：attachEvent()和detachEvent()，這兩個方法接受兩個相同的參數，事件處理程序名稱和事件處理程序函數，如：

[object].attachEvent("name_of_event_handler","function_to_attach")

[object].detachEvent("name_of_event_handler","function_to_remove")

var fnClick = function(){

alert("Clicked!");

}

oDiv.attachEvent("onclick", fnClick); //添加事件處理函數

oDiv.attachEvent("onclick", fnClickAnother); // 能夠添加多個事件處理函數

oDiv.detachEvent("onclick", fnClick); //移除事件處理函數

在使用attachEvent()方法的狀況下，事件處理程序會在全局做用域中運行，所以this等於window。

2）跨瀏覽器的事件處理程序

addHandler()和removeHandler()

addHandler()方法屬於一個叫EventUntil()的對象，這兩個方法均接受三個相同的參數，要操做的元素，事件名稱和事件處理程序函數。

3）事件處理器

執行JavaScript 代碼的程序在事件發生時會對事件作出響應。爲了響應一個特定事件

而被執行的代碼稱爲事件處理器。

在HTML標籤中使用事件處理器的語法是：

<HTML標籤事件處理器="JavaScript代碼''>

4）事件處理程序

事件就是用戶或瀏覽器自身執行的某種動做。好比click,mouseup,keydown,mouseover等都是事件的名字。而響應某個事件的函數就叫事件處理程序（事件監聽器），事件處理程序以on開頭，所以click的事件處理程序就是onclick

5）DOM 0級事件處理程序

DOM 0級事件處理程序：把一個函數賦值給一個事件的處理程序屬性

HTML

var btn2=document.getElementById('btn2');得到btn2按鈕對象

btn2.onclick //給btn2添加onclick屬性，屬性又觸發了一個事件處理程序

btn2.onclick=function(){

} //添加匿名函數

btn2.onclick=null //刪除onclick屬性

6）DOM 2級事件處理程序

DOM 2級事件定義了兩個方法，用於指定和刪除事件處理程序的操做。addEventListener()和removeEventListener()

addEventListener()和removeEventListener()

在DOM中，addEventListener()和removeEventListener()用來分配和移除事件處理函數，與IE不一樣的是，這些方法須要三個參數：事件名稱，要分配的函數和處理函數是用於冒泡階段(false)仍是捕獲階段(true)，默認爲冒泡階段false

[object].addEventListener("name_of_event",fnhander,bcapture)

[object].removeEventListener("name_of_event",fnhander,bcapture)

var fnClick = function(){

alert("Clicked!");

}

oDiv.addEventListener("onclick", fnClick, false); //添加事件處理函數

oDiv.addEventListener("onclick", fnClickAnother, false); // 與IE同樣，能夠添加多個事件處理函數

oDiv.removeEventListener("onclick", fnClick, false); //移除事件處理函數

若是使用addEventListener()將事件處理函數加入到捕獲階段，則必須在removeEventListener()中指明是捕獲階段，才能正確地將這個事件處理函數刪除

oDiv.onclick = fnClick;

oDiv.onclick = fnClickAnother; //使用直接賦值，後續的事件處理函數會覆蓋前面的處理函數

oDiv.onclick = fnClick;

oDiv.addEventListener("onclick", fnClickAnother, false); //會按順序進行調用，不會覆蓋

7）事件類型

鼠標事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove

鍵盤事件：keydown、keypress、keyup

HTML事件：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur

Window 事件屬性(沒加藍的都是h 5新事件)

針對 window 對象觸發的事件（應用到 <body> 標籤）：

屬性

onafterprint 文檔打印以後運行的腳本。

onbeforeprint 文檔打印以前運行的腳本。

onbeforeunload 文檔卸載以前運行的腳本。

onerror 在錯誤發生時運行的腳本。

onhaschange 當文檔已改變時運行的腳本。

onload 頁面結束加載以後觸發。

onmessage 在消息被觸發時運行的腳本。

可使用調用 postMessage ()向主線程發送消息,在某些場景下，業務調用方可能須要主動跟定位組件通訊,能夠經過html5 postMessage的方式主動與定位組件發起通訊

onoffline 當文檔離線時運行的腳本。

ononline 當文檔上線時運行的腳本。

onpagehide 當窗口隱藏時運行的腳本。

onpageshow 當窗口成爲可見時運行的腳本。

onpopstate 當窗口歷史記錄改變時運行的腳本。

onredo 當文檔執行撤銷（redo）時運行的腳本。

onresize 當瀏覽器窗口被調整大小時觸發。

onstorage 在 Web Storage 區域更新後運行的腳本。

onundo 在文檔執行 undo 時運行的腳本。

onunload 一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。

Form 事件

由 HTML 表單內的動做觸發的事件（應用到幾乎全部 HTML 元素，但最經常使用在 form 元素中）：

屬性

onblur 元素失去焦點時運行的腳本。

onchange在元素值被改變時運行的腳本。

oncontextmenu 當上下文菜單被觸發時運行的腳本。

onfocus 當元素失去焦點時運行的腳本。

onformchange 在表單改變時運行的腳本。

onforminput 當表單得到用戶輸入時運行的腳本。

oninput 當元素得到用戶輸入時運行的腳本。

oninvalid 當元素無效時運行的腳本。

onreset 當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。

onselect 在元素中文本被選中後觸發。

onsubmit 在提交表單時觸發。

Event對象

Event對象的經常使用屬性

名稱	說明	返回
type	事件的名稱如mouseover	字符串
target	事件指向的元素	HTMLElement

得到event對象兼容性寫法

document.onclick=function(event){

event = event || window.event;

};

個別事件講解

oninput,onpropertychange,onchange的用法

oninput:

oninput 事件在用戶輸入時觸發。

該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。

提示：該事件相似於 onchange 事件。不一樣之處在於 oninput 事件在元素值發生變化是當即觸發， onchange 在元素失去焦點時觸發。另一點不一樣是 onchange 事件也能夠做用於 <keygen> 和 <select> 元素。

onchange

onchange 事件會在域的內容改變時發生。

onchange 事件也可用於單選框與複選框改變後觸發的事件。

onchange觸發事件必須知足兩個條件：

a）當前對象屬性改變，而且是由鍵盤或鼠標事件激發的（腳本觸發無效）

b）當前對象失去焦點(onblur)；

onpropertychange的話，只要當前對象屬性發生改變，都會觸發事件，可是它是IE專屬的；

oninput是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點不一樣，它綁定於對象時，並不是該對象全部屬性改變都能觸發事件，它只在對象value值發生改變時奏效。

在textarea中，若是想捕獲用戶的鍵盤輸入，用onkeyup檢查事件就能夠了，可是onkeyup並不支持複製和粘貼，所以須要動態監測textarea中值的變化，這就須要onpropertychange（用在IE瀏覽器）和oninput（非IE瀏覽器）結合在一塊兒使用了。

移動端觸摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

一、Touch事件簡介

pc上的web頁面鼠標會產生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，可是在移動終端如 iphone、ipod Touch、ipad上的web頁面觸屏時會產生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分別對應了觸屏開始、拖拽及完成觸屏事件和取消。

當按下手指時，觸發ontouchstart；

當移動手指時，觸發ontouchmove；

當移走手指時，觸發ontouchend。

當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的touch操做，即觸發ontouchcancel。通常會在ontouchcancel時暫停遊戲、存檔等操做。

二、Touch事件與Mouse事件的出發關係

在觸屏操做後，手指提起的一剎那（即發生ontouchend後），系統會判斷接收到事件的element的內容是否被改變，若是內容被改變，接下來的事件都不會觸發，若是沒有改變，會按照mousedown，mouseup，click的順序觸發事件。特別須要提到的是，只有再觸發一個觸屏事件時，纔會觸發上一個事件的mouseout事件。

附:DOM基本操做思惟導圖

window對象思惟導圖

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。