JS中的DOM對象

時間 2019-12-08

標籤 dom 對象欄目 JavaScript 简体版

原文原文鏈接

DOM對象

1. DOM樹

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model），經過 HTML DOM對象，可訪問 JavaScript HTML 文檔的全部元素。數組

HTML DOM 模型被構造爲對象的樹。瀏覽器

節點(Node)：HTML文檔中的全部內容均可以稱之爲節點，包含元素節點、屬性節點、文本節點、註釋節點和文檔節點。cookie

文檔(Document)：就是指HTML或者XML文件。dom

元素(Element)：HTML文檔中的標籤能夠稱爲元素。jsp

2. 獲取HTML元素

一般，經過 JavaScript，須要找到要操做的 HTML 元素。函數

經過 id 找到 HTML 元素
經過標籤名找到 HTML 元素
經過類名找到 HTML 元素
經過id來找到 HTML 元素效率高，推薦使用。.net

2.1 經過 id 獲取元素
使用實例：查找 id=「box」元素：code

var box = document.getElementById("box");

若是找到該元素，則該方法將以對象（在 box 中）的形式返回該元素。
若是未找到該元素，則 box 將包含 null。orm

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元素。

&lt;script&gt;
    window.onload = function () {
        var obj = document.getElementById("box");
        alert("獲取#box元素成功");
    }
&lt;/script&gt;

注意：一個文檔中只能有一個入口函數。

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屬性值

&lt;body&gt;
    &lt;form action="login.jsp" name="login"&gt;
        &lt;input type="text" name="userName"&gt;
        &lt;input type="password" name="password"&gt;
        &lt;input type="submit" value="提交" name="submit"&gt;
    &lt;/form&gt;
    &lt;script&gt;
        // 獲取name屬性值爲「login」的form元素
        var form = document.login;
    &lt;/script&gt;
&lt;/body&gt;

獲得from元素中的「表單域元素」和「表單按鈕」元素也能夠用name屬性來獲取，語法：from元素.子元素name屬性值。

&lt;body&gt;
    &lt;form action="login.jsp" name="login"&gt;
        &lt;input type="text" name="userName"&gt;
        &lt;input type="password" name="password"&gt;
        &lt;input type="submit" value="提交" name="submit"&gt;
    &lt;/form&gt;
    &lt;script&gt;
        // 獲取name屬性值爲「login」的form元素
        var form = document.login;
        // 獲取普通文本域標籤
        var userName = form.userName;
        // 獲取密碼框標籤
        var userName = form.password;
        // 獲取登陸按鈕標籤
        var submit = form.submit;
    &lt;/script&gt;
&lt;/body&gt;

來源：https://blog.csdn.net/qq_44013790/article/details/86499658