DOM：

　　HTML DOM（Docuiment Object Model）是MHTL文檔對(duì)象模型的縮寫。根據(jù)W3C DOM規(guī)范，DOM是一種與瀏覽器、平臺(tái)語(yǔ)言無(wú)關(guān)的接口，使得用戶可以訪問(wèn)頁(yè)面上其他的標(biāo)準(zhǔn)組件。DOM與JavaScript結(jié)合ilai實(shí)現(xiàn)了Web網(wǎng)頁(yè)的行為與結(jié)構(gòu)的分離。

　　　　DOM 是 W3C（萬(wàn)維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)。

 

　　　　DOM 定義了訪問(wèn) HTML 和 XML 文檔的標(biāo)準(zhǔn)：

 

　　　　W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分：

 

• • • 　　　　核心 DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
    • 　　　　XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
    • 　　　　HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型

 

DOM的起源：

DOM的應(yīng)用：

創(chuàng)建、插入和刪除DOM元素（this的使用）
創(chuàng)建：createElement() ，之后添加 oUl.appendChild(oLi); 格式：父級(jí).appendChild(子節(jié)點(diǎn))；
插入：父級(jí).appendChild(子節(jié)點(diǎn)) ，父級(jí).insertBefore(子節(jié)點(diǎn)，在誰(shuí)之前插入)
IE 有兼容性問(wèn)題 ，聯(lián)合兩個(gè)插入方法用if判斷解決
刪除：removeChild(),

·文檔碎片
創(chuàng)建文檔碎片：createDocumentFragment();

DOM操作應(yīng)用（高級(jí)）
·表格應(yīng)用
<thead>表頭， <tbody>表格的內(nèi)容，便捷操作：
getElementsByTagName('tbody')[0] = tBodies[0]
getElementsByTagName('tr')[0] = rows[0]
getElementsByTagName('td')[0] = cells[0]
tBodies是數(shù)組 、一個(gè)表格只能有一個(gè)表頭tHead表尾tFoot

·表格搜索： 
忽略大小寫搜索：toLowerCase() ：轉(zhuǎn)成全小寫的形式
模糊搜索：search(),找到就返回字符串出現(xiàn)的位置，沒找到返回-1
關(guān)鍵字搜索：split()
篩選：先讓所有的display為none隱藏起來(lái)，符合條件display就變成block顯示出來(lái)

·表格排序
appendChild()的使用：1.先把元素從原有的父級(jí)上刪掉 2.添加到新的父級(jí)
sort()的使用（數(shù)組排序）
---------------------
作者：weihongda666
來(lái)源：CSDN
（轉(zhuǎn)載：https://blog.csdn.net/weihongda666/article/details/79016467  ；相關(guān)搜索：http://www.rzrgm.cn/allan-king/p/5799144.html）

DOM的Method（部分）：

1.通過(guò)getElementById()方法訪問(wèn)節(jié)點(diǎn)

　　document對(duì)象的getElementById()方法可以訪問(wèn)頁(yè)面中的節(jié)點(diǎn)，該方法在使用時(shí)，必須指定一個(gè)目標(biāo)一個(gè)元素的id作為參數(shù)。

　　基本語(yǔ)法：

　　例：var s=document.getElementById(id);  //調(diào)用時(shí)參數(shù)需要加雙引號(hào)

2.通過(guò)getElementsByName()方法訪問(wèn)節(jié)點(diǎn)

 　　通過(guò)元素名字來(lái)進(jìn)行訪問(wèn)。

　　 基本語(yǔ)法：

　　 例：var s=document.getElementsByName(name);  //調(diào)用時(shí)參數(shù)需要加雙引號(hào)

 

3.通過(guò)getElementsByTagName()方法訪問(wèn)節(jié)點(diǎn)

 

 　　通過(guò)標(biāo)記名稱來(lái)獲取頁(yè)面上所有同類的元素。

 

　　 基本語(yǔ)法：

 

　　 例：var s=document.getElementsByName(tagname);  

4.通過(guò)form元素方法訪問(wèn)節(jié)點(diǎn)

 　　如果要獲得頁(yè)面上中的form對(duì)象，除了getElementById()方法訪問(wèn)、getElementsByName()方法訪問(wèn)，還可以通過(guò)document對(duì)象的forms屬性來(lái)獲得這個(gè)form對(duì)象。

　　 基本語(yǔ)法：

　　 例：

　　 var myfrm=document.forms;    //6通過(guò)document的forms屬性對(duì)象獲得數(shù)組對(duì)象

　　 var mloginform=myfrm[0];             //獲得數(shù)組中的第一個(gè)form對(duì)象

其他方法：getElementsByClassName()   返回包含帶有指定類名的所有元素的節(jié)點(diǎn)列表。  appendChild()   把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)。 removeChild()   刪除子節(jié)點(diǎn)。  replaceChild()  替換子節(jié)點(diǎn)。  insertBefore()  在指定的子節(jié)點(diǎn)前面插入新的子節(jié)點(diǎn)。

　　　　　　createAttribute()  創(chuàng)建屬性節(jié)點(diǎn)。  createTextNode()  創(chuàng)建文本節(jié)點(diǎn)。getAttribute()  返回指定的屬性值。  setAttribute()  把指定屬性設(shè)置或修改為指定的值。

【在DOM中還有兩個(gè)很重要的屬性，分別是innerText和innerHTML】

　　innerHTML 屬性設(shè)置或返回表格行的開始和結(jié)束標(biāo)簽之間的 HTML。

　　innerText 打印標(biāo)簽之間的純文本信息，會(huì)將標(biāo)簽過(guò)濾掉。

 

BOM：

 

BOM的介紹：

 

 

　　　　 broswer object model（瀏覽器對(duì)象模型），由五個(gè)對(duì)象組成：  Window:對(duì)象表示瀏覽器中打開的窗口 最頂層對(duì)象. Navigator :瀏覽器對(duì)象.Screen: 屏幕對(duì)象 ，History:瀏覽器歷史對(duì)象，Location:地址對(duì)象.

 

 

 

　　 BOM（Browser Object MOdel）也稱為瀏覽器對(duì)象模型。瀏覽器對(duì)象模型定義了JavaScript可以進(jìn)行操作的瀏覽器的各個(gè)功能不能部件（如窗口本身、屏幕功能部件、瀏覽歷史記錄等）的途徑以及操作方法。

 

BOM的應(yīng)用：

　　　　

　　　　BOM，Bowser Object Model瀏覽器對(duì)象模型。提供了訪問(wèn)和操作瀏覽器各組件的途徑或方法。

　　　　比如：Navigator對(duì)象：瀏覽器的名稱、版本號(hào)、客戶端操作系統(tǒng)、系統(tǒng)語(yǔ)言等

　　　　Window：彈出一個(gè)廣告窗口、窗口的尺寸；

　　　　History：獲取到你瀏覽器的歷史記錄；

BOM的方法：

 

　　Closed：判斷一個(gè)窗口是否關(guān)閉；

　　Name：獲取當(dāng)前窗口的名稱；

　　innerWidth：指窗口的凈寬，不含：菜單欄、地址欄、狀態(tài)欄、工具欄；

　　在IE中不支持  IE中可以使用body元素的clientWidth和clientHeight來(lái)代替。

　　innerHeight：指窗口的凈高，不含：菜單欄、地址欄、狀態(tài)欄等；在IE中不支持

　　outerWidth：指窗口的總寬度，包含：菜單欄、地址欄、狀態(tài)欄等。IE不支持

　　outerHeight：指窗口的總高度，同上。IE不支持

 

　　window對(duì)象的方法　：

　　Window.alert(str)：彈出一個(gè)警告對(duì)話框；

　　Window.prompt()：彈出一個(gè)輸入對(duì)話框

　　Window.confirm()：彈出一個(gè)確認(rèn)對(duì)話框

　　Window.close()：關(guān)閉窗口

　　Window.print()：打印窗口中的網(wǎng)頁(yè)

　　　　【所有瀏覽器都支持 window 對(duì)象。它表示瀏覽器窗口。所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。全局變量是 window 對(duì)象的屬性。全局函數(shù)是 window 對(duì)象的方法。甚至 HTML DOM 的 document 也是 window 對(duì)象的屬性之一】

　　

　　location對(duì)象方法：

location對(duì)象是一個(gè)很特別的對(duì)象，因?yàn)樗仁莣indow對(duì)象的屬性，也是document對(duì)象的屬性。（轉(zhuǎn)自：https://blog.csdn.net/CC25802580/article/details/80727073）

window.location和document.location引用的是同一個(gè)對(duì)象。 

location對(duì)象的屬性：

Navigation對(duì)象方法：（轉(zhuǎn)自：http://www.rzrgm.cn/fengmingyue/p/5946116.html）

history對(duì)象
history對(duì)象保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起。因?yàn)閔istory是window對(duì)象的屬性，因此每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁(yè)以及每個(gè)框架，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)。處于安全方面的考慮，開發(fā)人員是無(wú)法知道用戶瀏覽過(guò)的URL，不過(guò)，借助用戶訪問(wèn)過(guò)的頁(yè)面列表，同樣可以在不知道實(shí)際URL的情況下實(shí)現(xiàn)后退和前進(jìn)。

使用go()方法可以在用戶的歷史記錄中任意跳轉(zhuǎn)，可以向后也可以向前。該方法接收一個(gè)參數(shù)：表示向前或者向后跳轉(zhuǎn)的頁(yè)面數(shù)的整數(shù)值。負(fù)數(shù)表示向后跳轉(zhuǎn)(類似單擊瀏覽器的后退按鈕)，正數(shù)表示向前跳轉(zhuǎn)(類似瀏覽器的前進(jìn)按鈕)。

//后退一頁(yè)
history.go(-1);
//前進(jìn)一頁(yè)
history.go(1);

（轉(zhuǎn)自：https://blog.csdn.net/CC25802580/article/details/80727073 ）