注册登录

【DOM】javascript针对DOM的应用实例（一）

时间:2016-02-12 13:17 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【javascript针对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");

如果我想获取父级元素下的一个元素

复制代码代码如下:

JQ的方法：$("#dom span"),
原生js的方法：var b=document.getElementById("dom").getElementsByTagName("span")[0];这个b就等价于$("#dom span")
其实还有一种简单方法var b=document.getElementById("dom").childNodes[0] 但是在FF下会出问题，这个我们以后讨论

获取页面中的一组元素

复制代码代码如下:

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的应用实例（一）的用户互动如下：

　　相关问题：javascript实例

　　答：可以使用new关键字来实例,也可以直接使用,javascript是弱语言,类型的概念很模糊. >>详细

　　相关问题：javascript的具体应用，，

　　答：能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascr... >>详细

　　相关问题：javascript有哪些著名实例！？

　　答：您好,javascript方面的书的话,比较有名的有: javascript权威指南 javascript入门经典 javascript高级程序设计(我自己就是用得这本书,很不错,外国人写的) 然后,你还得深入学jquery 以及html,css基础希望对您有所帮助 >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【DOM】javascript针对DOM的应用实例（一）

javascript针对DOM的应用实例（一）

关于javascript针对DOM的应用实例（一）的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）