一鹃觉、什么是BOM？

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

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

三咧叭、BOM對(duì)象

window 對(duì)象，是 JS 的最頂層對(duì)象烁竭，其他的 BOM 對(duì)象都是 window 對(duì)象的屬性菲茬；

document 對(duì)象，文檔對(duì)象派撕；

location 對(duì)象婉弹，瀏覽器當(dāng)前URL信息；

navigator 對(duì)象终吼，瀏覽器本身信息镀赌；

screen 對(duì)象，客戶(hù)端屏幕信息际跪；

history 對(duì)象商佛，瀏覽器訪(fǎng)問(wèn)歷史信息；

1）姆打、Window對(duì)象：BOM的核心對(duì)象是window良姆，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中穴肘，window對(duì)象有雙重角色歇盼，它既是通過(guò)javascript訪(fǎng)問(wèn)瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象评抚。

2）豹缀、location對(duì)象

window.location對(duì)象：用于獲得當(dāng)前頁(yè)面的地址 (URL)伯复，并把瀏覽器重定向到新的頁(yè)面。在編寫(xiě)時(shí)可不使用 window 這個(gè)前綴

3）邢笙、navigator對(duì)象

window.navigator 對(duì)象包含有關(guān)訪(fǎng)問(wèn)者瀏覽器的信息啸如。在編寫(xiě)時(shí)可不使用 window 這個(gè)前綴。

navigator.platform：操作系統(tǒng)類(lèi)型氮惯；

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

navigator.appName：瀏覽器名稱(chēng)；

navigator.appVersion：瀏覽器版本妇汗；

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

userAgent是最常用的屬性，用來(lái)完成瀏覽器判斷

4）杨箭、screen對(duì)象

window.screen 對(duì)象包含有關(guān)用戶(hù)屏幕的信息寞焙。

screen.availWidth 屬性返回訪(fǎng)問(wèn)者屏幕的寬度，以像素計(jì)互婿，減去界面特性捣郊，比如窗口任務(wù)欄。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? screen.availHeight 屬性返回訪(fǎng)問(wèn)者屏幕的高度慈参，以像素計(jì)呛牲，減去界面特性，比如窗口任務(wù)欄

5）驮配、 history對(duì)象

window.history 對(duì)象包含瀏覽器的歷史娘扩。為了保護(hù)用戶(hù)隱私，對(duì) JavaScript 訪(fǎng)問(wèn)該對(duì)象的方法做出了限制壮锻。

四window對(duì)象常用方法有

彈框類(lèi)的方法畜侦。前面省略window

alert('提示信息')

confirm("確認(rèn)信息")

prompt("彈出輸入框")

open("url地址"，“打開(kāi)的方式（可以是-self或-black）”躯保，“新窗口的大小”）注：如果url為空，則默認(rèn)打開(kāi)一個(gè)空白頁(yè)面澎语，如果打開(kāi)方式為空途事，則默認(rèn)為新窗口方式打開(kāi)頁(yè)面。返回值為：返回新打開(kāi)窗口的window對(duì)象

五擅羞、窗口尺寸與大小

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

滾動(dòng)條滾動(dòng)距離： document.documentElement.clientScrollTop? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? document.documentElement.clientScrollLeft

Dom筆記

一尸变、dom是什么？

對(duì)于JavaScript减俏，為了能夠使JavaScript操作Html召烂，JavaScript就有了一套自己的dom編程接口。

對(duì)于Html娃承，dom使得html形成一棵dom樹(shù)奏夫，類(lèi)似于一顆家族樹(shù)一樣怕篷，一層接一層，子子孫孫酗昼。

二廊谓、Html的DOM樹(shù)是什么？

HTML中的每個(gè)標(biāo)簽元素麻削，屬性蒸痹，文本都能看做是一個(gè)DOM的節(jié)點(diǎn)，這些dom節(jié)點(diǎn)構(gòu)成了一個(gè)樹(shù)形結(jié)構(gòu)

三呛哟、原生的dom操作指的是什么叠荠？

就是用原生的js進(jìn)行的操作，相對(duì)的就是非原生操作扫责，比如用jquery操作dom

四.介紹Html的DOM樹(shù)：

說(shuō)明：html標(biāo)簽通過(guò)瀏覽器的解析后才會(huì)形成dom樹(shù)榛鼎，此后HTML中的每個(gè)標(biāo)簽元素，屬性公给，文本都能看做是一個(gè)DOM的節(jié)點(diǎn)借帘，JavaScript都能通過(guò)dom的提供的編程接口操作到每個(gè)節(jié)點(diǎn)，去了解瀏覽器的渲染機(jī)制能夠幫助我們了解dom淌铐。

五

常用屬性:

獲取當(dāng)前元素的父節(jié)點(diǎn) ：

element.parentNode? ? //返回當(dāng)前元素的父節(jié)點(diǎn)對(duì)象

獲取當(dāng)前元素的子節(jié)點(diǎn)：

element.chlidren? ? ? ? //返回當(dāng)前元素所有子元素節(jié)點(diǎn)對(duì)象肺然，只返回HTML節(jié)點(diǎn)

element.chilidNodes? //返回當(dāng)前元素多有子節(jié)點(diǎn)，包括文本腿准，HTML际起，屬性節(jié)點(diǎn)。（回車(chē)也會(huì)當(dāng)做一個(gè)節(jié)點(diǎn)）

element.firstChild? ? ? //返回當(dāng)前元素的第一個(gè)子節(jié)點(diǎn)對(duì)象

element.lastChild? ? ? //返回當(dāng)前元素的最后一個(gè)子節(jié)點(diǎn)對(duì)象

獲取當(dāng)前元素的同級(jí)元素：

element.nextSibling? ? ? ? ? //返回當(dāng)前元素的下一個(gè)同級(jí)元素 沒(méi)有就返回null

element.previousSibling? //返回當(dāng)前元素上一個(gè)同級(jí)元素 沒(méi)有就返回null

獲取當(dāng)前元素的文本：

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

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

獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類(lèi)型：node.nodeType? //返回節(jié)點(diǎn)的類(lèi)型,數(shù)字形式（1-12）常見(jiàn)幾個(gè)1：元素節(jié)點(diǎn)弟跑，2：屬性節(jié)點(diǎn)灾前，3：文本節(jié)點(diǎn)。

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

日期對(duì)象處理

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

var date = new Date()

二饲嗽、.獲取這個(gè)月總天數(shù)

var date = new Date()

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

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

console.log(allDays)

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

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

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

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

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

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

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

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

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

setTime() 以毫秒設(shè)置 Date 對(duì)象巫财。

四盗似、獲取時(shí)間日期的方法

getDate() 從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。 幾號(hào)

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

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

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

getHours() 返回 Date 對(duì)象的小時(shí) (0 ~ 23)闽瓢。 時(shí)

getMinutes() 返回 Date 對(duì)象的分鐘 (0 ~ 59)接癌。 分

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

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

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

四缺猛、定義一個(gè)日期對(duì)象

使用關(guān)鍵詞new來(lái)定義一個(gè)Date對(duì)象，如下面例子中所示椭符，定義一個(gè)名為myDate的日期對(duì)象：

var myDate=new Date()

注意：日期對(duì)象會(huì)自動(dòng)取當(dāng)前的日期和時(shí)間為初始值荔燎。

五、set方法　　　

　　　　setFullYear(year, opt_month, opt_date) ：設(shè)置Date對(duì)象的年份值销钝；4位年份有咨。

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

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

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

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

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

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