DOM與BOM的概念

DOM是一個使程序和腳本有能力動態地訪問和更新文檔的內容、結構以及樣式的平臺和語言中立的接口。而OM定義了JavaScript能夠進行操做的瀏覽器的各個功能部件的接口。

起源

在瀏覽器廠商進行瀏覽器大站的同時，W3C結合你們的優勢推出了一個標準化的DOM，並於1998年10月完成了第一級 DOM，即：DOM1。W3C將DOM定義爲一個與平臺和編程語言無關的接口，

經過這個接口程序和腳本能夠動態的訪問和修改文檔的內容、結構和樣式。

應用

1、查找元素

1.直接查找：

　　　　document.getElementById             //根據ID獲取一個標籤

　　　　document.getElementsByName          //根據name屬性獲取標籤集合

　　　　document.getElementsByClassName     //根據class屬性獲取標籤集合

　　　　document.getElementsByTagName       //根據標籤名獲取標籤集合

2.間接查找：

　　　　parentNode          // 父節點

　　　　 childNodes             // 全部子節點

　　　　 firstChild             // 第一個子節點

　　　　 lastChild              // 最後一個子節點

　　　　 nextSibling            // 下一個兄弟節點

　　　　 previousSibling        // 上一個兄弟節點

　　　　  parentElement           // 父節點標籤元素

　　　　 children                // 全部子標籤

　　　　 firstElementChild       // 第一個子標籤元素

　　　　 lastElementChild        // 最後一個子標籤元素

　　　　 nextElementtSibling     // 下一個兄弟標籤元素

　　　　 previousElementSibling  // 上一個兄弟標籤元素

 2、操做

 1.內容：

　　　　innerText              //文本

　　　　outerText

　　　　innerHTML              //HTML內容

　　　　innerHTML 

　　　　value                  // 值

2.屬性：

　　　　 attributes                // 獲取全部標籤屬性

　　　　setAttribute(key,value)   // 設置標籤屬性

　　　　getAttribute(key)         // 獲取指定標籤屬性

3.class操做：

　　　　className                // 獲取全部類名

　　　　classList.remove(cls)    // 刪除指定類

　　　　classList.add(cls)       // 添加類

4.標籤操做：

建立標籤： var tag = "<a class='c1' href=''></a>"

操做標籤： var obj = "<input type='text' />" ;

　　　　　xxx.insertAdjacentHTML( "beforeEnd" ,obj);

　　　　　xxx.insertAdjacentElement( 'afterBegin' ,document.createElement( 'p' ))

樣式操做： var obj = document.getElementById( 'i1' )

　　　　　obj.style.fontSize = "32px" ;

　　　　　obj.style.backgroundColor = "red" ;

3、事件：

來源：https://www.cnblogs.com/allan-king/p/5799144.html

 

DOM的（method）方法：

1.經過getElementById()方法訪問節點

　　document對象的getElementById()方法能夠訪問頁面中的節點，該方法在使用時，必須指定一個目標一個元素的id做爲參數。

　　基本語法：

　　例：var s=document.getElementById(id);  //調用時參數須要加雙引號

2.經過getElementsByName()方法訪問節點

 　　經過元素名字來進行訪問。

　　 基本語法：

　　 例：var s=document.getElementsByName(name);  //調用時參數須要加雙引號

 

3.經過getElementsByTagName()方法訪問節點

 

 　　經過標記名稱來獲取頁面上全部同類的元素。

 

　　 基本語法：

 

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

4.經過form元素方法訪問節點

 　　若是要得到頁面上中的form對象，除了getElementById()方法訪問、getElementsByName()方法訪問，還能夠經過document對象的forms屬性來得到這個form對象。

　　 基本語法：

　　 例：

　　 var myfrm=document.forms;    //6經過document的forms屬性對象得到數組對象

　　 var mloginform=myfrm[0];             //得到數組中的第一個form對象

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

　　　　　　createAttribute()  建立屬性節點。  createTextNode()  建立文本節點。getAttribute()  返回指定的屬性值。  setAttribute()  把指定屬性設置或修改成指定的值。

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

　　innerHTML 屬性設置或返回表格行的開始和結束標籤之間的 HTML。

　　innerText 打印標籤之間的純文本信息，會將標籤過濾掉。

DOM（文檔對象模型）：網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

 

 

BOM（瀏覽器對象模型）：使avaScript 有能力與瀏覽器"對話"

BOM連接：https://blog.csdn.net/qq_39579242/article/details/82850173

Windows方法：ndow.open() - 打開新窗口；window.close() - 關閉當前窗口；window.moveTo() - 移動當前窗口；window.resizeTo() - 調整當前窗口的尺寸