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


Posted in Javascript onApril 15, 2012

我相信可能大部分人来这里学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 相关文章推荐
JavaScript面象对象设计
Apr 28 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
JavaScript中的null和undefined解析
Apr 14 #Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 #Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 #Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 #Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 #Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 #Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 #Javascript
You might like
短波问题解答
2021/02/28 无线电
JAVA/JSP学习系列之六
2006/10/09 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
PHP数组实例总结与说明
2011/08/23 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
JSON取值前判断
2014/12/23 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
对python的输出和输出格式详解
2018/12/08 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python3实现弹弹球小游戏
2019/11/25 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Python使用Pygame绘制时钟
2020/11/29 Python
语文课外活动总结
2014/08/27 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
python Polars库的使用简介
2021/04/21 Python
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
openstack云计算keystone组件工作介绍
2022/04/20 Servers