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、getElementByTagName（）：根據元素名稱（比如div，p，h等）獲取元素對象們。返回值是一個數組。
				3、getElementByClassName（）：根據class屬性值獲取元素對象們。返回值是一個數組。
				4、getElementByName（）：根據name屬性值獲取元素對象們。返回值是一個數組。
			2、創建其他DMO對象：
				createAttribute（name）
				createComment（）
				createElement（）
				createTextNode（）
		3、屬性
	Element：元素對象
		1、獲取/創建：通過document來獲取和創建
		2、方法：
			1、removeAttribute（）：刪除屬性
			2、setAttribute（）：設置屬性
			代碼實例：
			<a>click me！</a>
			<input type="button" id="btn_set" value="設置屬性">
			<!--a標籤最開始沒有設置屬性，當點擊按鈕之後，給a標籤設置屬性，再點擊a標籤，就可以跳轉頁面-->
			<input type="button" id="btn_remove" value="刪除屬性">
			<script>
				//獲取btn
				var btn_set = document.getElementById("btn_set");
				var btn_remove = document.getElementById("btn_remove");
				btn_set.onclick = function(){
					//1、獲取a標籤
					var element_a = document.getElementsByTagName("a")[0];
					element_a.setAttribute("href","https://www.csdn.net/");
				}
				btn_remove.onclick = function(){
				var element_a = document.getElementsByTagName("a")[0];
				element_a.removeAttribute("href");
				}

				</script>

	Node：節點對象，其他5個的父對象
		特點：
		方法：
			CRUD dom樹：
				appendChiled（）：向節點的子節點列表的結尾添加新的子節點
				removeChiled（）：刪除並返回當前節點的指定子節點
				replaceChiled（）：用新節點替換一個子節點
			！！！！！！
			超鏈接功能：
				1、可以被點擊：樣式
				2、點擊後挑戰到href指定的url
				需求：保留1功能，去掉2功能
				實現：href="javascript:void(0);"
		屬性：
			parentNode :返回節點的父節點
			
	HTML DOM
		1、標籤體的設置和獲取：innerHTML
		2、使用html元素對象的屬性
		3、控制元素樣式
			1、使用元素的style屬性來設置
			代碼示例:
			<div id="div1">
				div
			</div>
			<script>
			var div1 = document.getElementById("div1");
			div1.onclick = function(){
			//修改樣式方式一
			div1.style.border = "1px solid blue";
			div1.style.width = "200px";
			//font-size-->fontSize
			div1.style.fontSize="20px";
			}
			</script>
			2、提前定義好類選擇器的樣式，通過元素的className屬性值，來設置器class屬性值。
			如：
			<style>
			d1{
            border: 1px solid red;
            width: 100px;
            height: 200px;
			}
			</style>
			<script>
			var div2= document.getElementById("div2");
			div2.onclick = function () {
			div2.className = "d1";
			}
			</script>