摘要:系列教程是一套免費(fèi)開源,任何人都可以免費(fèi)學(xué)習(xí)分享,甚至可以進(jìn)行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始,我們先來了解是什么的作用,以及瀏覽器的支持是怎么樣的。
《EASYDOM》系列教程是一套免費(fèi)、開源,任何人都可以免費(fèi)學(xué)習(xí)、分享,甚至可以進(jìn)行修改。但需要注明作者及來源,并且不能用于商業(yè)。
本文是這套系列教程的索引(也就是目錄):
第一回 DOM 介紹
在最開始,我們先來了解 DOM 是什么、DOM 的作用,以及瀏覽器的支持是怎么樣的。
第二回 DOM 樹結(jié)構(gòu)
現(xiàn)在我們知道了 DOM 是什么,再讓我們了解一下 DOM 樹結(jié)構(gòu)、節(jié)點(diǎn)是什么,以及節(jié)點(diǎn)在 DOM 樹結(jié)構(gòu)中的關(guān)系。
第三回 Document 對象介紹
在這個(gè)系列的前兩篇,我們掌握了 DOM 中非常重要的概念。接下來我們將學(xué)習(xí) DOM 中核心對象之一的 Document 對象。
第四回 定位頁面元素
在對 Document 對象有了基本了解之后,我們將學(xué)習(xí) Document 對象中很重要的功能 - 就是如何定位頁面元素。
第五回 創(chuàng)建頁面元素
Document 對象除了提供了定位頁面元素的功能之外,還提供了如何創(chuàng)建頁面元素。也是這一回我們將學(xué)習(xí)的內(nèi)容。
第六回 Node 介紹
到此,我們已經(jīng)掌握了 Document 對象在 DOM 中的功能。接下來,我們將繼續(xù)學(xué)習(xí) DOM 中核心對象之一的 Node 對象。
第七回 判斷節(jié)點(diǎn)類型
DOM 節(jié)點(diǎn)樹結(jié)構(gòu)中,有常見的四種節(jié)點(diǎn)類型,我們經(jīng)常需要先區(qū)分再操作。這一回中,我們將學(xué)習(xí)如何判斷節(jié)點(diǎn)的類型。
第八回 遍歷節(jié)點(diǎn)
通過 DOM 訪問 HTML 頁面主要依靠 DOM 節(jié)點(diǎn)樹結(jié)構(gòu),具體操作則依靠節(jié)點(diǎn)之間的關(guān)系。而本回中,我們就是學(xué)習(xí)如何利用節(jié)點(diǎn)之間的關(guān)系實(shí)現(xiàn)遍歷節(jié)點(diǎn)。
第九回 插入節(jié)點(diǎn)
在前幾回中,我們掌握了通過 Node 對象如何訪問 HTML 頁面。在這一回中,我們將學(xué)習(xí)如何向 HTML 頁面添加節(jié)點(diǎn)。
第十回 刪除節(jié)點(diǎn)
Node 對象除了提供了如何向 HTML 頁面添加節(jié)點(diǎn)的功能,還提供了如何從 HTML 頁面中刪除節(jié)點(diǎn)。
第十一回 替換節(jié)點(diǎn)
在這一回中,我們繼續(xù)學(xué)習(xí) Node 對象提供的實(shí)現(xiàn)將新節(jié)點(diǎn)替換 HTML 頁面中現(xiàn)有的節(jié)點(diǎn)的功能。
第十二回 復(fù)制節(jié)點(diǎn)
Node 對象提供的常見節(jié)點(diǎn)操作中,我們將學(xué)習(xí)如何實(shí)現(xiàn)復(fù)制(克?。┕?jié)點(diǎn)的功能。
第十三回 textContent 屬性
關(guān)于 Node 對象提供的屬性和方法中,最后我們還要再學(xué)習(xí)其 textContent 屬性,實(shí)現(xiàn)獲取或設(shè)置指定節(jié)點(diǎn)的文本內(nèi)容。
第十四回 Element 介紹
如果你已經(jīng)看到了這里,說明你已經(jīng)掌握了 DOM 標(biāo)準(zhǔn)規(guī)范中的兩個(gè)核心對象 Document 和 Node 對象。接下來,我們將繼續(xù)學(xué)習(xí) DOM 中核心對象之一的 Element 對象。
第十五回 DOM 元素樹
在基于 DOM 樹結(jié)構(gòu),我們已經(jīng)掌握了什么是 DOM 節(jié)點(diǎn)樹結(jié)構(gòu),以及節(jié)點(diǎn)之間的關(guān)系。在學(xué)習(xí) Element 對象的具體用法之前,我們先來了解一下什么是元素樹,以及元素之間的關(guān)系。
第十六回 定位頁面元素
Document 對象的主要應(yīng)用之一就是定位 HTML 頁面中的元素,而 Element 對象同樣提供了類似的方法用于定位 HTML 頁面中指定元素內(nèi)的元素。
第十七回 遍歷元素
Node 對象提供的屬性或方法實(shí)現(xiàn)了遍歷節(jié)點(diǎn),但實(shí)際操作中,會(huì)有空白節(jié)點(diǎn)問題。通過 Element 對象提供的屬性或方法實(shí)現(xiàn)遍歷元素。
第十八回 屬性操作
Element 對象相對于 Node 對象更便捷地就是對屬性的操作。
第十九回 innerHTML 屬性
有關(guān) Element 對象提供的屬性和方法,在最后我們還需要學(xué)習(xí)一個(gè)特殊的屬性,就是 innerHTML 屬性。
第二十回 獲取內(nèi)聯(lián)樣式 第二十一回 獲取外聯(lián)樣式 第二十二回 獲取 class 屬性 第二十三回 獲取當(dāng)前有效樣式 第二十四回 設(shè)置內(nèi)聯(lián)樣式 第二十五回 設(shè)置 class 屬性 第二十六回 Element 對象的樣式屬性本系列教程的部分內(nèi)容,參考了 Mozilla 社區(qū)提供的內(nèi)容,感謝開源力量。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/87186.html
摘要:對象提供了屬性用于實(shí)現(xiàn)獲取或設(shè)置頁面指定元素的代碼。需要說明的是,在上述語法結(jié)構(gòu)中,調(diào)用屬性的表示元素節(jié)點(diǎn)。但需要注明作者及來源,并且不能用于商業(yè)。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國際許可協(xié)議進(jìn)行許可。 Element 對象提供了 innerHTML 屬性用于實(shí)現(xiàn)獲取或設(shè)置 HTML 頁面指定元素的 HTML 代碼。 獲取 HTML 代碼 innerHTML 屬性表示 HTM...
摘要:而標(biāo)準(zhǔn)規(guī)范中提供了對象,主要是依靠元素樹結(jié)構(gòu)訪問和更新頁面的內(nèi)容。值得注意的是所有的頁面的元素都是對象,而這個(gè)對象又是繼承于對象的。我們可以簡單地理解對象是對象的補(bǔ)充。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國際許可協(xié)議進(jìn)行許可。 DOM 的標(biāo)準(zhǔn)規(guī)范中提供了 Element 對象,該對象提供了 HTML 頁面中所有元素所具有的屬性和方法。 我們都知道 DOM 標(biāo)準(zhǔn)規(guī)范中提供了 Nod...
摘要:也就是說,它沒有父節(jié)點(diǎn)。如果參數(shù)設(shè)為,則不克隆它的任何子節(jié)點(diǎn)。為了防止一個(gè)文檔中出現(xiàn)兩個(gè)重復(fù)的元素使用方法克隆的節(jié)點(diǎn)在需要時(shí)應(yīng)該指定另外一個(gè)與原值不同的。 Node 對象提供了 cloneNode() 方法實(shí)現(xiàn) HTML 頁面中節(jié)點(diǎn)的復(fù)制功能。其語法結(jié)構(gòu)如下: var dupNode = node.cloneNode(deep); 在上述語法結(jié)構(gòu)中,調(diào)用 cloneNode() 方法的...
摘要:參數(shù)則表示頁面中被替換的節(jié)點(diǎn)。方法的返回值也是被替換的節(jié)點(diǎn),即。如果該節(jié)點(diǎn)已經(jīng)存在于節(jié)點(diǎn)樹結(jié)構(gòu)中的話,則它會(huì)被從原始位置刪除。但需要注明作者及來源,并且不能用于商業(yè)。本教程采用知識(shí)共享署名非商業(yè)性使用禁止演繹國際許可協(xié)議進(jìn)行許可。 Node 對象提供了 replaceChild() 方法實(shí)現(xiàn) HTML 頁面中節(jié)點(diǎn)的替換功能。其語法結(jié)構(gòu)如下: replacedNode = parentN...
摘要:對象提供了方法實(shí)現(xiàn)從頁面中刪除指定節(jié)點(diǎn)。其語法結(jié)構(gòu)如下在上述語法結(jié)構(gòu)中,調(diào)用方法的表示參數(shù)的父節(jié)點(diǎn),而參數(shù)則表示要?jiǎng)h除的那個(gè)節(jié)點(diǎn)。則用于存儲(chǔ)要?jiǎng)h除的節(jié)點(diǎn)的引用,即。 Node 對象提供了 removeChild() 方法實(shí)現(xiàn)從 HTML 頁面中刪除指定節(jié)點(diǎn)。其語法結(jié)構(gòu)如下: var oldChild = node.removeChild(child); OR element.remov...
閱讀 2470·2021-09-22 16:01
閱讀 3218·2021-09-22 15:41
閱讀 1241·2021-08-30 09:48
閱讀 569·2019-08-30 15:52
閱讀 3390·2019-08-30 13:57
閱讀 1771·2019-08-30 13:55
閱讀 3745·2019-08-30 11:25
閱讀 823·2019-08-29 17:25