快捷導(dǎo)航

javascript針對DOM的應(yīng)用實(shí)例（一）

更新時(shí)間：2012年04月15日 22:19:18 作者：

所謂針對DOM的應(yīng)用。也就我這里只教大家用javascript操作頁面中dom元素做交互

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

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

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

復(fù)制代碼代碼如下:

 
<div id="dom"> 
<span></span> 
</div> 

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

獲取頁面中的一組元素

復(fù)制代碼代碼如下:

 
<div id = "dom"> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
<ul> 
</div> 

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

復(fù)制代碼代碼如下:

 
function $class(domclass){ 
var odiv = document.body.getElementByTagName("*"); 
var a; 
for(var i = 0;i<odiv.length;i++){ 
if(odiv.className ==domclass){ 
a = odiv 
} 
return a; 
} 
} 

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

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

復(fù)制代碼代碼如下:

 
for(var i = 0;i<odiv.length;i++){ 
if(odiv.className ==domclass){ 
a = odiv 
} 

這個(gè)是遍歷頁面中所有元素然后拿他們的class進(jìn)行比對。如果和我們傳進(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)。大家肯定有很多不明白的地方，有不明白的就直接問。我會一一解釋的。大家想學(xué)什么交互效果也可以告訴我，我會盡量滿足大家

您可能感興趣的文章: