web前端知識總結-BOM和DOM

BOM：我們都知道JavaScript是執行在瀏覽器中的，所以JavaScript提供了一些列物件用於和瀏覽器視窗進行互動，這些物件主要包括window、document、location、navigator和screen等，通常統稱為瀏覽器物件模型browser object model  BOM

Window物件是整個JavaScript指令碼執行的頂層物件常用屬性如下：

Document-返回視窗內裝載的HTML文件

Location-返回視窗裝載的HTML文件的URL

Navigator-返回瀏覽當前頁面的瀏覽器

Screen-返回當前瀏覽者螢幕物件

History-返回該瀏覽視窗的歷史

Window物件的常用方法：

Alert、confirm、prompt

Close

moveBy、moveTo

resizeBy、resizeTO

scrollBY、scrollTo

Open

setInterval、clearInterval

History方法：

Back-後退到上一個瀏覽的頁面

Forward-前進到下一個瀏覽頁面

Go(intValue)-可以指定前進或後退多少個頁面

DOM：DOM是文件物件模型 document object model 當頁面載入時，可以將結構文件在記憶體中轉換成物件的樹。

DOM中常用三種節點：元素節點、文字節點、屬性節點

JavaScript提供的核心DOM功能：

根據ID訪問HTML元素

利用節點關係訪問HTML元素：

parentNode-返回當前節點的父節點

previousSibling-返回當前節點的前一個兄弟節點

nextSibling-返回當前節點的後一個兄弟節點

childNodes-返回當前節點的所有子節點

firstChild-第一個子節點

 

lastChild-最後一個子節點

getElementByTagName-返回當前節點的具有指定標籤名的所有子節點

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

Action-返回表單的提交地址

Elements-返回表單內全部表單控制元件所組成的陣列，通過陣列可以訪問表單內的任何表單控制元件

Length-返回表單內表單域的個數

Method-返回表單內的method屬性，主要有get和post

Target-確定提交表單時的結果視窗，主要有_self   _blank   _top

Reset（） submit（）-重置表單和確定表單方法

在elements返回的陣列中訪問具體的表單控制元件語法如下：

.elements[index]-返回該表單中第index個表單控制元件

.elements[elementName]-返回表單內ID或name為elementName的表單控制元件

.elementName-返回表單中ID或name為elementName的表單控制元件

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

Caption-返回表格的標題物件

Rows-返回表格的所有表格行

Tbodies-返回表格裡所有<tbody>元素組成的陣列

Tfoot-返回表格裡所有<tfoot>元素

Thead-返回表格裡所有<thead>元素

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

Cells-行內所有的單元格

rowIndex-行在表格內索引

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

cellIndex

DOM建立節點方法：

document.createElement(tag)，tag必須是合法的HTML元素

DOM複製節點的方法：

節點cloneNode(boolean deep),deep為true，複製當前節點以及當前節點的全部後代節點。False時只複製當前節點。

DOM新增、刪除節點方法：

appendChild（newNode）

insertBefore(newNode,refNode)

replaceChild(newNode,oldNode)

removeChild(oldNode)

事件概念：事件是可以被JavaScript偵測到的一種行為

事件流：冒泡型事件、捕獲型事件。IE只支援冒泡，支援標準DOM的瀏覽器兩者都支援

通用性事件監聽：

繫結HTML元素屬性-onclick

繫結DOM物件屬性-document.getElementById().onclick=函式

IE中的事件監聽方法：

obj.attachEvent(“事件型別”，“處理函式”)-新增監聽

obj.detachEvent(“事件型別”，“處理函式”)-取消監聽

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

obj.addEventListener（“事件型別”，“處理函式”，“冒泡事件或捕獲事件”）

obj.removeEventListener（“事件型別”，“處理函式”，“冒泡事件或捕獲事件”）

IE監聽方法中的事件型別和標準DOM監聽方法中的事件型別寫法有不同，前者需要加on開頭，後者不需要，直接寫click、mousemove就行

為了相容不同的瀏覽器，通常採用下面的方法得到事件物件:

Op.onclick=function(oEvent){

   If(window.event){

     oEvent=windwo.event;

   }

}