脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → DOM → DOM

javascript针对DOM的应用实例（一）

 更新时间：2012年04月15日 22:19:18   作者：  
所谓针对DOM的应用。也就我这里只教大家用javascript操作页面中dom元素做交互
我相信可能大部分人来这里学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)

好了今天就发这么多。我想我写的比较笼统。大家肯定有很多不明白的地方，有不明白的就直接问。我会一一解释的。大家想学什么交互效果也可以告诉我，我会尽量满足大家
您可能感兴趣的文章:

相关文章

  • HTML Dom与Css控制方法

    HTML Dom与Css控制方法

    HTML Dom与Css的关系，大家都知道Css是用来美化网页．更改网页中元素的外观．
    2010-10-10
  • DOM 中的事件处理介绍

    DOM 中的事件处理介绍

    根据 W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的节点（Node）实现
    2012-01-01
  • 操作Dom中的子元素与兄弟元素的代码

    操作Dom中的子元素与兄弟元素的代码

    无论是在HTML里或XML文件里．都存在着子元素与兄弟元素的概念．那么我们如何使用Dom正确的操作这些元素．
    2010-10-10
  • 什么是DOM(Document Object Model)文档对象模型

    什么是DOM(Document Object Model)文档对象模型

    文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式
    2012-03-03
  • javascript针对DOM的应用分析（四）

    javascript针对DOM的应用分析（四）

    从这张开始就和大家说一些实用的效果的写法。当然首当其冲的就是我们可爱的TAB选项卡，用JQ写选项卡当然是很方便的而且方法也很多。其实用原生的JS写选项卡方法也很多
    2012-04-04
  • Dom 是什么的详细说明

    Dom 是什么的详细说明

    Dom 英文全称－Document Object Model 译成中文即是：文档对像模型．听起来很术语，其实就是文档内容的结构关系．文档类型可以是HTML或XML。
    2010-10-10
  • Dom在ajax技术中的作用说明

    Dom在ajax技术中的作用说明

    Dom的功能确实很强大，在JavaScript的驱使下Dom能做的事太多了．
    2010-10-10
  • Dom 结点创建 基础知识

    Dom 结点创建 基础知识

    节点操作基础知识回顾，需要dom操作的朋友可以参考下。
    2011-10-10
  • javascript针对DOM的应用分析（五）

    javascript针对DOM的应用分析（五）

    终于可以抽出点时间再出一篇教程了。废话不多说了。今天这篇就教大家一个常用的效果。固定居中效果
    2012-04-04
  • DOM 高级编程

    DOM 高级编程

    这篇文章主要介绍了DOM 高级编程,需要的朋友可以参考下
    2015-05-05

最新评论