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

所属分类: 网络编程 / JavaScript 阅读数: 154
收藏 0 赞 0 分享
我相信可能大部分人来这里学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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多