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 相关文章推荐
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
JavaScript中的闭包
Feb 24 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
angular中的cookie读写方法
Aug 02 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP 正则表达式小结
2015/02/12 PHP
深入分析PHP设计模式
2020/06/15 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
Python编程实现蚁群算法详解
2017/11/13 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python PIL库图片灰化处理
2020/04/07 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
如何转换一个字符串到enum值
2014/04/12 面试题
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL