位置: 编程技术 - 正文

Javascript & DHTML 实例编程(教程)DOM基础和基本API

编辑:rootadmin
一、什么是DOM? 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。因此,必须要对DOM有一定的认识,才能把Javascript应用于WEB,或你的RIA应用当中,因为DHTML本质上就是操作DOM树。 以后的编程当中,希望你能够把DHTML.chm这本手册也拿上,如果你需要兼容gecko,把gecko的DOM手册也带上。因为API太多,想不起来的接口还可以查这本手册。 如果你要测试浏览器是否是支持DOM的,简单的一句就可以判断 <script> var isSupportDOM = !!document.getElementById; //两个取反,这已经在上节中说过了,意思是强制转型 alert("你的浏览器 " +(isSupportDOM?"":"不")+ "支持 DOM!"); </script> 二、DOM树 要注意:DOM树的根统一为文档根—document,DOM既然是树状结构,那么他们自然有如下的几种关系: 根结点(document) 父结点(parentNode) 子结点(childNodes) 兄弟结点 兄弟结点 (sibling) (sibling) 例子: 假设网页的HTML如下 <html> <head> <title>never-online's website</title> </head> <body> <div>tutorial of DHTML and javascript programming</div> </body> </html> 我们参照树的概念,画出该HTML文档结构的DOM树: html body head div title 文本 文本 从上面的图示可以看出 html有两个子结点,而html就是这两个子节点的父结点 head有节点title,title下有一个文本节点 doby下有节点div,div下有一个文本节点 三、操作DOM树 开篇已经说过,DHTML本质就是操作DOM树。如何操作它呢? 假设我要改变上面HTML文档中div结点的文本,如何做?[code]<html> <head> <title>never-online's website</title> <script> function changedivText (strText) { var nodeRoot = document; //这个是根结点 var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点 var nodeBody = nodeHTML.childNodes[1]; //body结点 var nodeDiv = nodeBody.childNodes[0]; //DIV结点 var nodeText = nodeDiv.childNodes[0];//文本结点' nodeText.data = strText; //文本节点有data这个属性,因此我们可以改变这个属性,也就成功的操作了DOM树中的一个结点了 } </script> </head> <body> <div>tutorial of DHTML and javascript programming</div> <input onclick="changedivText('change?')" type="button" value="change"/> </body> </html> 从上面的示例可以看出,我们可以用上面的这种方法操作DOM树上的任一节点。(注:1. 跨域除外,跨域通常是在操作frame上,简单的说,就是两个frame不属于同一域名。2.上面的操作为了演示,采用的方法是从根结点一直到文本结点的遍历,在DOM方法上,有更简洁的方法,这些以后会有更多示例加以说明,下文中也会有介绍) 三、DOM节点。 细心些的朋友也许发现了,在上面写的HTML代码时用<>与</>包函起来的就是一个结点,事实上是这样的吗?答案是否定的。下面就是说说节点类型,否则在有的时候是会犯错误的。比如,你把上面的代码放到Mozilla firefox的浏览器里运行一下,就会知道了。 DOM中的结点类型比较多,这里写一些在HTML文档中(注:XML也是DOM树结构)常见的几种结点类型。 1、DOCUMENT_NODE (document)文档根结点类型,该枚举型的值是9. 2、ELEMENT_NODE (element)元素结点类型,该枚举型的值是1。上文中的html, body, div这些结点都是属于该类型。 3、TEXT_NODE (text)文本结点类型,该枚举型的值是3。上文中的文本,如:tutorial of DHTML and javascript programming就是属于该类型。 (注:一个空格也就可能是一个文本结点) 通常更需要注意的是文本结点,有可能一个回车,一个空格都是文本结点。这一点以后会碰到,当然,我们也有办法处理,这里先不要急,以后也会说到的。 四、DOM常用的API 这些常用的API是要记下来的,当然在非IE的浏览器里也会有效,是符合w3c的。这些API在以后的编程中会常常用到。正如每个编程平台所提供的API一样,常用必须记下来,节省时间从而提高编程效率。只写几个最常用的,其它的API会在以后的示例中写出。由浅而深,从易到难嘛。 1、获取ELEMENT_NODE,元素节点 1)、方法:document.getElementById(元素的Id),返回值为元素的节点引用。可以假想一下这个API的原理:象我们上面所做的是遍历每个节点(从根到我们所需结点),这个API,也可以想成是从根遍历,查询每个结点(空白结点和空结点除外),并获取该结点的id是否为指定的ID,如果是的话,就返回这个结点(注:在JS中,数组和对象是引用类型),如果没有就返回空。我们可以写写这个代码,帮助我们理解document.getElementById。下面是一个简单遍历BODY中元素的示例。 <html> <head> <title>never-online's website</title> <script> function myGetElementById (id) { var nodeRoot = document; //这个是根结点 var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点 var nodeBody = nodeHTML.childNodes[1]; //body结点 var bodyChild = nodeBody.childNodes; //body的孩子 for (var i=0; i<bodyChild.length; i++) { //简单的遍历(指body的孩子下的深度为1) if (bodyChild[i].id==id) return bodyChild[i]; }; return null; } function TestGetElementById (id) { var node = myGetElementById(id); if (node!=null) { alert("找到结点 "+id+"!"); alert(node.childNodes[0].data); } else { alert("没有找到结点 "+id+"."); } } </script> </head> <body> <div id="aTestNode"></div> <div id="textNode">tutorial of DHTML and javascript programming</div> <input onclick="TestGetElementById('textNode')" type="button" value="change"/> </body> </html> 2)、属性:object.innerHTML,返回值:一个节点内的HTML值。该属性为可写属性。它虽然不是获取结点,但经常与获取结点相结合,所以我把它放在获取结点这一类,它的属性就类似于是纯文本节点属性中的data。以document.getElementById和object.innerHTML这两个API为例,我们就可以把上面所写的代码简化一下了,示例如下: <html> <head> <title>never-online's website</title> <script> function changedivText (strText) { var node = document.getElementById("textNode"); node.innerHTML = strText; } </script> </head> <body> <div id="textNode">tutorial of DHTML and javascript programming</div> <input onclick="changedivText('change?')" type="button" value="change"/> </body> </html> 3)、方法:object.getElementsByTagName(标签的名字),返回一个集合,该集合的把有元素都是有指定标签的元素。访问集合里的元素,可以用下标来访问。语法里的object,是指document(根)或者是一个ELEMENT_NODE。这个的原理示例我就不写了,可以作为一个作业,大家可以写写。这里写一些具体应用。如上例,我们还可以这样写。 <html> <head> <title>never-online's website</title> <script> function changedivText (strText) { var node = document.getElementsByTagName("DIV"); node[0].innerHTML = strText; } </script> </head> <body> <div>tutorial of DHTML and javascript programming</div> <input onclick="changedivText('change?')" type="button" value="change"/> </body> </html> 再取一个例子,注意,BODY下的结点深度为2。 <html> <head> <title>never-online's website</title> <script> function changedivText (strText) { var node = document.getElementById("nodeTest"); var myNode = node.getElementsByTagName("DIV"); myNode[0].innerHTML = strText; } </script> </head> <body> <div id="nodeTest"> <div>tutorial of DHTML and javascript programming</div> <input onclick="changedivText('change?')" type="button" value="change"/> </div> </body> </html> 二、动态创建与插入结点 1)、创建结点对象。document.createElement(tagname),tagname指的是一个标签,比如一个DIV,就是document.createElement("DIV"),它返回的是这个结点的引用。 2)、在body的尾部插入结点用document.body.appendChild(object),为了容易理解,下面这个示例,我用了IE专有的属性object.outerHTML,得到一个该元素的HTML标签内容(包括自身),这样会更容易看到效果。 <html> <head> <title>never-online's website</title> <script> function insertNode (strText) { alert("插入元素前的body HTML:n" +document.body.outerHTML); var node = document.createElement("DIV"); node.innerHTML = strText; document.body.appendChild(node); alert("插入元素后的body HTML:n" +document.body.outerHTML); } </script> </head> <body> <div>tutorial of DHTML and javascript programming</div> <input onclick="insertNode('change?')" type="button" value="change"/> </body> </html> 3)、在元素处插入结点。object.insertBefore(oNewNode [, oChildNode]),oNewNode为一个我们创建的结点,oChildNode是可选的,为object下的一个子节点。同样的,为了看到效果,我也用了outerHTML。示例 <html> <head> <title>never-online's website</title> <script> function insertNode (strText) { alert("插入元素前的body HTML:n" +document.body.outerHTML); var node = document.createElement("DIV"); var myNode = document.getElementById("textNode"); node.innerHTML = strText; document.body.insertBefore(node,myNode); alert("插入元素后的body HTML:n" +document.body.outerHTML); } </script> </head> <body> <div id="textNode">tutorial of DHTML and javascript programming</div> <input onclick="insertNode('change?')" type="button" value="change"/> </body> </html> 三、移除结点。 1) object.parentNode.removeChild(oChildNode),这个就是语法,下面看示例。 <html> <head> <title>never-online's website</title> <script> function insertNode (strText) { alert("插入元素前的body HTML:n" +document.body.outerHTML); var node = document.createElement("DIV"); var myNode = document.getElementById("textNode"); node.innerHTML = strText; document.body.insertBefore(node,myNode); alert("插入元素后的body HTML:n" +document.body.outerHTML); } function removeCreateNode() { alert("移除元素前的body HTML:n" +document.body.outerHTML); var node = document.getElementById("textNode"); node.parentNode.removeChild(node); alert("移除元素前的body HTML:n" +document.body.outerHTML); } </script> </head> <body> <div id="textNode">tutorial of DHTML and javascript programming</div> <input onclick="insertNode('change?')" type="button" value="insert"/> <input onclick="removeCreateNode()" type="button" value="remove"/> </body> </html> 这一节就先写到这里,下一节我们就可以用这几个简单的API做许多事情了,几个API就可以写出很多效果。:D

推荐整理分享Javascript & DHTML 实例编程(教程)DOM基础和基本API,希望有所帮助,仅作参考,欢迎阅读内容。

Javascript & DHTML 实例编程(教程)DOM基础和基本API

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例 效果DEMO:

Javascript & DHTML 实例编程(教程)(四)初级实例篇2—动画 上篇说了动态创建结点和删除结点的例子,这一篇说一些如何用setInterval和setTimeout做简单的动画。语法皆是window.setTimeout(fn,delay),window.setInterval(fn,delay)fn

javascript中的几个运算符 ||是这样运算的:从第一个开始,遇到有意义的返回,否则返回最后一个表达式(注意不一定是Boolean值);&&是这样运算的:从第一个开始,遇到无意

标签: Javascript & DHTML 实例编程(教程)DOM基础和基本API

本文链接地址:https://www.jiuchutong.com/biancheng/383959.html 转载请保留说明!

上一篇:Javascript & DHTML 实例编程(教程)基础知识

下一篇:Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例

  • 投资收益所得税前扣除
  • 小规模要交增值税怎么计提
  • 股票交易印花税降低
  • 其他综合收益属于当期损益吗
  • 发票金额多开了有事吗
  • 去年发生的成本怎么算
  • 民办职业技能培训学校办学许可证
  • 购入免征车船税吗
  • 往年预付账款错了,应如何调?
  • 职工死去还有工资吗
  • 印花税加工承揽税率
  • 差额纳税账务处理
  • 文化事业建设费税收优惠政策2023
  • 小规模纳税人发票图片
  • 净值在财务报表哪找
  • 小规模纳税人别人开了专票怎样处理
  • 上月开的发票本月作废怎么处理
  • 房地产开发项目土地使用权的取得方式
  • 货物出库的会计分录
  • w11如何激活
  • 附加税享受税收减免的怎么记账
  • 固定资产报废怎么处理
  • 企业能公户往个人转账吗
  • phpcookie
  • 贷款利息不能抵扣进项税
  • 销售折让负数会计分录
  • 小规模纳税人冲红发票怎么报税
  • 索尼体积最小的微单
  • cpu版本的pytorch可以运行LSgan嘛
  • 仓储服务和不动产租赁
  • 担保余值计算公式
  • php yield 异步
  • vue项目创建流程
  • php绘制图片
  • 新政府会计准则三大特点
  • 既简单又安全的小实验
  • 基于transformers的nlp入门 pdf
  • Python计算机视觉———照相机标定
  • 云质信息
  • 将本月发生的制造费用总额按生产工人
  • 定额发票在哪查真伪
  • 收到进项发票不对公账怎么办
  • python django做网页
  • phpcms默认密码
  • Python打开文件的代码
  • dedecms使用教程
  • 季度所得税收入多报,年度可以调整吗
  • 农业用肥尽量不选择
  • 应税销售行为有哪些
  • sql动态执行
  • access调用sql
  • 一次性伤残补助金怎么计算
  • 个人扣税是怎么扣的
  • 净值型 赎回
  • 职工教育经费是否可以抵扣进项税
  • 质保金怎么做账
  • 建筑安装行业都需要什么资格证书
  • 汽车修理厂利润
  • 凭证填制的标准要求
  • 如何创建sql server数据库表
  • ubuntu卸载ubuntu-desktop
  • win10安装固态硬盘打开软件卡
  • qctray.exe - qctray进程 是什么文件 作用是什么
  • linux wordpress gzip压缩开启方法
  • window7系统中的桌面指什么
  • 十个常用linux脚本命令
  • win7如何设置多用户
  • win8任务管理器灰色
  • 安卓手机微信取消窗口化
  • 批处理文件用的什么语言
  • javascript例题
  • javascript中的getElementById
  • 如何分析源码
  • 2012 05-26 Unity3D研究院之两种方式播放游戏视频(二十五) 雨松MOMO
  • 青岛市国家税务局官方网站
  • 北京税务局地税电话
  • 河北工伤网上申请流程
  • 下抓两级抓深一层的工作机制的要求包括什么
  • 房产税税源编号
  • 车辆购置税计入固定资产一起折旧吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设