摘要:最近在找春季實(shí)習(xí)生工作,為了準(zhǔn)備實(shí)習(xí)面試筆試,開通屬于自己的專欄來(lái)記錄自己的學(xué)習(xí)過(guò)程,同時(shí)也是為了檢驗(yàn)自己是否真正的理解了學(xué)習(xí)的知識(shí)點(diǎn)。一概念今天學(xué)習(xí)的是中的操作。二節(jié)點(diǎn)在中節(jié)點(diǎn)包括以下幾種元素節(jié)點(diǎn)文本節(jié)點(diǎn)屬性節(jié)點(diǎn)。
最近在找春季實(shí)習(xí)生工作,為了準(zhǔn)備實(shí)習(xí)面試筆試,開通屬于自己的專欄來(lái)記錄自己的學(xué)習(xí)過(guò)程,同時(shí)也是為了檢驗(yàn)自己是否真正的理解了學(xué)習(xí)的知識(shí)點(diǎn)。
一、DOM概念
今天學(xué)習(xí)的是JavaScript中的DOM操作。說(shuō)起DOM操作,首先我們需要知道什么是DOM,DOM也叫文檔對(duì)象模型,其中D代表的是Document,即文檔;O代表的是Object,即對(duì)象;M代表的是model,即模型。
所謂模型,其實(shí)就是某種事物的表現(xiàn)形式,就像是一個(gè)火車模型代表的是真是的火車一樣,DOM代表的是加載到瀏覽器并呈現(xiàn)在用戶眼前的網(wǎng)頁(yè)。DOM把一份文檔表示成一棵樹,叫做DOM樹。既然有了樹的概念,那就還有根,父節(jié)點(diǎn),子節(jié)點(diǎn),兄弟節(jié)點(diǎn)的概念了。在下面的網(wǎng)頁(yè)中我們看一個(gè)例子:
這是測(cè)試?yán)?/title>
- 例子
- 例子
段落測(cè)試
以上例子我們可以看到,標(biāo)簽為根標(biāo)簽,接下來(lái)
和標(biāo)簽屬于的子元素或者是子節(jié)點(diǎn),在標(biāo)簽中,又是的子標(biāo)簽, 中是其子標(biāo)簽,標(biāo)簽中與上面的p標(biāo)簽都是其子元素,而這兩者是兄弟元素關(guān)系。
以上就是一個(gè)典型的文檔樹關(guān)系。
二、節(jié)點(diǎn)
在DOM中節(jié)點(diǎn)包括以下幾種:
元素節(jié)點(diǎn);文本節(jié)點(diǎn);屬性節(jié)點(diǎn)。
元素節(jié)點(diǎn):
文檔樹中諸如等叫做元素節(jié)點(diǎn),標(biāo)簽的名字就是元素的節(jié)點(diǎn)名字;
文本節(jié)點(diǎn):
上面說(shuō)的元素節(jié)點(diǎn)是一種結(jié)構(gòu)節(jié)點(diǎn),如果一個(gè)文檔中全部是元素節(jié)點(diǎn)則不會(huì)顯示任何內(nèi)容,網(wǎng)頁(yè)中的大部分的內(nèi)容都是通過(guò)文本節(jié)點(diǎn)展現(xiàn)出來(lái)的。文本節(jié)點(diǎn)總是包含在元素節(jié)點(diǎn)內(nèi)部。
屬性節(jié)點(diǎn):
屬性節(jié)點(diǎn)用來(lái)對(duì)元素做出更加詳細(xì)的描述。幾乎每個(gè)元素節(jié)點(diǎn)都會(huì)有一個(gè)title屬性,用來(lái)描述該元素節(jié)點(diǎn)是用來(lái)干什么的。
三、DOM的相關(guān)操作
1、獲取元素
獲取元素有三種方法可以獲得:
(1)getElementById()該方法接收一個(gè)參數(shù),這個(gè)參數(shù)是元素的id屬性值,該方法返回一個(gè)id屬性值為相應(yīng)值的元素對(duì)象
(2)getElementByTagName()改方法也接收一個(gè)參數(shù),參數(shù)為元素名稱,該方法返回的是一個(gè)對(duì)象數(shù)組。即使匹配的元素只有一個(gè)同樣也會(huì)是數(shù)組類型,只是數(shù)組長(zhǎng)度為1。
(3)getElementByClass()該方法接收一個(gè)參數(shù),即元素屬性為class的值,該方法也返回一個(gè)數(shù)組。
未完待續(xù)文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/49816.html
相關(guān)文章
javascript高級(jí)學(xué)習(xí)總結(jié)(二)
摘要:那個(gè)率先改變的實(shí)例的返回值,就會(huì)傳遞給的回調(diào)函數(shù)。函數(shù)對(duì)函數(shù)的改進(jìn),體現(xiàn)在以下四點(diǎn)內(nèi)置執(zhí)行器。進(jìn)一步說(shuō),函數(shù)完全可以看作多個(gè)異步操作,包裝成的一個(gè)對(duì)象,而命令就是內(nèi)部命令的語(yǔ)法糖。中的本質(zhì)就是沒(méi)有的隱藏的組件。 1、原型 - jquery使用showImg(https://segmentfault.com/img/bVbwNcY?w=692&h=442);注釋 : 實(shí)例雖然不同,但是構(gòu)...
JS中DOM操作總結(jié)
摘要:最近在找春季實(shí)習(xí)生工作,為了準(zhǔn)備實(shí)習(xí)面試筆試,開通屬于自己的專欄來(lái)記錄自己的學(xué)習(xí)過(guò)程,同時(shí)也是為了檢驗(yàn)自己是否真正的理解了學(xué)習(xí)的知識(shí)點(diǎn)。一概念今天學(xué)習(xí)的是中的操作。二節(jié)點(diǎn)在中節(jié)點(diǎn)包括以下幾種元素節(jié)點(diǎn)文本節(jié)點(diǎn)屬性節(jié)點(diǎn)。 最近在找春季實(shí)習(xí)生工作,為了準(zhǔn)備實(shí)習(xí)面試筆試,開通屬于自己的專欄來(lái)記錄自己的學(xué)習(xí)過(guò)程,同時(shí)也是為了檢驗(yàn)自己是否真正的理解了學(xué)習(xí)的知識(shí)點(diǎn)。 一、DOM概念 今天學(xué)習(xí)的是Ja...
vue常用知識(shí)點(diǎn)總結(jié)
摘要:這里借鑒了一下的處理方式,我們把單獨(dú)模塊的包裝成一個(gè)函數(shù),提供一個(gè)全局的回調(diào)方法,加載完成時(shí)候再調(diào)用回調(diào)函數(shù)。 感謝本文引用鏈接的各位大佬們,小菜鳥我只是個(gè)搬運(yùn)工 1.談一談你理解的vue是什么樣子的? vue是數(shù)據(jù)、視圖分離的一個(gè)框架,讓數(shù)據(jù)與視圖間不會(huì)發(fā)生直接聯(lián)系。MVVM 組件化:把整體拆分為各個(gè)可以復(fù)用的個(gè)體 數(shù)據(jù)驅(qū)動(dòng):通過(guò)數(shù)據(jù)變化直接影響bom展示,避免dom操作。 可以在...
JS基礎(chǔ)篇--JS的DOM操作 - 你真的了解嗎?
摘要:摘要想稍微系統(tǒng)的說(shuō)說(shuō)對(duì)于的操作把和常用操作的內(nèi)容歸納成思維導(dǎo)圖方便閱讀同時(shí)加入性能上的一些問(wèn)題前言在前端開發(fā)的過(guò)程中極為重要的一個(gè)功能就是對(duì)對(duì)象的操作無(wú)論增刪改查在前端頁(yè)面操作這一范圍內(nèi)都是比較消耗性能的如何高效率的便捷的操作這就是本文要講 摘要 想稍微系統(tǒng)的說(shuō)說(shuō)對(duì)于DOM的操作,把Javascript和jQuery常用操作DOM的內(nèi)容歸納成思維導(dǎo)圖方便閱讀,同時(shí)加入性能上的一些問(wèn)題....
發(fā)表評(píng)論
0條評(píng)論
jifei
男|高級(jí)講師
TA的文章
閱讀更多
SSL加密為什么能保證安全
閱讀 3207·2021-11-25 09:43
ASEMI肖特基二極管SBT40100VDC正向壓降溫度系數(shù)
閱讀 3417·2021-11-11 16:54
#11.11#RackNerd:美國(guó)VPS年付$12起,洛杉磯/紐約等6機(jī)房可選
閱讀 843·2021-11-02 14:42
半月灣vps:美國(guó)CN2 GIA方案(DC5)機(jī)房,1Gbps帶寬,三網(wǎng)CN2 GIA線路,$109
閱讀 3769·2021-09-30 09:58
PuTTY – 老牌免費(fèi)開源Windows SSH遠(yuǎn)程客戶端軟件
閱讀 3675·2021-09-29 09:44
那些很熟卻又不是很熟的知識(shí)
閱讀 1288·2019-08-30 15:56
初級(jí)前端開發(fā)面試總結(jié)
閱讀 2109·2019-08-30 15:54
Vue源碼之目錄結(jié)構(gòu)
閱讀 2995·2019-08-30 15:43