一、什么是BOM？

BOM：Browser Object Model 是瀏覽器對象模型，瀏覽器對象模型提供了獨立與內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)，BOM由多個對象構(gòu)成，其中代表瀏覽器窗口的window對象是BOM的頂層對象，其他對象都是該對象的子對象。

二、關(guān)于BOM知識的思維導(dǎo)圖

三、BOM對象

window 對象，是 JS 的最頂層對象，其他的 BOM 對象都是 window 對象的屬性；

document 對象，文檔對象；

location 對象，瀏覽器當前URL信息；

navigator 對象，瀏覽器本身信息；

screen 對象，客戶端屏幕信息；

history 對象，瀏覽器訪問歷史信息；

1）、Window對象：BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是通過javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象。

2）、location對象

window.location對象：用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。在編寫時可不使用 window 這個前綴

3）、navigator對象

window.navigator 對象包含有關(guān)訪問者瀏覽器的信息。在編寫時可不使用 window 這個前綴。

navigator.platform：操作系統(tǒng)類型；

navigator.userAgent：瀏覽器設(shè)定的User-Agent字符串。

navigator.appName：瀏覽器名稱；

navigator.appVersion：瀏覽器版本；

navigator.language：瀏覽器設(shè)置的語言；

userAgent是最常用的屬性，用來完成瀏覽器判斷

4）、screen對象

window.screen 對象包含有關(guān)用戶屏幕的信息。

screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如窗口任務(wù)欄。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如窗口任務(wù)欄

5）、 history對象

window.history 對象包含瀏覽器的歷史。為了保護用戶隱私，對 JavaScript 訪問該對象的方法做出了限制。

四window對象常用方法有

彈框類的方法。前面省略window

alert('提示信息')

confirm("確認信息")

prompt("彈出輸入框")

open("url地址"，“打開的方式（可以是-self或-black）”，“新窗口的大小”）注：如果url為空，則默認打開一個空白頁面，如果打開方式為空，則默認為新窗口方式打開頁面。返回值為：返回新打開窗口的window對象

五、窗口尺寸與大小

可視區(qū)尺寸：? document.documentElement.clientWidth? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? document.documentElement.clientHeight

滾動條滾動距離： document.documentElement.clientScrollTop? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? document.documentElement.clientScrollLeft

Dom筆記

一、dom是什么？

對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。

對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。

二、Html的DOM樹是什么？

HTML中的每個標簽元素，屬性，文本都能看做是一個DOM的節(jié)點，這些dom節(jié)點構(gòu)成了一個樹形結(jié)構(gòu)

三、原生的dom操作指的是什么？

就是用原生的js進行的操作，相對的就是非原生操作，比如用jquery操作dom

四.介紹Html的DOM樹：

說明：html標簽通過瀏覽器的解析后才會形成dom樹，此后HTML中的每個標簽元素，屬性，文本都能看做是一個DOM的節(jié)點，JavaScript都能通過dom的提供的編程接口操作到每個節(jié)點，去了解瀏覽器的渲染機制能夠幫助我們了解dom。

五

常用屬性:

獲取當前元素的父節(jié)點 ：

element.parentNode? ? //返回當前元素的父節(jié)點對象

獲取當前元素的子節(jié)點：

element.chlidren? ? ? ? //返回當前元素所有子元素節(jié)點對象，只返回HTML節(jié)點

element.chilidNodes? //返回當前元素多有子節(jié)點，包括文本，HTML，屬性節(jié)點。（回車也會當做一個節(jié)點）

element.firstChild? ? ? //返回當前元素的第一個子節(jié)點對象

element.lastChild? ? ? //返回當前元素的最后一個子節(jié)點對象

獲取當前元素的同級元素：

element.nextSibling? ? ? ? ? //返回當前元素的下一個同級元素 沒有就返回null

element.previousSibling? //返回當前元素上一個同級元素 沒有就返回null

獲取當前元素的文本：

element.innerHTML? //返回元素的所有文本，包括html代碼

element.innerText? ? //返回當前元素的自身及子代所有文本值，只是文本內(nèi)容，不包括html代碼

獲取當前節(jié)點的節(jié)點類型：node.nodeType? //返回節(jié)點的類型,數(shù)字形式（1-12）常見幾個1：元素節(jié)點，2：屬性節(jié)點，3：文本節(jié)點。

設(shè)置樣式：element.style.color=“#eea”;? ? ? //設(shè)置元素的樣式時使用style，這里以設(shè)置文字顏色為例。

日期對象處理

一、創(chuàng)建日期對象

var date = new Date()

二、.獲取這個月總天數(shù)

var date = new Date()

date.setMonth(date.getMonth()+1, 0) // 設(shè)置為下個月0號也就是這個月最后一天

var allDays = date.getDate() // 最后一天是幾號這個月就有幾天

console.log(allDays)

三、設(shè)置時間的常用方法

setDate() 設(shè)置 Date 對象中月的某一天 (1 ~ 31)。

setMonth() 設(shè)置 Date 對象中月份 (0 ~ 11)。

setFullYear() 設(shè)置 Date 對象中的年份（四位數(shù)字）。

setYear() 請使用 setFullYear() 方法代替。

setHours() 設(shè)置 Date 對象中的小時 (0 ~ 23)。

setMinutes() 設(shè)置 Date 對象中的分鐘 (0 ~ 59)。

setSeconds() 設(shè)置 Date 對象中的秒鐘 (0 ~ 59)。

setMilliseconds() 設(shè)置 Date 對象中的毫秒 (0 ~ 999)。

setTime() 以毫秒設(shè)置 Date 對象。

四、獲取時間日期的方法

getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 幾號

getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。 星期幾

getMonth() 從 Date 對象返回月份 (0 ~ 11)。 月份?

getFullYear() 從 Date 對象以四位數(shù)字返回年份。 年份?

getHours() 返回 Date 對象的小時 (0 ~ 23)。 時

getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。 分

getSeconds() 返回 Date 對象的秒數(shù) (0 ~ 59)。 秒

getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。 毫秒?

getTime() 返回 1970 年 1 月 1 日至

四、定義一個日期對象

使用關(guān)鍵詞new來定義一個Date對象，如下面例子中所示，定義一個名為myDate的日期對象：

var myDate=new Date()

注意：日期對象會自動取當前的日期和時間為初始值。

五、set方法　　　

　　　　setFullYear(year, opt_month, opt_date) ：設(shè)置Date對象的年份值；4位年份。

　　　　 setMonth(month, opt_date) ：設(shè)置Date對象的月份值。0表示1月，11表示12月。

　　　　 setDate(date) ：設(shè)置Date對象的月份中的日期值；值的范圍1~31 。

　　　　 setHours(hour, opt_min, opt_sec, opt_msec) ：設(shè)置Date對象的小時值。

　　　　 setMinutes(min, opt_sec, opt_msec) ：設(shè)置Date對象的分鐘值。

　　　　 setSeconds(sec, opt_msec) ：設(shè)置Date對象的秒數(shù)值。

　　　　 setMilliseconds(msec) ：設(shè)置Date對象的毫秒值。