成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM 小總結(jié)

hyuan / 1440人閱讀

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

DOM 是什么

文檔對(duì)象模型，是針對(duì) HTML 和 XML 文檔的一個(gè) API (應(yīng)用程序編程接口)， 描繪了一個(gè)層次化的節(jié)點(diǎn)樹。

D: document

當(dāng) web 瀏覽器瀏覽一個(gè)頁面的時(shí)候，DOM 就在幕后把你編輯的網(wǎng)頁文檔轉(zhuǎn)換成一個(gè)文檔對(duì)象。(這也是為什么瀏覽器打開一個(gè) html 文檔顯示的是豐富的內(nèi)容，而在文本編輯器打開顯示的是 html 源碼的原因)

O: object

JavaScript 中宿主對(duì)象 window 中的一個(gè)屬性：document。 document 對(duì)象主要處理網(wǎng)頁內(nèi)容。

M: model

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



  
    
    Title
  
  
    

      標(biāo)題
    

    
內(nèi)容

文檔模型用下圖表示：

節(jié)點(diǎn)

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

Document - 文檔節(jié)點(diǎn) 
nodeType: 9
nodeName: #document
nodeValue: null

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

可嘗試在 chrome 瀏覽器控制臺(tái)中打出：

console.log(document.nodeType);
< 9
console.log(document.nodeName);
< #document
console.log(document.nodeValue);
< null
Element - 元素節(jié)點(diǎn) 
nodeType: 1
nodeName: 元素的標(biāo)簽名
nodeValue: null

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

Text - 文本節(jié)點(diǎn) 
nodeType: 3
nodeName: #text
nodeValue: 節(jié)點(diǎn)所包含文本

頁面中，我們看到的文字都是一個(gè)個(gè)文本節(jié)點(diǎn)。
如：

文本

文本節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)的內(nèi)部。但并非所有的元素節(jié)點(diǎn)都包含文本節(jié)點(diǎn)。如：ul、 img

Attr - 屬性節(jié)點(diǎn)

屬性就是存在于元素的 attributes 屬性中的節(jié)點(diǎn)。通俗的講，屬性節(jié)點(diǎn)用來對(duì)元素做出更具體的描述。

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

例如：title, align, alt ...

Comment - 注釋節(jié)點(diǎn) 
nodeType: 8
nodeName: #comment
nodeValue: 注釋的內(nèi)容

如：
就是一個(gè)注釋節(jié)點(diǎn)

DOM 常用屬性

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

DOM 常用方法 查找元素 getElementById

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



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

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

創(chuàng)建元素 createElement

作用： 創(chuàng)建新元素
函數(shù)只接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建函數(shù)的標(biāo)簽名。
創(chuàng)建一個(gè)

元素代碼如下：

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

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

appendChild

作用：將節(jié)點(diǎn)添加到另一個(gè)節(jié)點(diǎn)的末端
函數(shù)參數(shù)只有一個(gè)，為即將被添加的節(jié)點(diǎn)。
如：



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

ele.appendChild(node);
createTextNode

作用：創(chuàng)建新文本節(jié)點(diǎn)
函數(shù)只接受一個(gè)函數(shù)，即要插入節(jié)點(diǎn)中的文本。
創(chuàng)建一個(gè)文本節(jié)點(diǎn)并添加到新元素中的代碼如下：

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

div.appendChild(textNode);
總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87848.html

相關(guān)文章

  • DOM 小總結(jié)

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

    yzd 評(píng)論0 收藏0

  • 標(biāo)注圖+部分舉例聊聊Vue生命周期

    摘要：天王蓋地虎鉤子事件得到的結(jié)果是小總結(jié)實(shí)例創(chuàng)建完成后，我們能讀取到數(shù)據(jù)的值，但是還沒生成，掛載屬性還不存在。此時(shí)的階段解讀為掛載完畢階段我們?cè)俅蛴∠麓藭r(shí)看看鉤子事件得到的結(jié)果是可見，已經(jīng)成功渲染成里面對(duì)應(yīng)的值天王蓋地虎了。 你不需要立馬弄明白所有的東西，不過隨著你的不斷學(xué)習(xí)和使用，它的參考價(jià)值會(huì)越來越高。 現(xiàn)在項(xiàng)目中遇到了，好好回頭總結(jié)一波Vue生命周期，以后用到的時(shí)候再來翻翻。 啥叫V...

    Aceyclee 評(píng)論0 收藏0

  • 小程序項(xiàng)目-總結(jié)

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

    Baoyuan 評(píng)論0 收藏0

  • 小程序項(xiàng)目-總結(jié)

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

    spademan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<