JavaScript進階（三）document物件及HTML元素操作
前言
本章將學習document物件以及其操作html元素的相關知識，本章知識尤為重要！
方法
1.概念
嚴格的意義上來將，document物件是window物件的一個屬性，瀏覽器對外提供的支援js的用來操作HTML文件的一個物件，此物件封存的HTML文件的所有資訊。
2.document獲取html元素物件
看過CSS入門的同學應該都還記得，CSS有專門的選擇器來標識html文件元素的位置！而我們的document物件是來獲取html元素的方式無外乎這幾種，十分容易！
直接獲取方式：
通過id：document.getElementById("id的值")；該方法返回單個元素，因為html中id只能是唯一的
範例：獲取id為test的html元素物件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS事件</title> <script type="text/javascript"> function change(){ alert(document.getElementById("test")); } </script> </head> <body> 使用者名稱：<input type="text" id="test" value="" /><br> 密 碼：<input type="password" name="" /><br> <input type="button" name="" id="" value="提交" onclick="change();"/> </body> </html>
通過name屬性值：document.getElementsByName("name屬性值")；該方法返回一個元素物件集合
範例：獲取name屬性值為test的html物件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS事件</title> <script type="text/javascript"> function change(){ alert(document.getElementsByName("test")); } </script> </head> <body> 使用者名稱：<input type="text" id="test" name="test" value="test" /><br> 密 碼：<input type="password" name="test" /><br> <input type="button" name="" id="" value="提交" onclick="change();"/> </body> </html>
通過標籤名：document.getElementsByTagName("標籤名稱");該方法返回一個元素物件集合
範例：獲取input元素的物件集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert(document.getElementsByTagName("input"));
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="test" name="test" value="test" /><br>
密 碼：<input type="password" name="test" /><br>
<input type="button" name="" id="" value="提交" onclick="change();"/>
</body>
</html>
通過class屬性值:document.getElementsByClassName("class屬性值");該方法返回一個元素集合
範例：獲取class屬性值為test的元素集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert(document.getElementsByClassName("input"));
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="test" class="test" value="test" /><br>
密 碼：<input type="password" class="test" /><br>
<input type="button" name="" id="" value="提交" onclick="change();"/>
</body>
</html>
間接獲取方式：
父子關係：父級元素物件.childNodes;該方法獲返回該父元素所有的子元素物件陣列
子父關係：子元素物件.parentNode;該方法返回子元素的父物件
兄弟關係：元素.previousSibling;該方法獲取同級的上一個元素物件 元素.nextSibling;該方法獲取同級的下一個元素物件
3.document操作html元素物件
我們知道，通過以上方式我們拿到了html元素的物件，那麼拿到之後勢必要對其進行操作！
1）操作HTML元素的屬性
操作元素屬性
獲取：
元素物件名.屬性名//返回當前屬性的屬性值。----固有
元素物件名.getAttribute("屬性名");//返回自定義屬性的值-----自定義
修改
元素物件名.屬性名=屬性值
元素物件名.setAttribute("屬性名","屬性值");//修改自定義屬性的值----自定義
注意：
儘量的不要去修改元素的id值和name屬性值。
使用自定義方式獲取固有屬性內容，value的值獲取的是預設值，不能夠獲取到實時的使用者資料。
2）操作HTML元素的內容
操作元素內容學習：
獲取元素物件
獲取
元素物件名.innerHTML//返回當前元素物件的所有內容，包括HTML標籤
元素物件名.innerText//返回當前元素物件的文字內容，不包括HTML標籤
修改
元素物件名.innerHTML="新的值"//會將原有內容覆蓋，並HTML標籤會被解析
元素物件名.innerHTML=元素物件名.innerHTML+"新的值"//追加效果
元素物件名.innerText="新的值"//會將原有內容覆蓋，但HTML標籤不會被解析，會作為普通文字顯示。
3）操作HTML元素的樣式
獲取元素物件
通過style屬性
元素物件名.style.樣式名="樣式值"//新增或者修改
元素物件名.style.樣式名=""//刪除樣式
注意:
以上操作，操作的是HTML的style屬性宣告中的樣式。而不是其他css程式碼域中的樣式。
通過className
元素物件名.className="新的值"//新增類選擇器樣式或者修改類選擇器樣式
元素物件名.className=""//刪除類樣式。
4）操作HTML文件結構
增加節點、刪除節點
第一種方式：使用innerHTML
div.innerHTML=div.innerHTML+"內容"//增加節點
div.innerHTML=""//刪除所有子節點
父節點.removeChild(子節點物件)//刪除指定的子節點。
第二種方式：使用元素物件
var obj=document.createElement("標籤名");
元素物件名.appendChild(obj);
寫後感：
我之所以簡略的寫這些知識，實在是因為現在使用原生JS的專案幾乎沒有！！大部分的專案都是使用JQuery對HTML元素物件加以獲取和操作，所以我們記住這些當然好，沒記住也沒有關係！記不記住我們都要向著JQuery穩步邁進，現在的你可以將JQuery簡單的理解為一個更好用JS庫，它將底層JS進行了封裝，操作HTML元素物件更加方便快捷！