轻松学习JavaScript十八:JavaScript之DOM简介

页面导航:首页 > 网络编程 > JavaScript > 轻松学习JavaScript十八:JavaScript之DOM简介

轻松学习JavaScript十八:JavaScript之DOM简介

来源: 作者: 时间:2016-01-19 18:32 【

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。DOM描绘了一个层次化的节点树,运行开发人员添加,移除和修改页面的某一部
一DOM概述

DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。

DOM描绘了一个层次化的节点树,运行开发人员添加,移除和修改页面的某一部分。HTML或XML页面的每个部分都

是一个节点的衍生物。通过DOM,可访问HTML文档的所有元素。当网页被加载时,浏览器会创建页面的文档对象模

型,DOM模型被构造为对象的树。

DOM是W3C(万维网联盟)的标准。DOM定义了访问HTML和XML文档的标准。“W3C 文档对象模型(DOM)是中立

于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

1核心 DOM - 针对任何结构化文档的标准模型

2XML DOM - 针对 XML 文档的标准模型

3HTML DOM - 针对 HTML 文档的标准模型

二DOM节点树与节点

(1)DOM节点

在DOM中,所有事物都是节点。DOM是被视为节点树的HTML。HTML文档中的所有内容都是节点:整个文档是

一个文档节点;每个HTML元素是元素节点;HTML元素内的文本是文本节点;每个HTML属性是属性节点;注释是注

释节点。那么从实际出发看看:

 

 
块级元素
 

 

\

(2)节点父,子和同胞

节点树中的节点彼此拥有层级关系。父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子

节点。同级的子节点被称为同胞(兄弟或姐妹)。

1在节点树中,顶端节点被称为根(root)

2每个节点都有父节点、除了根(它没有父节点)

3一个节点可拥有任意数量的子

4同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分,以及节点之间的关系:

\

(3)节点树

看下面的代码组成的DOM树:


一级标题

从上面的HTML中:

 

节点没有父节点;它是根节点

 

和的父节点是节点

文本节点 "一级标题" 的父节点是

节点

 

并且:

 

节点拥有两个子节点:节点和节点

 

节点拥有一个子节点: 节点

 

 

 

 

元素是元素的首个子节点

 

元素的最后一个子节点

 

 
















 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<