javascript針對DOM的應用實例（一）
2024-05-06 14:22:08
供稿：網友
我相信可能大部分人來這里學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返回出來
