`
cakin24
  • 浏览: 1384090 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

DOM对象的层次

阅读更多
一 介绍
文档对象模型采用的分层结构为树形结构,以树节点的方式表示文档中的各种内容。先以一个简单的HTML文档说明一下。
 
二 代码
<html >
<head>
<title>标题内容</title>
</head>
<body>
<h3>三号标题</h3>
<b>加粗内容</b>
</body>
</html>
 
 
三 运行结果

三号标题

加粗内容 
四 文档的层次结构


 
 
五 概念介绍
1、根节点
在最顶层的<html>节点,称为根节点。
2、父节点
一个节点之上的节点是该节点的父节点(parent)。例如,<html>是<head>和<body>的父节点,<head>是<title>的父节点。
3、子节点
位于一个节点之下的节点就是该节点的子节点。例如,<head>和<body>是<html>的子节点,<title>是<head>的子节点。
4、兄弟节点
如果多个节点在同一个层次,并拥有着相同的父节点,这几个节点就是兄弟节点(sibling)。例如,<head>和<body>是兄弟节点,<h3>和<b>也是兄弟节点。
5、后代
一个节点的子节点的结合可以称为是该节点的后代(descendant)。例如,<head>和<body>是<html>的后代,<h3>和<b>是<body>的后代。
6、叶子节点
在树形结构最底部的节点称为叶子节点。例如,“标题内容”、“3号标题”和“加粗内容”都是叶子节点。
 
六、文档对象模型中节点的3种类型
元素节点:在HTML中,<body>、<p>、<a>等一系列标记,是这个文档的元素节点。元素节点组成了文档对象模型的语义逻辑结构。 
文本节点:包含在元素节点中的内容部分,如<p>标签中的文本等等。一般情况下,不为空的文本节点都是可见并呈现于浏览器中的。 
属性节点:元素节点的属性,如<a>标签的href属性与title属性等等。一般情况下,大部分属性节点都是隐藏在浏览器背后,并且是不可见的。属性节点总是被包含于元素节点当中。
  • 大小: 14.8 KB
1
0
分享到:
评论

相关推荐

    DOM - 学习笔记

    DOM对象层次结构复杂,但有组织性。最顶层的对象是Window,它代表整个浏览器窗口,包含了一系列子对象,如location(表示当前URL)、document(表示整个HTML文档)等。document对象下又包含了一系列子对象,如body...

    javascript 原生Dom对象和jQuery对象的联系和区别

    JavaScript中的DOM对象和jQuery对象是两种不同的数据结构,它们在处理网页元素时有着各自的特性和优缺点。了解它们之间的联系和区别对于JavaScript开发者来说至关重要,因为这有助于选择合适的工具进行网页交互。 ...

    什么是DOM对象?.docx

    DOM 对象的概念和结构 DOM 对象的定义和概念 DOM 全称 Document Object Model(文档对象模型),是由 W3C 组织定义的一个标准。在前端开发时,我们往往需要在页面某个地方添加一个元素或者删除元素,这种添加元素...

    DOM对象模型

    **DOM对象模型** DOM,全称为“Document Object Model”,即文档对象模型,是W3C组织定义的一个标准,用于表示HTML或XML文档的一种结构化表示方式。它将文档解析为一个由节点组成的树形结构,使得JavaScript或其他...

    XMLDOM对象方法手册

    这个"XMLDOM对象方法手册"很可能包含了关于如何使用XMLDOM对象来操作XML文档的各种方法和属性的详细说明。 在XMLDOM中,有若干关键对象,如Document对象、Node对象、Element对象等,它们构成了一个层次结构,代表了...

    DOM文档对象中文手册

    **DOM的层次与选择器API** CSS选择器在DOM中也有体现,`querySelector`和`querySelectorAll`方法可以根据CSS选择器查找元素。`querySelector`返回匹配的第一个元素,`querySelectorAll`则返回一个包含所有匹配元素...

    DOM对象的深入学习

    DOM对象分为不同的层次,包括Document对象、Element对象、Attribute对象和TextNode对象等。 1. **Document对象**: - `close()`:关闭由`document.open()`打开的输出流。 - `getElementById()`:返回具有特定ID的...

    Dom文档层次模型——javascript高阶进阶

    javascript中的高阶部分,是window对象的使用,而windows对象使用与Dom密切相关,了解它的层次模型显得很重要

    c#操作浏览器dom对象

    综上所述,学习C#操作浏览器DOM对象涉及多个层次的知识,从理解DOM的概念到熟悉使用自动化工具和库,以及如何与JavaScript和网页交互。实践中,开发者需要具备一定的HTML和CSS理解能力,以及对异步编程和错误处理的...

    DOM文档对象中文手册.zip

    **DOM的层次结构** 在DOM中,每个文档被看作一棵树,其中根节点代表整个文档。树中的每个节点都有子节点、父节点和兄弟节点。元素节点是最常见的类型,它们包含了属性节点和文本节点。属性节点描述元素的特性,而...

    DOM对象中的节点操作.pdf

    总结来说,DOM对象中的节点操作是Web开发中的基础和核心,它包括了节点的概念理解、节点类型和属性的掌握、以及对节点进行增删改查等实际操作的能力。通过深入学习和实践DOM节点操作,开发者可以有效地控制Web文档,...

    Jquery对象和Dom对象的区别分析

    DOM表示由节点和对象层次结构组成的文档,这使得程序和脚本能够动态地访问和更新文档的内容、结构以及样式。 1. jQuery对象与DOM对象的基本概念 首先,DOM对象是指直接通过原生JavaScript获取的节点对象,例如使用...

    第三章:javascript-DOM对象模型-补充课件.ppt

    JavaScript DOM对象模型是Web开发中不可或缺的一部分,它允许开发者通过编程方式操纵网页的结构、内容和样式。在JavaScript中,DOM被用作一种接口,使我们能够读取、修改、添加或删除HTML、XML文档的各个部分。DOM将...

    DOM 文档对象模型

    ### DOM (文档对象模型)详解 #### 一、DOM 的概念与作用 DOM,全称为 Document Object Model(文档对象模型),是一种被广泛应用于处理 XML 和 HTML 文档的标准接口。它由 W3C(World Wide Web Consortium)制定并...

    Javascript考试题目选择题.docx

    DOM对象层次 - **History对象**: 用于处理浏览器的历史记录。 - **Document对象**: 表示整个HTML文档。 - **Button对象**: 表示HTML中的按钮元素。 - **Text对象**: 表示HTML中的文本节点。 ### 操作HTML文档对象...

    DOM文档对象中文手册(chm).rar

    - **树状结构**: 文档中的所有节点形成一个层次结构,类似于一棵倒置的树,称为DOM树。 - **根节点(Root Node)**: 文档的顶级节点,通常是`&lt;html&gt;`元素。 - **元素节点(Element Node)**: 表示HTML或XML元素,...

    JavaScrip文档对象模型(DOM).

    在这个树状结构中,每个HTML标签都会被转换成一个节点对象,而这些节点对象又构成了一个层次化的结构。例如,在一个简单的HTML文档中,`&lt;html&gt;`标签是根节点,其下有`&lt;head&gt;`和`&lt;body&gt;`两个子节点,它们之间是同级...

    dom动态生成使用XML DOM生成XML.pdf

    **XMLDOMDocument** 对象代表了XML DOM层次结构中的顶层节点,它是构建和操作XML结构的基础。通过以下命令可以创建一个XMLDOMDocument对象实例: ```vb Set objXMLDoc = CreateObject("Microsoft.XMLDOM") ``` ...

Global site tag (gtag.js) - Google Analytics