獲取元素
有3種DOM方法可以獲取元素節(jié)點迷殿,分別是通過元素ID,標(biāo)簽名字和通過類名來獲取逃片。
?getElementById
該方法返回一個需要的id屬性值的對象
getElementsByTagName
1. 該方法返回一個對象數(shù)組,每個對象分別對應(yīng)著文檔里有著給定標(biāo)簽的一個元素。
2. 可以利用length屬性查詢投慈,該數(shù)組有多少個元素
3. 可以加入一個通配符作為參數(shù)(*),表示獲取文檔中的所有元素冠骄。
比如:獲取文檔中所有元素的總長度
document.getElementsByTagName(*).length
getElementsByClassName
該方法通過class屬性的類名訪問元素
1. 只接受一個參數(shù)伪煤,就是類名
2. 返回的是具有相同類名的元素數(shù)組
3. 如果要獲取帶有多個類名的元素,要指定多個類名凛辣,之間要用空格隔開抱既,如下圖
獲取和設(shè)置屬性getAttribute和setAttribute
一般都是配合getElementById,getElementsByTagName扁誓,getElementsByClassName的
獲取到元素后防泵,利用他們設(shè)置獲取他們的各個屬性。
getAttribute
他是一個函數(shù)跋理,他只要一個參數(shù)(你需要查詢的屬性的名字)
getAttribute方法不屬于document對象择克,所有不能通過document對象調(diào)用,他只能通過元素節(jié)點對象調(diào)用前普。
并且肚邢,如果調(diào)用的屬性名不存在,則返回null
setAttribute
他允許我們對屬性節(jié)點的值做出修改拭卿,只能用于元素節(jié)點
我們設(shè)置的節(jié)點屬性的時候骡湖,如果該節(jié)點不存在的,則他會創(chuàng)建這個屬性峻厚,然后設(shè)置這個值响蕴,如果存在,則覆蓋原來的值
注意:通過setAttribute對文檔做出修改后惠桃,在瀏覽的源代碼中看到的值仍然是原來的值浦夷。這就是DOM的工作模式辖试,先加載文檔靜態(tài)內(nèi)容,再動態(tài)刷新劈狐。(動態(tài)刷新不影響靜態(tài)內(nèi)容)罐孝。
引入JS文件
需要插入在</body>標(biāo)簽之前
引入CSS文件
要插入在head標(biāo)簽之中
圈起來的是 ?css文件名
childNodes
在一棵節(jié)點樹上,childNodes屬性可以用來獲取任何一個元素的所有子元素肥缔,他是一個包含這個元素全部子元素的數(shù)組
如果需要訪問childNodes的第一個元素莲兢,可以用firstChild
如果需要訪問childNodes的最后一個元素,可以用lastChild
nodeType
這個屬性告訴我們续膳,我們正在與哪個節(jié)點打交道
他總共有12種可取值改艇,只要一下3種有實用價值
nodeValue
它可以得到和設(shè)置一個節(jié)點的值 ?P56 ?概念有點復(fù)雜,不好描述坟岔。谒兄。