分享
 
 
 

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

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有