我相信可能大部分人来这里学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) 好了今天就发这么多。我想我写的比较笼统。大家肯定有很多不明白的地方，有不明白的就直接问。我会一一解释的。大家想学什么交互效果也可以告诉我，我会尽量满足大家

　　推荐阅读

　　JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识。因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1、DOM的架构 复制代>>>详细阅读

本文标题：javascript针对DOM的应用实例（一）

地址：http://www.17bianji.com/kaifa2/JS/23466.html

 1/2    1