DHTML中重要的属性方法

来源:51js 时间:2008-06-21 17:13:00 

由于DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node and node),想学习DHTML中的DOM千万不要从头到尾地看遍所有的属性和方法,你有三国时张松的"过目不忘"的本领吗?没有吧,那就听我分析一下:

其实DOM教给我们的就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录……

根节点:

DOM把层次中的每一个对象都称之为节点(NODE),以HTML超文本标记语言为例:整个文档的一个根就是<html>,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点(ROOT)

子节点:

一般意义上的节点,根节点以下最大子节点就是主文档区<body>了,要访问到body标签,在脚本中应该写:

document.body

body区以内所有的文本及HTML标签都是文档的节点,分别称为文本节点、元素节点(或者叫标签节点),大家知道HTML说到底只是文本而矣,不论怎么样的网页必然由这两个节点组成,也只能由这两个节点组成

节点之间的关系:

节点之间的关系也是DOM中最重要的一个关节,如何正确地引用到节点对象,一定要清楚节点树各个节点的相互描述方式,在DHTML里,Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。


节点的绝对引用:
返回文档的根节点
document.documentElement
返回当前文档中被击活的标签节点
document.activeElement
返回鼠标移出的源节点
event.fromElement
返回鼠标移入的源节点
event.toElement
返回激活事件的源节点
event.srcElement

节点的相对引用:(设当前对节点为node)
返回父节点
node.parentNode
node.parentElement
返回子节点集合(包含文本节点及标签节点)
node.childNodes
返回子标签节点集合
node.children
返回子文本节点集合
node.textNodes
返回第一个子节点
node.firstChild
返回最后一个子节点
node.lastChild
返回同属下一个节点
node.nextSibling
返回同属上一个节点
node.previousSibling

节点的各种操作:(设当前的节点为node)

新增标签节点句柄:
document.createElement(sNode) //参数为要新添的节点标签名,例:newnode=document.createElement("div");

1、添加节点:
追加子节点:
node.appendChild(oNode) //oNode为生新增的节点句柄,例:node.appendChild(newnode)
应用标签节点
node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值:outside / inside,加在当前节点外面还是里面
插入节点
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()

2、修改节点:

删除节点
node.remove()
node.removeChild()
node.removeNode()

替换节点
node.replaceChild()
node.replaceNode()
node.swapNode()


2、复制节点:
返回复制复制节点引用
node.cloneNode(bAll)//bAll为布尔值,true / false 是否克隆该节点所有子节点

3、节点信息
是否包含某节点
node.contains()
是否有子节点
node.hasChildNodes()

标签:dhtml,dom,方法
0
投稿

猜你喜欢

  • 后台程序开发常用jQuery插件

    2010-04-06 12:11:00
  • 让ASP组件来保护你的网站,自定义加密方法的使用

    2009-11-07 19:27:00
  • Bowman vs Google-设计与数据彼此相互需要

    2009-08-16 16:06:00
  • Sql server 2005 找出子表树

    2008-11-24 15:23:00
  • js表单提交显示进度条

    2007-09-18 13:10:00
  • 带你轻松接触 MySQL中损坏的MyISAM表

    2008-12-19 17:55:00
  • 用Dreamweaver MX制作文字特效

    2011-06-14 09:49:47
  • 不支持RSS,如何跟踪网站的内容更新?

    2008-09-08 12:38:00
  • 费明红:什么样的404页面才是正确的?

    2009-05-21 17:47:00
  • asp防止盗链HTTP_REFERER判断代码

    2010-03-12 10:41:00
  • Dreamweaver制作网页实用七小招

    2009-05-29 18:36:00
  • SQL脚本语言学习(黑客篇)

    2008-02-29 13:09:00
  • 不通过数据源名DSN也能访问Access数据库吗?

    2009-10-29 12:22:00
  • ASP.NET中MD5和SHA1密码保护算法的使用

    2007-08-24 09:18:00
  • MYSQL中取得最后一条记录

    2010-03-09 16:08:00
  • SQLServer中数据库文件的存放方式,文件和文件组

    2012-01-05 18:56:33
  • 对比国内门户网站对Flash激活限制的处理

    2007-08-23 11:29:00
  • 用文本+ASP打造新闻发布系统

    2009-02-02 09:31:00
  • MySQL表设计优化与索引 (五)

    2010-10-25 20:24:00
  • 斜角滑动门导航条 DIV+CSS

    2008-07-19 15:45:00
  • asp之家 网络编程 m.aspxhome.com