网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-DOM的对象.pptx

DOM（DocumentObjectModel，文档对象模型）是W3C标准，定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。JavaScript对象模型DOM的对象

目录JavaScript对象模型9.1BOM的对象9.2DOM的对象9.3DOM与CSS习题9

9.2DOM的对象9.2.1节点和节点树1.节点DOM把HTML文档中的每一个元素都定义成一个一个的节点，整个HTML文档是一个文档节点，根元素html是根节点。每个HTML标签都是一个元素节点，包含在HTML标签中的文本内容是文本节点；HTML标签的每一个属性是一个属性节点。注释属于注释节点。

9.2DOM的对象2.节点树DOM对象被结构化为对象树，HTML文档的所有节点组成一个节点树，HTML文档中的每个元素、属性和文本内容等都代表树中的一个节点。例如，下面HTML文档，代码如下：!DOCTYPEhtml!--文档节点--html!--html是元素节点--head!--head是元素节点--metacharset=utf-8!--meta是元素节点，其中的charset是属性节点--title文档标题/title!--title是元素节点，其中的“文档标题”是文本节点--/headbody!--body是元素节点--ahref=#链接文字/a!--a是元素节点，其中的href是属性节点，“链接文字”是文本节点--h1标题1/h1!--h1是元素节点，其中的“标题1”是文本节点--p段落文本/p!--p是元素节点，其中的“段落文本”是文本节点--/body/html

9.2DOM的对象上面代码构成的节点树，如图所示。

9.2DOM的对象9.2.2DOM的操作由于HTML文档被浏览器解析后是一棵DOM树，是一个树形结构。要改变HTML的结构，就需要通过JavaScript来操作DOM。操作一个DOM节点就是以下几个操作：添加。删除。更新。遍历。

9.2DOM的对象9.2.3Node对象Node（节点）对象代表文档树中的一个节点，Node对象是整个DOM的核心对象。1.Node对象的属性每个节点都有其节点的属性，Node对象的常用属性见表。

9.2DOM的对象

9.2DOM的对象（1）nodeNamenodeName属性含有某个节点的名称，其中：1）元素节点的nodeName值是标签名称。2）属性节点的nodeName值是属性名称。3）文本节点的nodeName值永远是#text。4）文档节点的nodeName值永远是#document。

9.2DOM的对象（2）nodeValue对于文本节点，nodeValue属性包含文本内容。对于属性节点，nodeValue属性包含属性值。对于文档节点和元素节点，nodeValue属性不可用。

9.2DOM的对象（3）nodeTypenodeType属性返回节点的类型，其中最重要的节点类型见表。

9.2DOM的对象2.Node对象的方法Node对象的方法包含对节点的各种操作。

9.2DOM的对象9.2.4HTMLDOM对象HTMLDOM是HTML的标准对象模型和编程接口。它定义了：作为对象的HTML元素；所有HTML元素的属性；访问所有HTML元素的方法；所有HTML元素的事件。换言之，HTMLDOM是关于如何获取、更改、添加或删除HTML元素的标准。

9.2DOM的对象HTMLDOM独立于平台和编程语言，它可被任何编程语言（如Java、JavaScript和VBScript）使用。HTMLDOM对象见表。

9.2DOM的对象

9.2DOM的对象9.2.5HTMLDocument对象HTMLDocument对象表示HTML文档树的根，在BOM和HTMLDOM中被称为Document对象。每个载入浏览器的HTML文档都会成为Document对象。Document对象可以用脚本对HTML页面中的所有元素进行访问。

9.2DOM的对象1.HTMLDocument对象的集合HTMLDocument对象的常用集合见表。

9.2DOM的对象2.HTMLDocument对象的属性HTMLDocument对象的常用属性，见表。

9.2DOM的对象3.HTMLDocument对象的方法HTMLDocument对象的常用方法见表。

9.2DOM的对象9.2.6HTMLElement对象在HTMLDOM中，HTMLElemen