JS中的DOM對象
DOM對象
1. DOM樹
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model），通過 HTML DOM對象，可訪問 JavaScript HTML 文檔的所有元素。
HTML DOM 模型被構造為對象的樹。
節點(Node)：HTML文檔中的所有內容都可以稱之為節點，包含元素節點、屬性節點、文本節點、註釋節點和文檔節點。
文檔(Document)：就是指HTML或者XML文件。
元素(Element)：HTML文檔中的標簽可以稱為元素。
2. 獲取HTML元素
通常，通過 JavaScript，需要找到要操作的 HTML 元素。
通過 id 找到 HTML 元素
通過標簽名找到 HTML 元素
通過類名找到 HTML 元素
通過id來找到 HTML 元素效率高，推薦使用。
2.1 通過 id 獲取元素
使用實例：查找 id=“box” 元素：
var box = document.getElementById("box");
如果找到該元素，則該方法將以對象（在 box 中）的形式返回該元素。
如果未找到該元素，則 box 將包含 null。
2.2 通過類名獲取元素
使用實例：查找文檔中所有 class=“box” 元素：
var box = document.getElementsByClassName("box");
註意：通過標簽名獲取到的對象是一個數組，不能直接當成標簽使用！
2.3 通過標簽名獲取元素
使用實例：查找文檔中所有的
元素：
var obj = document.getElementsByTagName("p");
註意：通過標簽名獲取到的對象是一個數組，不能直接當成標簽使用！
3.入口函數
window.onload是在dom文檔樹加載完和所有文件加載完之後執行一個函數，也稱為入口函數。
如果在body的script中獲取獲取文檔中的HTML元素，就必須在window.onload中執行該操作，不然將無法成功的獲取到HTML元素。
<script> window.onload = function () { var obj = document.getElementById("box"); alert("獲取#box元素成功"); } </script>
註意：一個文檔中只能有一個入口函數。
4. document文檔
4.1 獲取元素節點
document.body
document.body獲取文檔中的 body 元素。
document.links
document.links獲取文檔中的所有 a 元素，返回的結果是一個數組。
document.images
document.images獲取文檔中的所有 img 元素，返回的結果是一個數組。
document.forms
document.forms獲取文檔中的所有 forms 表單，返回的結果是一個數組。
document.all
document.all獲取文檔中的所有元素，返回的結果是一個數組。
4.2 document其他操作
document.cookie
document.cookie 返回當前頁面存放的cookie值，cookie就是本瀏覽器的一個數據存儲技術（後面的課程會細講）。
document.domain
document.domain 返回的就是當前網頁的域名。
document.title
document.title 返回當前
document.URL
document.URL 返回當前頁面的全地址。
document.referrer
document.referrer 返回當前頁面是從哪個一頁面跳轉過來的。
4.3 document表單操作
針對表單的元素節點的獲取，我們還可以通過form元素中的name屬性來快速找到該from元素，語法：document.from的name屬性值
<body>
<form action="login.jsp" name="login">
<input type="text" name="userName">
<input type="password" name="password">
<input type="submit" value="提交" name="submit">
</form>
<script>
// 獲取name屬性值為“login”的form元素
var form = document.login;
</script>
</body>
得到from元素中的“表單域元素”和“表單按鈕”元素也可以用name屬性來獲取，語法：from元素.子元素name屬性值。
<body>
<form action="login.jsp" name="login">
<input type="text" name="userName">
<input type="password" name="password">
<input type="submit" value="提交" name="submit">
</form>
<script>
// 獲取name屬性值為“login”的form元素
var form = document.login;
// 獲取普通文本域標簽
var userName = form.userName;
// 獲取密碼框標簽
var userName = form.password;
// 獲取登錄按鈕標簽
var submit = form.submit;
</script>
</body>
來源：https://blog.csdn.net/qq_44013790/article/details/86499658
JS中的DOM對象