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)
好了今天就发这么多。我想我写的比较笼统。大家肯定有很多不明白的地方，有不明白的就直接问。我会一一解释的。大家想学什么交互效果也可以告诉我，我会尽量满足大家
相关推荐
-
javascript转换字符串为dom对象（字符串动态创建dom）
前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样
-
javascript DOM 操作基础知识小结
DOM添加元素,使用节点属性 DOM添加元素,使用节点属性 //涂聚文 geovindu@163.com var nr = 1; function addItem() { var list = document.getElementById("list"); var newNode = document.createElement("li"); var newLink = document.createElement("a"); newLink.
-
javascript获取dom的下一个节点方法
利用javascript 写一个在页面点击加减按钮实现数字的累加. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" value="+" onclick="jia(this)" /> <label class="num">0</label> <input type="button" value="-"
-
Javascript Event事件中IE与标准DOM的比较
1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: 复制代码 代码如下: <body> <div> <button>点击这里</button> </div> </body> 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型: body->div->button (Netscape事件流) DOM事件模型: body-&g
-
JavaScript DOM 学习总结(五)
1.DOM简介. 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构,即节点树.通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能.JS能够改变页面中所有的HTML元素.属性和CSS样式,并对页面中所有事件做出响应.所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作. 2.DOM获取元素. JS要想操作H
-
js加载之使用DOM方法动态加载Javascript文件
传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,
-
javascript 删除dom对象的事件函数代码
JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件). 例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下: 添加删除事件 var EventUtil=new Object; //oTarget:目标:sEventTyp
-
JavaScript判断DOM何时加载完毕的技巧
处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题.浏览器的渲染和操作顺序大致如下列表: HTML解析完毕 外部脚本和样式表加载完毕 脚本在文档内解析并执行 HTML DOM完全构造起来 图片和外部内容加载 网页完成加载 在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行.如前所述,这是个至关重要的问题,因为这两处执行的脚本并不能访问还不存在的DOM.幸好,我们还有若干的补救方法. 目前,最常用的级数是完全等待整
-
Javascript 通过json自动生成Dom的代码
json转html 三重奏 原料:json 复制代码 代码如下: var json={ 'div':{id:'flower',className:"a1",sub:[ { 'ul':{id:'flower1',className:["a2","a3"],sub:[ {'li':{num:3,con:"内容内容内容",fn:{'click':function(){alert('我是LiLi')}}}} ]} }, { 'ul':
-
javascript调试之DOM断点调试法使用技巧分享
有的同学会说,可以使用源代码搜索的办法.的确,对于一个相对简单的页面,这个方法时常奏效.但是,对于构成相对复杂的页面(比如页面嵌入很多脚本文件和片段.使用了大段面向对象的实现.隐藏了实现的代码),可能找起来就不那么顺利了. 在Javascript调试中,我们经常会使用到断点调试.其实,在DOM结构的调试中,我们也可以使用断点方法,这就是DOM Breakpoint(DOM断点). 具体的使用方法: 1. 在Chrome浏览器中,打开开发者工具,先选中一个页面元素,然后点击鼠标右键,依次点击菜单中
-
javascript 基础篇4 window对象，DOM
他的属性也很丰富,因为我很懒,我就直接复制手册里的东西了: closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组. dialogHeight 设置或获取模式对话框的高度. dialogLeft 设置或获取模式对话框的左坐标. dialogTop 设置或获取模式对话框的顶坐标. dialogWidth 设置或获取模式对话框的宽度. frameElement
-
JavaScript与DOM组合动态创建表格实例
这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等. 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单元格的文字内容是:"单元格是第y行第x列
-
javascript拓展DOM操作 prependChild insertAfert
以下是自己写的一个拓展函数,虽然网上已经有了,仅当做自己练兵... 复制代码 代码如下: function prependChild(o,s){ if(s.hasChildNodes()){ s.insertBefore(o,s.firstChild); }else{ s.appendChild(o); } } function insertAfert(o,s){ if(s.nextSibling!=null){ s.parentNode.insertBefore(o,s.nextSibling
-
javascript 获取HTML DOM父、子、临近节点
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i
-
javascript dom 操作详解 js加强
1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读属性 nodeValue 1 元素节点 2 属性节点 3 文本节点 只读属性 nodeType 不能用于元素节点 返回 null 2 . getElementsByTagName 返回一个节点集合 3 . firstChild . lastChild 第一个元素节点,最后一个元素节点 4 . childNodes 返回所有
-
javascript中对Attr(dom中属性)的操作示例讲解
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>20120430d