javascript針對DOM的應用執行個體（一）

我相信可能大部分人來這裡學javascript主要還是想用這個結合頁面中的DOM元素做一些實際有用的互動效果。所以我這裡只教大家最實際，最有用的javascript應用。但是前提大家最好有一些javascript或者jquery的編程的基礎。好廢話不多說了。
今天第一篇，就教大家如何用javascript擷取頁面中的dom元素。這個很重要。我會對照JQuery來講。
如果頁面中的元素是ID屬性
<div id="dom"></div>

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

如果我想擷取父級元素下的一個元素 複製代碼 代碼如下:<div id="dom">
<span></span>
</div>

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

擷取頁面中的一組元素 複製代碼 代碼如下:<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");但是這個c不等同於上面，因為不能像上面JQ那樣直接使用。需要用for迴圈才能一起使用。如果單個使用比如說我只用第一個li，只需要var c = document.getElementById("dom").getElementsByTagName("li")[0]，用第二個就是var c = document.getElementById("dom").getElementsByTagName("li")[1],以此類推。因為DOM元素在JS中是以數組形式存放的。

上面的都還算好理解。現在我要講的這個是大家都常用的。但是在原生JS裡擷取也是最麻煩的一個屬性就是class屬性,
<div class = "dom'>
</div>

JQ的方法:很簡單$(".dom");
原生JS方法：這就有些麻煩了，需要寫一個函數。因為原生JS沒有提供直接擷取class的方法。所以我們需要這樣。我先把函數寫出來 複製代碼 代碼如下: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;
}
}

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

我就說說這個函數的意思吧，
var odiv = document.body.getElementByTagName("*");
這句意思是擷取頁面中所有的DOM元素 複製代碼 代碼如下:for(var i = 0;i<odiv.length;i++){
if(odiv.className ==domclass){
a = odiv
}

這個是遍曆頁面中所有元素然後拿他們的class進行比對。如果和我們傳進來的domclass這個參數一樣就把這個元素拿給a；
return a;把a返回出來

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

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

好了今天就發這麼多。我想我寫的比較籠統。大家肯定有很多不明白的地方，有不明白的就直接問。我會一一解釋的。大家想學什麼互動效果也可以告訴我，我會盡量滿足大家