- 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
文档评论(0)