最近在找春季實習生工做,爲了準備實習面試筆試,開通屬於本身的專欄來記錄本身的學習過程,同時也是爲了檢驗本身是否真正的理解了學習的知識點。html
1、DOM概念面試
今天學習的是JavaScript中的DOM操做。提及DOM操做,首先咱們須要知道什麼是DOM,DOM也叫文檔對象模型,其中D表明的是Document,即文檔;O表明的是Object,即對象;M表明的是model,即模型。
所謂模型,其實就是某種事物的表現形式,就像是一個火車模型表明的是真是的火車同樣,DOM表明的是加載到瀏覽器並呈如今用戶眼前的網頁。DOM把一份文檔表示成一棵樹,叫作DOM樹。既然有了樹的概念,那就還有根,父節點,子節點,兄弟節點的概念了。在下面的網頁中咱們看一個例子:數組
<!Doctype html> <html> <head> <title>這是測試例子</title> </head> <body> <div> <ul> <li>例子</li> <li>例子</li> </ul> <p>段落測試</p> <div> </body> </html>
以上例子咱們能夠看到,<html>標籤爲根標籤,接下來<head>和<body>標籤屬於<html>的子元素或者是子節點,在<head>標籤中,<title>又是<head>的子標籤,<body>中<div>是其子標籤,<div>標籤中<ul>與上面的p標籤都是其子元素,而這二者是兄弟元素關係。
以上就是一個典型的文檔樹關係。
2、節點
在DOM中節點包括如下幾種:
元素節點;文本節點;屬性節點。
元素節點:
文檔樹中諸如<head><body><ul>等叫作元素節點,標籤的名字就是元素的節點名字;
文本節點:
上面說的元素節點是一種結構節點,若是一個文檔中所有是元素節點則不會顯示任何內容,網頁中的大部分的內容都是經過文本節點展示出來的。文本節點老是包含在元素節點內部。
屬性節點:
屬性節點用來對元素作出更加詳細的描述。幾乎每一個元素節點都會有一個title屬性,用來描述該元素節點是用來幹什麼的。
3、DOM的相關操做
一、獲取元素
獲取元素有三種方法能夠得到:
(1)getElementById()該方法接收一個參數,這個參數是元素的id屬性值,該方法返回一個id屬性值爲相應值的元素對象
(2)getElementByTagName()改方法也接收一個參數,參數爲元素名稱,該方法返回的是一個對象數組。即便匹配的元素只有一個一樣也會是數組類型,只是數組長度爲1。
(3)getElementByClass()該方法接收一個參數,即元素屬性爲class的值,該方法也返回一個數組。
未完待續瀏覽器