什么是document对象?如何获取文档对象上的元素?_dom对象
DOM對象
1. DOM樹
當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model），通過 HTML DOM對象，可訪問 JavaScript HTML 文檔的所有元素。
HTML DOM 模型被構(gòu)造為對象的樹。
節(jié)點(diǎn)(Node)：HTML文檔中的所有內(nèi)容都可以稱之為節(jié)點(diǎn)，包含元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)和文檔節(jié)點(diǎn)。
文檔(Document)：就是指HTML或者XML文件。
元素(Element)：HTML文檔中的標(biāo)簽可以稱為元素。
2. 獲取HTML元素
通常，通過 JavaScript，需要找到要操作的 HTML 元素。
- 通過 id 找到 HTML 元素
- 通過標(biāo)簽名找到 HTML 元素
- 通過類名找到 HTML 元素
通過id來找到 HTML 元素效率高，推薦使用。
2.1 通過 id 獲取元素
使用實(shí)例：查找 id="box" 元素：
var box = document.getElementById("box");如果找到該元素，則該方法將以對象（在 box 中）的形式返回該元素。
如果未找到該元素，則 box 將包含 null。
2.2 通過類名獲取元素
使用實(shí)例：查找文檔中所有 class="box" 元素：
var box = document.getElementsByClassName("box");注意：通過標(biāo)簽名獲取到的對象是一個(gè)數(shù)組，不能直接當(dāng)成標(biāo)簽使用！
2.3 通過標(biāo)簽名獲取元素
使用實(shí)例：查找文檔中所有的 <p> 元素：
var obj = document.getElementsByTagName("p");注意：通過標(biāo)簽名獲取到的對象是一個(gè)數(shù)組，不能直接當(dāng)成標(biāo)簽使用！
3.入口函數(shù)
window.onload是在dom文檔樹加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)，也稱為入口函數(shù)。
如果在body的script中獲取獲取文檔中的HTML元素，就必須在window.onload中執(zhí)行該操作，不然將無法成功的獲取到HTML元素。
<script>window.onload = function () {var obj = document.getElementById("box");alert("獲取#box元素成功");} </script>注意：一個(gè)文檔中只能有一個(gè)入口函數(shù)。
4. document文檔
4.1 獲取元素節(jié)點(diǎn)
document.body
document.body獲取文檔中的 body 元素。
document.links
document.links獲取文檔中的所有 a 元素，返回的結(jié)果是一個(gè)數(shù)組。
document.images
document.images獲取文檔中的所有 img 元素，返回的結(jié)果是一個(gè)數(shù)組。
document.forms
document.forms獲取文檔中的所有 forms 表單，返回的結(jié)果是一個(gè)數(shù)組。
document.all
document.all獲取文檔中的所有元素，返回的結(jié)果是一個(gè)數(shù)組。
4.2 document其他操作
document.cookie
document.cookie 返回當(dāng)前頁面存放的cookie值，cookie就是本瀏覽器的一個(gè)數(shù)據(jù)存儲技術(shù)（后面的課程會細(xì)講）。
document.domain
document.domain 返回的就是當(dāng)前網(wǎng)頁的域名。
document.title
document.title 返回當(dāng)前<title>標(biāo)簽里面的內(nèi)容。
document.URL
document.URL 返回當(dāng)前頁面的全地址。
document.referrer
document.referrer 返回當(dāng)前頁面是從哪個(gè)一頁面跳轉(zhuǎn)過來的。
4.3 document表單操作
針對表單的元素節(jié)點(diǎn)的獲取，我們還可以通過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屬性值為“l(fā)ogin”的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屬性值為“l(fā)ogin”的form元素var form = document.login;// 獲取普通文本域標(biāo)簽var userName = form.userName;// 獲取密碼框標(biāo)簽var userName = form.password;// 獲取登錄按鈕標(biāo)簽var submit = form.submit;</script> </body>總結(jié)
以上是生活随笔為你收集整理的什么是document对象?如何获取文档对象上的元素?_dom对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cmd执行python 环境变量应该怎么
- 下一篇： c语言基本数据类型常量,C语言基础学习基