大家好，我是javascript新來的版主。從今天起，我每周會更新一篇javascript針對DOM的應用帖子。
所謂針對DOM的應用。也就我這裡只教大家用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)
好了今天就發這麼多。我想我寫的比較籠統。大家肯定有很多不明白的地方，有不明白的就直接問。我會一一解釋的。大家想學什麼交互效果也可以告訴我，我會盡量滿足大家