您好,欢迎访问一九零五行业门户网

javascript针对DOM的应用实例(一)_DOM

我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的dom元素做一些实际有用的交互效果。所以我这里只教大家最实际,最有用的javascript应用。但是前提大家最好有一些javascript或者jquery的编程的基础。好废话不多说了。
今天第一篇,就教大家如何用javascript获取页面中的dom元素。这个很重要。我会对照jquery来讲。
如果页面中的元素是id属性
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属性,
jq的方法:很简单$( .dom>原生js方法:这就有些麻烦了,需要写一个函数。因为原生js没有提供直接获取class的方法。所以我们需要这样。我先把函数写出来
复制代码 代码如下:
function $class(domclass){
var odiv = document.body.getelementbytagname(*);
var a;
for(var i = 0;iif(odiv.classname ==domclass){
a = odiv
}
return a;
}
}
用这个函数来获取就很简单了只需要var d = $class(dom);
我就说说这个函数的意思吧,
var odiv = document.body.getelementbytagname(*);
这句意思是获取页面中所有的dom元素
复制代码 代码如下:
for(var i = 0;iif(odiv.classname ==domclass){
a = odiv
}
这个是遍历页面中所有元素然后拿他们的class进行比对。如果和我们传进来的domclass这个参数一样就把这个元素拿给a;
return a;把a返回出来
所以用var d = $class(dom);就相当于var d = a;
(顺便说下classname是这js的一个属性就是得到dom元素的命名的class)
好了今天就发这么多。我想我写的比较笼统。大家肯定有很多不明白的地方,有不明白的就直接问。我会一一解释的。大家想学什么交互效果也可以告诉我,我会尽量满足大家
其它类似信息

推荐信息