我相信可能大部分人來這里學(xué)javascript主要還是想用這個(gè)結(jié)合頁面中的DOM元素做一些實(shí)際有用的交互效果。所以我這里只教大家最實(shí)際，最有用的javascript應(yīng)用。但是前提大家最好有一些javascript或者jquery的編程的基礎(chǔ)。好廢話不多說了。
今天第一篇，就教大家如何用javascript獲取頁面中的dom元素。這個(gè)很重要。我會(huì)對(duì)照J(rèn)Query來講。
如果頁面中的元素是ID屬性
<div id="dom"></div>

JQ的方法：$("#dom"),
原生js的方法：var a = document.getElementById("dom");這個(gè)a就等價(jià)于$("#dom");

如果我想獲取父級(jí)元素下的一個(gè)元素

JQ的方法：$("#dom span"),
原生js的方法：var b = document.getElementById("dom").getElementsByTagName("span")[0];這個(gè)b就等價(jià)于$("#dom span")
其實(shí)還有一種簡(jiǎn)單方法var b = document.getElementById("dom").childNodes[0] 但是在FF下會(huì)出問題，這個(gè)我們以后討論

獲取頁面中的一組元素

JQ的方法：$("#dom ul li")或者$("#dom li")或者$("#dom > li"),
原生JS方法：var c = document.getElementById("dom").getElementsByTagName("li");但是這個(gè)c不等同于上面，因?yàn)椴荒芟裆厦鍶Q那樣直接使用。需要用for循環(huán)才能一起使用。如果單個(gè)使用比如說我只用第一個(gè)li，只需要var c = document.getElementById("dom").getElementsByTagName("li")[0]，用第二個(gè)就是var c = document.getElementById("dom").getElementsByTagName("li")[1],以此類推。因?yàn)镈OM元素在JS中是以數(shù)組形式存放的。

上面的都還算好理解?，F(xiàn)在我要講的這個(gè)是大家都常用的。但是在原生JS里獲取也是最麻煩的一個(gè)屬性就是class屬性,
<div class = "dom'>
</div>

JQ的方法:很簡(jiǎn)單$(".dom");
原生JS方法：這就有些麻煩了，需要寫一個(gè)函數(shù)。因?yàn)樵鶭S沒有提供直接獲取class的方法。所以我們需要這樣。我先把函數(shù)寫出來

用這個(gè)函數(shù)來獲取就很簡(jiǎn)單了只需要var d = $class("dom");

我就說說這個(gè)函數(shù)的意思吧，
var odiv = document.body.getElementByTagName("*");
這句意思是獲取頁面中所有的DOM元素

這個(gè)是遍歷頁面中所有元素然后拿他們的class進(jìn)行比對(duì)。如果和我們傳進(jìn)來的domclass這個(gè)參數(shù)一樣就把這個(gè)元素拿給a；
return a;把a(bǔ)返回出來

所以用var d = $class("dom");就相當(dāng)于var d = a;

(順便說下className是這JS的一個(gè)屬性就是得到DOM元素的命名的class)

好了今天就發(fā)這么多。我想我寫的比較籠統(tǒng)。大家肯定有很多不明白的地方，有不明白的就直接問。我會(huì)一一解釋的。大家想學(xué)什么交互效果也可以告訴我，我會(huì)盡量滿足大家

最新評(píng)論