什么是document对象?如何获取文档对象上的元素?_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 通過標簽名獲取元素
使用實例：查找文檔中所有的 <p> 元素：
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 返回當前<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>總結
以上是生活随笔為你收集整理的什么是document对象?如何获取文档对象上的元素?_dom对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cmd执行python 环境变量应该怎么
- 下一篇： c语言基本数据类型常量,C语言基础学习基