DHTML初学者指南:DHTML中重要的属性方法

dhtml|初学

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

时间: 2024-10-14 22:49:12

DHTML初学者指南:DHTML中重要的属性方法的相关文章

jquery遍历标签中自定义的属性方法_jquery

在开发中我们有时会对html标签添加属性,如何遍历处理? <ul> <li name="li1" sortid="nav_1">aaaaaaa</li> <li name="li1" sortid="nav_2">bbbbbbb</li> <li name="li1" sortid="nav_3">cccccccc&

DHTML中重要的属性方法

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

Java多线程初学者指南(5):join方法的使用

在上面的例子中多次使用到了Thread类的join方法.我想大家可能已经猜出来join方法的功能是什么了.对,join方法的功能就是使异步执行的线程变成同步执行.也就是说,当调用线程实例的start方法后,这个方法会立即返回,如果在调用start方法后后需要使用一个由这个线程计算得到的值,就必须使用join方法.如果不使用join方法,就不能保证当执行到start方法后面的某条语句时,这个线程一定会执行完.而使用join方法后,直到这个线程退出,程序才会往下执行.下面的代码演示了join的用法.

《SQL初学者指南》——1.8 空值

1.8 空值 SQL初学者指南 表中每个单独列的另一个重要属性是,该列是否允许包含空值.空值表示某个特定的数据元素没有数据.按照字面意思解释就是没包含数据.空值不等同于空格或空白.从逻辑上讲,空值和空格要区分对待.在第8章中,我们会详细介绍如何检索包含空值的数据. 许多SQL数据库在显示带有空值的数据时,使用大写的单词NULL来表示.这么做是要让用户能够识别它包含的是一个空值,而不是一个空格.我也会遵循这个惯例,在书中用NULL来强调它表示一个特殊类型的值. 数据库的主键不能包含NULL值.这是

【初学者指南】在ASP.NET MVC 5中创建GridView

介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样.服务器端和客户端有许多可用的第三方库,这些库能够提供所有必需的功能,如 Web 表格中的搜索.排序和分页等.是否包含这些功能,取决于应用的特殊需求,例如在客户端和服务器端提供搜索或其它功能的需求等. 可用的库 以下是一些可用的库和插件: Grid.Mvc MVCGrid.NET PagedList.MVC JQuery.Grid JQuer

《SQL初学者指南》——1.7 数据类型

1.7 数据类型 SQL初学者指南主键和外键为数据库表添加了结构.它们确保了数据库中所有的表都是可访问的,表之间有正确的关联.表中的每一列的另一个重要属性是数据类型. 数据类型是定义一个列所能包含数据的类型的一种方法.要为每个表中的每一列都指定一个数据类型.遗憾的是,各种关系型数据库所允许的数据类型和它们所代表的含义,有很大的不同.例如,Microsoft SQL Server.MySQL和Oracle,各自都有超过30种不同的可用数据类型. 即使只有3种数据库,我们都不可能去介绍每种可用的数据

《SQL初学者指南》——1.5 关系型数据库

1.5 关系型数据库 SQL初学者指南我们来了解一下关系型数据库的基础知识以及它们是如何工作的. 基本上,关系型数据库就是一个数据集合,它保存了许多个表.术语"关系(relational)"用来表示各表彼此相互关联.例如,我们来看数据库的一个简单示例,它只有两个表:Customers表和Orders表.Customers表为每位下订单的客户保存一条记录.Orders表针对每个订单保存一条记录.每个表可以包含任意多个字段,字段用来存储与每条记录相关的不同属性.例如,Customers表可

HTML 初学者指南(9)

初学 指明一个到QuickTime 电影的链接. 一些通常的文件类型和其扩展名为: 文件类型 扩展名 纯文本plain text .txt HTML 文档 .html GIF 图象 .gif TIFF 图象 .tiff X 位图图象 .xbm JPEG 图象 .jpg 或 .jpeg PostScript 文件 .ps AIFF 声音文件 .aiff AU 声音文件 .au WAV 声音文件 .wav QuickTime 电影 .mov MPEG 电影 .mpeg 或 .mpg 记住你假设的读者

HTML 初学者指南(7)

初学 URLsWorld Wide Web 使用标准资源定位 Uniform Resource Locators (URLs) 指明其它服务器中的文件. 一个 URL 包括访问资源的类型(例如, Web, gopher, WAIS), 服务器的地址, 和文件的位置. 语法格式为: scheme://host.domain [:port]/path/ filename 其中 scheme 是以下的一个 file 本地系统的一个文件 ftp 匿名FTP 服务器中的文件 http World Wide