hml/dhtml

原创 2007年10月14日 00:02:00

DOM对象

由于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() 

 

xhtml,xml,html,和dhtml的关系和区别

XHTML产生的原因,一方面是为了和未来的XML大规模的应用接轨,一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者,开发者相兼容,于是便出现了这个东西。以HTML编写的网页中,标记使...
  • a519781181
  • a519781181
  • 2016年07月29日 10:47
  • 1666

dhtmlxtree学习笔记三(ajax动态获取数据)

前端代码 Easy skinable design
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:27
  • 792

JavaScript第五章知识点总结——常用DHTML对象 Window对象 对话框 定时器

JavaScript第五章知识点总结——常用DHTML对象 Window对象 对话框 定时器 知识点预览 DHTML概述 Window对象 对话框 定时器     ...
  • yasiyuan
  • yasiyuan
  • 2014年10月11日 15:58
  • 308

DHTML-----表格的创建和样式

一、表格的创建、删除 给定表格的行列,实现创建,修改和,删除功能 DHTML技术演示 table{ border-collapse:collapse; c...
  • wangjian_an
  • wangjian_an
  • 2016年06月17日 12:06
  • 372

JavaScript使用for循环完成打印出四种形式的九九乘法表

Document //形式一 document.write(""); for (var i = 1; i document.write(""); for (var j = 1; j docume...
  • luorongsong_1994
  • luorongsong_1994
  • 2017年10月24日 21:03
  • 228

DHTML编程-1.HTML简介与第一个HTML页面

前言: 这一个系列是笔者自学java时所写,一方面为了巩固自己对知识的理解,方便日后查看;另一方面,也是为了能给自学java的同行者说一下自己的愚见。本系列文章内容在学习时是以HTML 4 标准,...
  • u013255737
  • u013255737
  • 2017年01月16日 17:20
  • 599

[HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上...
  • luqin1988
  • luqin1988
  • 2013年04月17日 16:02
  • 4593

dhtml 简介 (附录dhtml参考手册)

DHTML是Dynamic HTML的简称,就是动态的html,是相对传统的静态的html而言的一种制作网页的概念。所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言...
  • wangeclipse
  • wangeclipse
  • 2013年12月15日 00:08
  • 419

DHTMLX做一个Grid列表显示数据

准备数据data.xml Grid的数据从这里读取 380 90 100 90 ...
  • HowCanYouDoIt
  • HowCanYouDoIt
  • 2016年09月05日 23:31
  • 1461

DOM和DHTML等,复习总结

DOM(Document Object Model),文件对象模型。 HTML HTML的元素:的超类:Node->Document;Node->Element->HTMLElement。 HTML的...
  • gaojinshan
  • gaojinshan
  • 2014年06月10日 20:42
  • 1279
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:hml/dhtml
举报原因:
原因补充:

(最多只允许输入30个字)