一 DOM
JavaScript操作網頁的介面，全稱為“文件物件模型”(Document Object Model)。
有這幾個概念：文件、元素、節點
整個文件是一個文件節點
每個標籤是一個元素節點
包含在元素中的文字是文字節點
每一個屬性是一個屬性節點
註釋屬於註釋節點
二 DOM樹：
DOM樹是結構
所謂層級結構是指元素和元素之間的關係
父子，兄弟
解析器輸出的樹是由DOM元素和屬性節點組成的
當我們說樹中包含DOM節點時，意思就是這個樹是由實現了DOM介面的元素組成。這些實現包含了其它一些瀏覽器內部所需的屬性。
脫離文件流後層級結構關係還是沒有變的

DOM 是 Document Object Model（文件物件模型）的縮寫。提供給Javascript用來動態修改文件狀態…

1. 5個常用的DOM方法：
   getElemenById、getElementsByTagName、getElementsByClassName、getAttribute和setAttribute

2. 文件：DOM中的"D"

   如果沒有document（文件），DOM也就無從談起。當建立了一個網頁並把它載入到Web瀏覽器中時，DOM就在幕後悄然而生了。它把你編寫的網頁文件轉換成為一個文件物件。

3.物件：DOM中的"O"

物件（object）是一種非常重要的資料型別。物件是自包含的資料集合，包含在物件裡的資料可以通過兩種形式訪問——屬性和方法。

屬性是隸屬於某個特定物件的變數；

方法是隻有某個特定物件才能呼叫的函式

物件就是由一些屬性和方法組合在一起而構成的一個數據實體。在javaScript中，屬性(property)和方法(method)都使用“點”語法來訪問：
 

4. object.propertyobject.method()

JavaScript語言裡面的物件可以分為三種類型。

1. 使用者定義物件：由程式設計師自行建立的物件。

2. 內建物件：內建在JavaScript語言裡的物件，如Array、Math和Date等。

3. 宿主物件：由瀏覽器提供的物件。

即使是在JavaScript的最初版本里，對編寫指令碼來說非常重要的一些宿主物件就已經可用了，他們當中最基礎的物件是window（瀏覽器視窗）物件。

5.模型：DOM中的"M"

DOM中的“M”代表著“Model”（模型），它的含義是某種事物的表現形式，DOM代表著載入到瀏覽器視窗的當前網頁。瀏覽器提供了網頁的模型，而我們可以通過JavaScript去讀取這張地圖。

利用JS操作 DOM 可以讓你更改網頁的互動方式。所有網頁的互動都依賴這種 DOM 技術。DOM 是一顆樹，樹枝和樹葉都做了編號，通過指令碼的函式去尋找哪一個枝幹的哪一個葉子，對這個葉子做什麼改變。例如
 

6.image
形如一顆倒長的樹。一顆家譜樹，而家譜樹本身就是一種模型，其典型用法是表示表示人類家族譜系。

它很容易表明家族成員之間的關係，把複雜的關係簡明地表示出來，因此這種模型非常適合表示一份html的文件：
![](https://img2020.cnblogs.com/blog/1823155/202106/1823155-20210615151140448-355795390.png)

image
清除浮動弊端的方法
* * 1.父元素也浮動 margin:0 auto 失效

* * 2.父級 dispaly:inline-block 同上

* * 3.父級加高

* * 4.br標籤
    `<br clear = "all">`
* * 5.在浮動的元素後面加 div設定樣式
  `
  .class{
    clear:both/left/right/none;
  }`
* * 6.偽類清除浮動

    `.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }`
* * 7.父級加 overflow:hidden;
    一般常用第6種方法，其他方法都有侷限性或者違反了結構樣式分離的標準。
    但是第6種只能解決高度塌陷，無法解決同級浮動元素遮蓋的效果。
    可以用第7種來解決，overflow:hidden;