摘要:最近在找春季實習生工作,為了準備實習面試筆試,開通屬于自己的專欄來記錄自己的學習過程,同時也是為了檢驗自己是否真正的理解了學習的知識點。一概念今天學習的是中的操作。二節(jié)點在中節(jié)點包括以下幾種元素節(jié)點文本節(jié)點屬性節(jié)點。
最近在找春季實習生工作,為了準備實習面試筆試,開通屬于自己的專欄來記錄自己的學習過程,同時也是為了檢驗自己是否真正的理解了學習的知識點。
一、DOM概念
今天學習的是JavaScript中的DOM操作。說起DOM操作,首先我們需要知道什么是DOM,DOM也叫文檔對象模型,其中D代表的是Document,即文檔;O代表的是Object,即對象;M代表的是model,即模型。
所謂模型,其實就是某種事物的表現(xiàn)形式,就像是一個火車模型代表的是真是的火車一樣,DOM代表的是加載到瀏覽器并呈現(xiàn)在用戶眼前的網(wǎng)頁。DOM把一份文檔表示成一棵樹,叫做DOM樹。既然有了樹的概念,那就還有根,父節(jié)點,子節(jié)點,兄弟節(jié)點的概念了。在下面的網(wǎng)頁中我們看一個例子:
這是測試例子
- 例子
- 例子
段落測試
以上例子我們可以看到,標簽為根標簽,接下來
和標簽屬于的子元素或者是子節(jié)點,在標簽中,又是的子標簽, 中是其子標簽,標簽中與上面的p標簽都是其子元素,而這兩者是兄弟元素關(guān)系。
以上就是一個典型的文檔樹關(guān)系。
二、節(jié)點
在DOM中節(jié)點包括以下幾種:
元素節(jié)點;文本節(jié)點;屬性節(jié)點。
元素節(jié)點:
文檔樹中諸如等叫做元素節(jié)點,標簽的名字就是元素的節(jié)點名字;
文本節(jié)點:
上面說的元素節(jié)點是一種結(jié)構(gòu)節(jié)點,如果一個文檔中全部是元素節(jié)點則不會顯示任何內(nèi)容,網(wǎng)頁中的大部分的內(nèi)容都是通過文本節(jié)點展現(xiàn)出來的。文本節(jié)點總是包含在元素節(jié)點內(nèi)部。
屬性節(jié)點:
屬性節(jié)點用來對元素做出更加詳細的描述。幾乎每個元素節(jié)點都會有一個title屬性,用來描述該元素節(jié)點是用來干什么的。
三、DOM的相關(guān)操作
1、獲取元素
獲取元素有三種方法可以獲得:
(1)getElementById()該方法接收一個參數(shù),這個參數(shù)是元素的id屬性值,該方法返回一個id屬性值為相應(yīng)值的元素對象
(2)getElementByTagName()改方法也接收一個參數(shù),參數(shù)為元素名稱,該方法返回的是一個對象數(shù)組。即使匹配的元素只有一個同樣也會是數(shù)組類型,只是數(shù)組長度為1。
(3)getElementByClass()該方法接收一個參數(shù),即元素屬性為class的值,該方法也返回一個數(shù)組。
未完待續(xù)文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/79159.html
相關(guān)文章
javascript高級學習總結(jié)(二)
摘要:那個率先改變的實例的返回值,就會傳遞給的回調(diào)函數(shù)。函數(shù)對函數(shù)的改進,體現(xiàn)在以下四點內(nèi)置執(zhí)行器。進一步說,函數(shù)完全可以看作多個異步操作,包裝成的一個對象,而命令就是內(nèi)部命令的語法糖。中的本質(zhì)就是沒有的隱藏的組件。 1、原型 - jquery使用showImg(https://segmentfault.com/img/bVbwNcY?w=692&h=442);注釋 : 實例雖然不同,但是構(gòu)...
JS中DOM操作總結(jié)
摘要:最近在找春季實習生工作,為了準備實習面試筆試,開通屬于自己的專欄來記錄自己的學習過程,同時也是為了檢驗自己是否真正的理解了學習的知識點。一概念今天學習的是中的操作。二節(jié)點在中節(jié)點包括以下幾種元素節(jié)點文本節(jié)點屬性節(jié)點。 最近在找春季實習生工作,為了準備實習面試筆試,開通屬于自己的專欄來記錄自己的學習過程,同時也是為了檢驗自己是否真正的理解了學習的知識點。 一、DOM概念 今天學習的是Ja...
vue常用知識點總結(jié)
摘要:這里借鑒了一下的處理方式,我們把單獨模塊的包裝成一個函數(shù),提供一個全局的回調(diào)方法,加載完成時候再調(diào)用回調(diào)函數(shù)。 感謝本文引用鏈接的各位大佬們,小菜鳥我只是個搬運工 1.談一談你理解的vue是什么樣子的? vue是數(shù)據(jù)、視圖分離的一個框架,讓數(shù)據(jù)與視圖間不會發(fā)生直接聯(lián)系。MVVM 組件化:把整體拆分為各個可以復(fù)用的個體 數(shù)據(jù)驅(qū)動:通過數(shù)據(jù)變化直接影響bom展示,避免dom操作。 可以在...
JS基礎(chǔ)篇--JS的DOM操作 - 你真的了解嗎?
摘要:摘要想稍微系統(tǒng)的說說對于的操作把和常用操作的內(nèi)容歸納成思維導(dǎo)圖方便閱讀同時加入性能上的一些問題前言在前端開發(fā)的過程中極為重要的一個功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內(nèi)都是比較消耗性能的如何高效率的便捷的操作這就是本文要講 摘要 想稍微系統(tǒng)的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內(nèi)容歸納成思維導(dǎo)圖方便閱讀,同時加入性能上的一些問題....
發(fā)表評論
0條評論
![]()
Jacendfeng
男|高級講師
TA的文章
閱讀更多
云主機怎么管理-如何選擇云主機部署管理軟件?
閱讀 1724·2021-09-22 15:21
測試金字塔,你在哪一層?
閱讀 2938·2021-09-09 09:32
DogYun:28元/月/1GB內(nèi)存/10GB SSD空間/500GB流量/50Mbps-100Mb
閱讀 2806·2021-09-02 09:52
chorme瀏覽器記住密碼后input黃色背景處理方法總結(jié)(三種)
閱讀 3371·2019-08-30 14:02
[ 一起學React系列 -- 9 ] React中的文件下載
閱讀 2286·2019-08-26 13:25
vue源碼解讀-Flow
閱讀 1540·2019-08-26 13:24
開源免費信息門戶框架 Bodhi Portal 發(fā)布了!
閱讀 1686·2019-08-26 10:31
「HTML5」FileAPI 文件操作實戰(zhàn)
閱讀 1626·2019-08-26 10:16