- 1、本文档共18页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
1
文档对象模型
Part
◎ 初识文档对象模型
◎ DOM对象节点类型
◎ DOM对象节点的基本操作
◎ DOM对象节点的创建与修改
1 初识文档对象模型
DOM(Document Object Model)是文档对象模型的缩写。DOM 是这样规定的:
整个文档是一个文档节点 ;
每个 HTML 标签是一个元素节点 ;
包含在 HTML 元素中的文本是文本节点 ;
每一个 HTML 属性是一个属性节点 ;
注释属于注释节点。
1 初识文档对象模型
举例演示
【实例10-23】HTML代码结构来感性的认识一下DOM对象的树结构。
2 DOM对象节点类型
最常用的节点类型
节点类型
返回值
节点含义
节点用途
Doucument
9
文档节点
它是HTML文档的父节点,也是整个DOM文档的根节点
Element
1
元素节点
可以作为非终端节点,可以有自己的属性节点
Attr
2
属性节点
不能成为独立节点,必须以元素节点成为父节点
Text
3
文本节点
可以成为独立的终端节点,没有子节点、没有属性节点
Comment
8
注释节点
用来说明HTML是什么版本,或者注释
1.元素节点(element node)
元素节点(element node)是构建DOM树形结构的基础,可以作为非终端节点,可以有自己的属性节点、下级元素节点和下级文本节点,下级元素节点实现了DOM树纵向扩展,同级元素节点实现了DOM树横向扩展。元素节点在没有如何任何节点的情况下它就是终端节点。元素节点的节点类型号为1。
2.属性节点(attribute node)
属性节点(attribute node)是一个键值对,键是属性名,值是属性值,属性节点不能成为独立节点,它必须从属于元素节点,用来描述元素节点的属性,充实元素节点的内容,因此,可以说属性节点不是节点,在DOM的操作中使用的方法也与其他节点不同。属性节点的节点类型号为2。
3.文本节点(text node)
文本节点(text node)表示一段文本,只能作为独立的终端节点,没有子节点和属性节点。文本节点的节点类型号为3。
4.注释节点(text node)
注释节点是用来说明所用的XHTML或者HTML是什么版本,或用来添加注释文本的。
!DOCTYPE html这些代码称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明所用的XHTML或者HTML是什么版本。
!--注释文本--表示一段注释。
以上两个例子有个共同的特点就是都带有感叹号“!”。注释节点的节点类型号为8。
3 DOM对象节点的基本操作
DOM对象的访问是操作DOM节点的先决条件。
1.访问子节点
childNodes属性, 返回包含文本节点及标签节点的子节点集合,文本节点和属性节点的childNodes永远是null。利用childNodes.length可以获得子节点的数目,通过循环与索引查找节点。在nodeList集合中每一个数组元素都是一个节点对象,这些节点对象都有nodeType、nodeName、nodeValue等常见属性。
举例演示
【实例10-23】输出超链接中的文本节点的值。
2. 访问父节点
parentNode()方法与parentElement()方法返回唯一的父节点,父节点不存在时返回null。这两个方法完全等价,因为只有Element节点才能作为父节点。node.parentElement() 返回node节点的父节点。DOM顶层节点是document内置对象,document.parentNode()返回null。
如果,将“实例10-23”中的“alert(node.nodeValue);”修改为:
alert(node.parentNode.parentNode.nodeName);
则会连续返回两个“li”元素,因为文本节点的父节点是A,而A的父节点是li元素。
3. firstChild和lastChild节点
firstChild属性返回第一个子节点,firstChild与childNodes[0] 等价。
lastChild属性返回最后一个子节点,lastChild与childNodes[childNodes.length-1] 等价。
4. firstChild和lastChild节点
nextSibling属性返回同级的下一个节点,最后一个节点的nextSibling属性为null;
previousSibling属性返回同级的上一个节点,第一个节点的previousSibling属性为null。
4 DOM对象节点的创建与修改
1.创建节点
通过document内置对象(也是DOM顶层对象)的方法创建不同类型DOM节点对象。针对前面介绍的最
您可能关注的文档
- 网络设备配置与管理 任务2 控制子网间的访问 电子课件(8).ppt
- 网络渗透与防护 课后思考 端口扫描-隐蔽扫描-ppt(PPT).pptx
- 网络渗透与防护 课前预习 口令攻防-身份认证概述-ppt(PPT).pptx
- 网络渗透与防护 课中学习 Web渗透-Web威胁-ppt(PPT).pptx
- 网络渗透与防护 课中学习 口令攻防-wifi的wep破解-ppt(PPT).pptx
- 网络渗透与防护 课中学习 网络踩点-域名查询-ppt(PPT).pptx
- 网络渗透与防护 课中学习 协议漏洞-arp欺骗原理-ppt(PPT).pptx
- 网络渗透与防护 课中学习 协议漏洞-DNS原理-ppt(PPT).pptx
- 网络渗透与防护 课中学习 协议漏洞-wireshark-ppt(PPT).pptx
- 网络推广-2020 社群 5.社群名词解读之人工智能.pptx
- 网页设计与制作(HTML+CSS+JS)-3期(KC003) transition-property与transition-duration属性 9-13 transition-property与transition-duration属性.pptx
- 网页设计与制作(HTML+CSS+JS)-3期(KC003) 浮动属性应用 3元素的浮动与定位.pptx
- 维修电工实训 3.4.1 M7120平面磨床线路检修 机床故障检修-M7120平面磨床.pptx
- 维修电工实训 3.4.2 Z3040B摇臂钻床线路检修 机床故障检修-Z3040B摇臂钻床.pptx
- 纹样图案设计 对称与均衡 第4章第2节任务二.对称与均衡.pptx
- 纹样图案设计 风格特色对图案构思的要求 第3章第2节任务三.风格特色对图案构思的要求.ppt
- 纹样图案设计 条理与反复 第4章第2节任务三.条理与反复.pptx
- 纹样图案设计 图案的结构特点 第3章第3节任务四.图案的结构特点.ppt
- 纹样图案设计 图案在纺织品上的运用部位对构思的影响 第3章第2节任务二.图案在纺织品上运用部位对构思的影响.ppt
- 细胞培养技术及医学应用 4.常用的细胞培养基 常用的细胞培养基.ppt
最近下载
- 二年级数学下册第一单元《野营有余数的除法》单元备课教案青岛版六三制(全汇总版).doc
- BL-420生物机能实验系统用户手册详解.doc
- 备战2025年高考二轮复习语文课件:散文阅读-词句理解与要点概括.ppt VIP
- 二元期权实盘交易入门宝典案例实例.pptx
- 2025版虚拟现实游戏开发与发行合作协议.docx VIP
- 无人机组装调试与检修 第三章 多旋翼无人机系统组装.ppt
- 课题申报参考:数智时代高校辅导员政治引领力的提升路径研究.docx VIP
- 久谦-碧迪医疗中国竞对渠道战略深度研究-Final report V3.0-20120531.pptx VIP
- 《猜字谜》PPT下载1(共57张PPT).ppt
- 考研复试英语宝典.pdf
文档评论(0)