2023学年完整公开课版DOM树_第1页
2023学年完整公开课版DOM树_第2页
2023学年完整公开课版DOM树_第3页
2023学年完整公开课版DOM树_第4页
2023学年完整公开课版DOM树_第5页
已阅读5页，还剩5页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

DOM树1.认识DOM树

2.了解家族族谱

3.掌握组织的结构层次

4.了解DOM的一个示例

众所周之，HTML文档的主干就是标记（也就是大家熟悉的HTML标签元素）。1、DOM树根据文档对象模型（即：DOM），每个HTML标签事实上都是一个对象。嵌套的标签被称为之元素（或子标签）。除此之外，标签内的文本也是一个对象。而这些对象都可以使用JavaScript访问。

想象一棵与所有世代有关系的家庭树（大家熟知的族谱），其包括了：祖父母、父母、孩子、兄弟姐妹等等。我们通常以等级的方式组织豪庭树（族谱）。2、家族族谱左图是一个家族族谱的图。其中Tossico、Akikazu、Hitomi和Takemi是祖父母。而Toshiaki和juliana是父母。另外TK、Yuji、Bruno和Kaio是父母的孩子（其实也是我的兄弟姐妹们）

除了家族族谱之外，生活中还有另一个示例，那就是一个组织的结构层次，比如3、结构层次

而在HTML中，DOM其实也类似一棵树的，它和前面所举例的家族族谱，组织机构图是类似的，HTML中DOM就是一棵树。3、结构层次

我们来看一个DOM的示例，比如下面这样的一个HTML文档：4、DOM的一个示例

<preclass=""style="margin:0px;padding:0.5em;max-width:100%;box-sizing:inherit;word-wrap:break-word!important;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:0.544px;orphans:2;text-align:justify;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;text-decoration-style:initial;text-decoration-color:initial;overflow:auto;font-family:monospace,monospace;font-size:14px;background-color:rgb(0,43,54);color:rgb(131,148,150);"><!DOCTYPEHTML><html>

<head>

<title>Aboutelks</title>

</head>

<body>

Thetruthaboutelks.

</body></html></pre> DOM将HMTML表示为标记的树结构（也就是大家所说的DOM树），就如下面这样的样子：4、DOM的一个示例

HTML的标签被称为元素（element）节点（或只是元素）。嵌套标签成为一个子元素（也被称为子）。因此，对于一个HTML文档而言，<html>是一个根节点（也被称为根元素）,然后<head>和<body>是<html>的子元素。元素内的文本被称这文本节点，标记为#text。文本节点仅包含一个字符串。它可能没有子元素，也就是说它永远只是

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论