JavaScript基礎(五) DOM

DOM：

* 概念： Document Object Model 文檔對象模型
	* 將標記語言文檔的各個組成部分，封裝爲對象。可以使用這些對象，對標記語言文檔進行CRUD的動態操作

* W3C DOM 標準被分爲 3 個不同的部分：

	* 核心 DOM - 針對任何結構化文檔的標準模型
		* Document：文檔對象
		* Element：元素對象
		* Attribute：屬性對象
		* Text：文本對象
		* Comment:註釋對象

		* Node：節點對象，其他5個的父對象
	* XML DOM - 針對 XML 文檔的標準模型
	* HTML DOM - 針對 HTML 文檔的標準模型

• 核心DOM模型

     Document：文檔對象
    	1. 創建(獲取)：在html dom模型中可以使用window對象來獲取
    		1. window.document
    		2. document
    	2. 方法：
    		1. 獲取Element對象：
    			1. getElementById()	： 根據id屬性值獲取元素對象。id屬性值一般唯一
    			2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
    			3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
    			4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組
    		2. 創建其他DOM對象：
    			createAttribute(name)
            	createComment()
            	createElement()
            	createTextNode()
    	3. 屬性
    * Element：元素對象
    	1. 獲取/創建：通過document來獲取和創建
    	2. 方法：
    		1. removeAttribute()：刪除屬性
    		2. setAttribute()：設置屬性
    * Node：節點對象，其他5個的父對象
    	* 特點：所有dom對象都可以被認爲是一個節點
    	* 方法：
    		* CRUD dom樹：
    			* appendChild()：向節點的子節點列表的結尾添加新的子節點。
    			* removeChild()	：刪除（並返回）當前節點的指定子節點。
    			* replaceChild()：用新節點替換一個子節點。
    	* 屬性：
    		* parentNode 返回節點的父節點。
  

  HTML DOM

    1. 標籤體的設置和獲取：innerHTML
    2. 使用html元素對象的屬性
    3. 控制元素樣式
    	1. 使用元素的style屬性來設置
    		如：
    			 //修改樣式方式1
    	        div1.style.border = "1px solid red";
    	        div1.style.width = "200px";
    	        //font-size--> fontSize
    	        div1.style.fontSize = "20px";
    	2. 提前定義好類選擇器的樣式，通過元素的className屬性來設置其class屬性值。