网站建设中心   网站建设技术   网页设计技术   JavaScript  

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

人浏览  发布时间:2021-02-15

我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果。所以我这里只教大家最实际,最有用的javascript应用。但是前提大家最好有一些...
我相信可能大部分人来这里学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) 

好了今天就发这么多。我想我写的比较笼统。大家肯定有很多不明白的地方 (编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图