javascript针对DOM的应用实例(一)
2023-06-13 09:14:33 时间
我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果。所以我这里只教大家最实际,最有用的javascript应用。但是前提大家最好有一些javascript或者jquery的编程的基础。好废话不多说了。
今天第一篇,就教大家如何用javascript获取页面中的dom元素。这个很重要。我会对照JQuery来讲。
如果页面中的元素是ID属性
<divid="dom"></div>
JQ的方法:$("#dom"),
原生js的方法:vara=document.getElementById("dom");这个a就等价于$("#dom");
如果我想获取父级元素下的一个元素
复制代码代码如下:
今天第一篇,就教大家如何用javascript获取页面中的dom元素。这个很重要。我会对照JQuery来讲。
如果页面中的元素是ID属性
<divid="dom"></div>
JQ的方法:$("#dom"),
原生js的方法:vara=document.getElementById("dom");这个a就等价于$("#dom");
如果我想获取父级元素下的一个元素
<divid="dom">
<span></span>
</div>
JQ的方法:$("#domspan"),
原生js的方法:varb=document.getElementById("dom").getElementsByTagName("span")[0];这个b就等价于$("#domspan")
其实还有一种简单方法varb=document.getElementById("dom").childNodes[0]但是在FF下会出问题,这个我们以后讨论
获取页面中的一组元素
<divid="dom">
<ul>
<li></li>
<li></li>
<li></li>
<ul>
</div>
JQ的方法:$("#domulli")或者$("#domli")或者$("#dom>li"),
原生JS方法:varc=document.getElementById("dom").getElementsByTagName("li");但是这个c不等同于上面,因为不能像上面JQ那样直接使用。需要用for循环才能一起使用。如果单个使用比如说我只用第一个li,只需要varc=document.getElementById("dom").getElementsByTagName("li")[0],用第二个就是varc=document.getElementById("dom").getElementsByTagName("li")[1],以此类推。因为DOM元素在JS中是以数组形式存放的。
上面的都还算好理解。现在我要讲的这个是大家都常用的。但是在原生JS里获取也是最麻烦的一个属性就是class属性,
<divclass="dom">
</div>
JQ的方法:很简单$(".dom");
原生JS方法:这就有些麻烦了,需要写一个函数。因为原生JS没有提供直接获取class的方法。所以我们需要这样。我先把函数写出来
function$class(domclass){
varodiv=document.body.getElementByTagName("*");
vara;
for(vari=0;i<odiv.length;i++){
if(odiv.className==domclass){
a=odiv
}
returna;
}
}
用这个函数来获取就很简单了只需要vard=$class("dom");
我就说说这个函数的意思吧,
varodiv=document.body.getElementByTagName("*");
这句意思是获取页面中所有的DOM元素
for(vari=0;i<odiv.length;i++){
if(odiv.className==domclass){
a=odiv
}
这个是遍历页面中所有元素然后拿他们的class进行比对。如果和我们传进来的domclass这个参数一样就把这个元素拿给a;
returna;把a返回出来
所以用vard=$class("dom");就相当于vard=a;
(顺便说下className是这JS的一个属性就是得到DOM元素的命名的class)
好了今天就发这么多。我想我写的比较笼统。大家肯定有很多不明白的地方,有不明白的就直接问。我会一一解释的。大家想学什么交互效果也可以告诉我,我会尽量满足大家
相关文章
- HTML的注释与JavaScript注释及快捷键「建议收藏」
- javascript_JavaScript走向成熟
- ASP.NET MVC使用javascript
- 【说站】javascript寄生式组合继承如何实现
- JavaScript案例:tab栏切换
- JavaScript匿名函数理解及应用[通俗易懂]
- JavaScript表单基础
- 用javascript实现“闪动”标题栏
- 在textarea中显示html页面的javascript代码
- JavaScript无提示关闭窗口(兼容IE/Firefox/Chrome)
- JavaScript全面解析各种浏览器网页中的JS执行顺序
- 常用简易JavaScript函数
- Javascript学习笔记9prototype封装继承
- Javascript异步加载详解(浏览器在javascript的加载方式)
- Javascript的各种节点操作实例演示代码
- javascript设计模式封装和信息隐藏(上)
- javascript五图轮播切换实用版
- JavaScript与DOM组合动态创建表格实例
- jsp+javascript打造级连菜单的实例代码
- 原生javascript兼容性测试实例
- javascript随机将第一个dom中的图片添加到第二个div中示例
- Javascript中查找不以XX字符结尾的单词示例代码
- javascript打印输出json实例
- Javascript按位取反运算符(~)
- javascript实现数字验证码的简单实例
- js(JavaScript)实现TAB标签切换效果的简单实例
- javascript面向对象之定义成员方法实例分析
- JavaScript中实现继承的三种方式和实例
- JavaScript数组函数unshift、shift、pop、push使用实例
- JavaScript获取图片真实大小代码实例