国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM 小總結

yzd / 2351人閱讀

摘要：在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。它這種情況稱為文檔碎片，還無法顯示在瀏覽器的畫面中。創建一個文本節點并添加到新元素中的代碼如下總結文檔對象模型，是針對和文檔的一個應用程序編程接口，描繪了一個層次化的節點樹。

DOM 是什么

文檔對象模型，是針對 HTML 和 XML 文檔的一個 API (應用程序編程接口)， 描繪了一個層次化的節點樹。

D: document

當 web 瀏覽器瀏覽一個頁面的時候，DOM 就在幕后把你編輯的網頁文檔轉換成一個文檔對象。(這也是為什么瀏覽器打開一個 html 文檔顯示的是豐富的內容，而在文本編輯器打開顯示的是 html 源碼的原因)

O: object

JavaScript 中宿主對象 window 中的一個屬性：document。 document 對象主要處理網頁內容。

M: model

DOM 把一份文檔表示為一棵樹。如文檔：



  
    
    Title
  
  
    

      標題
    

    
內容

文檔模型用下圖表示：

節點

上面介紹到 DOM 可以將任何的 html 與 xml 描繪成一個由多層節點構成的樹。
而DOM 的每個節點都有 nodeType , nodeName 和 nodeValue 屬性，可以通過這些屬性了解節點的具體信息。
接下來介紹其中 5 種節點：

Document - 文檔節點 
nodeType: 9
nodeName: #document
nodeValue: null

JavaScript 通過 Document 類型表示文檔。
在瀏覽器中，document 對象是 HTMLDocument(繼承自 Document 類型)的一個實例，表示整個 HTML 頁面。而且 document 對象是 window 對象的一個屬性。

可嘗試在 chrome 瀏覽器控制臺中打出：

console.log(document.nodeType);
< 9
console.log(document.nodeName);
< #document
console.log(document.nodeValue);
< null
Element - 元素節點 
nodeType: 1
nodeName: 元素的標簽名
nodeValue: null

文本段落的 nodeName：p
鏈接的 nodeName：a
元素可以包含其他元素，如標題包含鏈接等。
html 是根元素，唯一一個不能被包含在其他元素里面的元素。

Text - 文本節點 
nodeType: 3
nodeName: #text
nodeValue: 節點所包含文本

頁面中，我們看到的文字都是一個個文本節點。
如：

文本

文本節點總是被包含在元素節點的內部。但并非所有的元素節點都包含文本節點。如：ul、 img

Attr - 屬性節點

屬性就是存在于元素的 attributes 屬性中的節點。通俗的講，屬性節點用來對元素做出更具體的描述。

nodeType: 2
nodeName: 屬性的名稱
nodeValue: 屬性的值

例如：title, align, alt ...

Comment - 注釋節點 
nodeType: 8
nodeName: #comment
nodeValue: 注釋的內容

如：
就是一個注釋節點

DOM 常用屬性

childNodes: 獲取任何一個元素的所有類型的節點，不僅僅是元素節點，還有文本節點、注釋節點等。
nodeType: 節點類型值，總共有 12 中可取值
nodeName: 節點名稱
nodeValue: 一個節點的值
firstChild: 元素的第一個元素
lastChild: 元素的最后一個元素
innerHTML: 讀、寫某給定元素里的 HTML 內容

DOM 常用方法 查找元素 getElementById

通過 ID 查找元素。
函數參數為 ID 的值，如果元素存在，返回 document 對象，不存在返回 null。



var ele = document.getElementById("ts");

getElementsByClassName
通過 class 名稱查找元素
函數參數為 class 的值，如果元素匹配到，返回的是 document 對象集合，不匹配則返回空數組。

創建元素 createElement

作用： 創建新元素
函數只接受一個參數，即要創建函數的標簽名。
創建一個

元素代碼如下：

var $div = document.createElement("div");

元素被創建后，可以為其添加更多的子節點，或者操作元素特性等。
雖然這個元素已經存在并且已經擁有了自己的 DOM 屬性，但它還不是任何一顆 DOM 樹的組成部分，它只是游蕩在 JavaScript 世界里的一個孤兒。它這種情況稱為文檔碎片，還無法顯示在瀏覽器的畫面中。
可以使用 appendChild 添加到 DOM 樹中 。

appendChild

作用：將節點添加到另一個節點的末端
函數參數只有一個，為即將被添加的節點。
如：



var div = document.createElement("div");
var ele = document.getElementById("test");

ele.appendChild(node);
createTextNode

作用：創建新文本節點
函數只接受一個函數，即要插入節點中的文本。
創建一個文本節點并添加到新元素中的代碼如下：

var textNode = document.createTextNode("hello node!");
var div = document.createElement("div");

div.appendChild(textNode);
總結

DOM(文檔對象模型)，是針對 HTML 和 XML 文檔的一個 API (應用程序編程接口)， 描繪了一個層次化的節點樹。
DOM 的 5 種節點類型：文檔、元素、文本、屬性、注釋。
DOM 常用屬性介紹。
DOM 常用方法介紹，分為兩類：操作元素、查找元素。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49986.html

相關文章

  • DOM 小總結

    摘要：在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。它這種情況稱為文檔碎片，還無法顯示在瀏覽器的畫面中。創建一個文本節點并添加到新元素中的代碼如下總結文檔對象模型，是針對和文檔的一個應用程序編程接口，描繪了一個層次化的節點樹。 DOM 是什么 文檔對象模型，是針對 HTML 和 XML 文檔的一個 API (應用程序編程接口)， 描繪了一個層次化的節點樹。 D: document 當...

    hyuan 評論0 收藏0

  • 標注圖+部分舉例聊聊Vue生命周期

    摘要：天王蓋地虎鉤子事件得到的結果是小總結實例創建完成后，我們能讀取到數據的值，但是還沒生成，掛載屬性還不存在。此時的階段解讀為掛載完畢階段我們再打印下此時看看鉤子事件得到的結果是可見，已經成功渲染成里面對應的值天王蓋地虎了。 你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。 現在項目中遇到了，好好回頭總結一波Vue生命周期，以后用到的時候再來翻翻。 啥叫V...

    Aceyclee 評論0 收藏0

  • 小程序項目-總結

    摘要：小程序線上代碼線上地址小程序技術點官方提供的是不可少的。小程序事件的區分，和的區別，事件冒泡。一定要注意以及單個的生命周期，只會在小程序生成的時候執行一次。 小程序-線上代碼 github線上地址 小程序-技術點 官方提供的API 是不可少的。常用的方法，獲取用戶信息，登錄授權，獲取設備信息，發送數據請求，頁面渲染 小程序不支持promise，所以需要額外的引入es6-promise...

    Baoyuan 評論0 收藏0

  • 小程序項目-總結

    摘要：小程序線上代碼線上地址小程序技術點官方提供的是不可少的。小程序事件的區分，和的區別，事件冒泡。一定要注意以及單個的生命周期，只會在小程序生成的時候執行一次。 小程序-線上代碼 github線上地址 小程序-技術點 官方提供的API 是不可少的。常用的方法，獲取用戶信息，登錄授權，獲取設備信息，發送數據請求，頁面渲染 小程序不支持promise，所以需要額外的引入es6-promise...

    spademan 評論0 收藏0

發表評論

0條評論

yzd

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<