javascript针对DOM的应用（一）

所谓针对DOM的应用。也就我这里只教大家用javascript操作页面中dom元素做交互。

如果页面中的元素是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)