HTML文档对象模型(DOM)
HTMLDOM对象的属性和方法介绍
HTMLDOM对象的属性和⽅法介绍HTML DOM对象的属性和⽅法介绍DOM 是 Document Object Model（⽂档对象模型）的缩写。
DOM（⽂档对象模型）是针对HTML和XML⽂档的⼀个API（应⽤程序编程接⼝），它允许程序和脚本动态地访问和更新⽂档的内容，结构和样式。
W3C DOM 标准被分为 3 个不同的部分：核⼼ DOM - 针对任何结构化⽂档的标准模型XML DOM - 针对 XML ⽂档的标准模型HTML DOM - 针对 HTML ⽂档的标准模型HTML DOM 定义了所有 HTML 元素对象的属性，以及访问它们的⽅法，我们可以通过 Javascript 获取，修改，添加和删除 HTML 元素。
HTML DOM 对象有⼏种类型：1.Document 类型在浏览器中，Document 对象表⽰整个 HTML ⽂档。
1.1属性引⽤⽂档的⼦节点documentElementvar html = document.documentElement; //取得对<html>元素的引⽤bodyvar body = document.body; //取得对<body>元素的引⽤获取⽂档信息title通过 title 属性可以访问当前⽂档的标题，也可以修改当前⽂档的标题。
var originalTitle = document.title; //返回当前⽂档的标题document.title = "New title"; //修改当前⽂档的标题URL该属性返回当前页⾯完整的 URL，也就是浏览器地址栏中的全部地址信息。
⽐如我打开了⼀个页⾯，浏览器地址栏中的信息显⽰如下：/cqhaibin/p/6291640.html这些信息就是当前⽂档完整的 URL。
var url = document.URL;//返回当前⽂档完整的URLdomain该属性返回当前⽂档的服务器域名。
什么是DOM及DOM操作？
什么是DOM及DOM操作？什么是 DOM ?DOM(⽂档对象模型)是针对于xml但是扩展⽤于html的应⽤程序编程接⼝，定义了访问和操作html的⽂档的标准。
W3C⽂档对象模型是中⽴于平台和语⾔之间的接⼝，它允许程序和脚本动态的访问和更新⽂档的内容、结构、样式。
总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。
DOM 分层节点DOM的分层节点⼀般被称作是DOM树，树中的所有节点都可以通过脚本语⾔例如js进⾏访问，所有HTMlL元素节点都可以被创建、添加或者删除。
在DOM分层节点中，页⾯就是⽤分层节点图表⽰的。
整个⽂档是⼀个⽂档节点，就想是树的根⼀样。
每个HTML元素都是元素节点。
HTML元素内的⽂本就是⽂本节点。
每个HTML属性时属性节点。
当咱们访问⼀个web页⾯时，浏览器会解析每个HTML元素，创建了HTML⽂档的虚拟结构，并将其保存在内存中。
接着，HTML页⾯被转换成树状结构，每个HTML元素成为⼀个叶⼦节点，连接到⽗分⽀。
考虑以下 Html 结构：<!DOCTYPE html><html lang="en"><head><title>A super simple title!</title></head><body><h1>A super simple web page!</h1></body></html>在这个结构的顶部有⼀个document，也称为根元素，它包含另⼀个元素：html。
html元素包含⼀个head，⽽ head ⼜有⼀个title。
然后body 包含⼀个h1。
每个HTML元素都由特定类型（也称为接⼝）表⽰，并且可能包含⽂本或其他嵌套元素：document (HTMLDocument)|| --> html (HTMLHtmlElement)|| --> head (HtmlHeadElement)| || | --> title (HtmlTitleElement)| | --> text: "A super simple title!"|| --> body (HtmlBodyElement)| || | --> h1 (HTMLHeadingElement)| | --> text: "A super simple web page!"每个HTML元素都来⾃Element，但其中很⼤⼀部分都是专⽤的。
DOM模型
使用DOM实现
实行添加一个图片、替换一个图片的功能
提示：使用document对象的创建结点的方法
删除一个DOM节点
删除一个DOM节点
删除一个元素节点、文本节点
通过父节点删除本节点： myParent.removeChild( mySelfNode ) 通过自己删除本节点： mySelfNode.parentNode.removeChild( mySelfNode )
node.firstChild、stChild
通过子节点获得父节点：node.parentNode
获得实例代码
重新做Demo4-5-1.html
使用DOM实现
分别通过id属性、<img />标签名取得图片元素 结点
把生成的节点作为某一个节点（node）的子节点
作为node节点的最后一个子节点： node.appendChild( newNode ) 插入到node节点中某一子节点之前： node.insertBefore( newNode, oldNode )
实例代码
动手做Demo4-5-2.html
DOM的应用十分广泛，各种网页特效均有DOM的 踪影
本节内容
DOM简介 DOM树和DOM节点 访问DOM节点 动态修改DOM节点 DOM节点的innerHTML属性
DOM树
DOM树
DOM将HTML文档抽象为树形结构，称这棵树为DOM树 HTML中的每一项内容都可以在DOM树中找到 DOM的核心就是对DOM树的操作，即增加、删除、修 改DOM树中的内容
删除一个属性节点：node.attrName
=
‘’;
修改一个DOM节点
dom名词解释
dom名词解释
DOM（Document Object Model）是指文档对象模型，它是一种用于表示和操作HTML、XML等文档的标准编程接口。
DOM可以将整个文档看作是一个树形结构，每个节点都是一个对象，通过操作这些节点对象可以实现对文档内容的修改和交互。
在DOM中，每个节点都有一个父节点和零个或多个子节点。
节点分为元素节点、属性节点、文本节点等不同类型。
元素节点是指HTML 中的标签，属性节点则是标签中的属性，而文本节点则是标签中的纯文本内容。
通过DOM提供的API，我们可以访问和修改文档中的任何元素、属性或者文本内容。
例如，我们可以使用getElementById方法获取页面中某个元素的引用，并对其进行样式或内容上的修改。
另外，DOM 还提供了事件处理机制，允许我们在用户与页面进行交互时执行相应的操作。
总之，DOM为开发者提供了一种方便而强大的方式来操纵网页内容。
无论是创建动态效果还是实现复杂交互逻辑，都需要使用到DOM这一重要工具。
dom的提取方法
dom的提取方法一、DOM是什么？1.1 DOM的概念。
DOM啊，就是文档对象模型（Document Object Model）的简称。
这就好比是网页的一个大地图，把网页里的各种元素，像文字、图片、链接这些啊，都当作一个个小物件放在这个地图里，每个小物件都能被找到、被操作。
它是一种让我们可以通过脚本语言（像JavaScript）来和网页交互的接口。
比如说，你看到一个网页上有个按钮，你想让这个按钮在被点击的时候变色，那就要靠DOM来找到这个按钮元素，然后对它进行操作。
1.2 DOM的重要性。
这DOM的重要性可大了去了。
它就像一把万能钥匙，能打开网页里各个元素的大门。
没有它，网页就像是一个封闭的城堡，我们只能看，不能做任何改变。
对于开发者来说，DOM就是他们施展魔法的魔杖。
就像“巧妇难为无米之炊”，没有DOM，再厉害的开发者也没法让网页变得更加生动、交互性更强。
二、DOM的提取方法。
2.1 通过标签名提取。
最常见的一种方法就是通过标签名来提取DOM元素。
比如说，网页里有好多段落（<p>标签），你想把这些段落都找出来。
那就可以使用像JavaScript里的document.getElementsByTagName('p')这样的方法。
这就像是在一群人里按照衣服颜色（这里就是标签名）来找人一样。
一下子就能把所有穿同样颜色衣服（相同标签名）的人（元素）都找出来。
不过呢，这种方法有时候可能会找出来太多元素，就像一网下去捞了好多鱼，有些可能不是你想要的。
2.2 通过类名提取。
还有一种办法是通过类名来提取。
如果网页里有些元素被设置了特定的类名，那我们就可以用这个类名来找到它们。
就好比在一个班级里，你要找那些戴眼镜的同学（这里戴眼镜就相当于类名）。
在JavaScript里可以用document.getElementsByClassName('类名')。
但是要注意哦，一个类名可能被多个元素使用，就像可能有好几个同学都戴眼镜，所以得到的结果可能是一个元素集合。
DOM基本介绍
DOM基本介绍9-1 DOM基本介绍9-1-1什么是DOM⾸先，我们需要介绍什么是DOM。
DOM的英语全称为Document Object Model,翻译成中⽂就是⽂档对象模型。
也就是说，将整个⽂档看作是⼀个对象。
⽽⼀个⽂档⼜是由很多节点组成的，那么这些节点也可以被看作是⼀个个的对象。
DOM⾥⾯的对象属于宿主对象，需要浏览器来作为宿主。
⼀旦离开了浏览器这个环境，那么该对象将不复存在。
同样，上⼀章我们所介绍的 BOM也是如此，需要浏览器来作为宿主，所以它也是⼀个宿主对象。
DOM的作⽤如下：·浏览器提供的操纵HTML⽂档内容的应⽤程序接⼝·⽤于对⽂档进⾏动态操作，如增加⽂档内容，删除⽂档内容，修改⽂档内容等等9-1-2 DOM 历史在介绍了什么是DOM之后，接下来我们来看⼀下DOM的⼀个发展史。
⽽⼀说到DOM的发展史，那就不得不介绍DOM的级别。
这⾥我们对DOM的级别来进⾏⼀个简单的介绍，如下：DOM Level 0：⾸先，我们需要确定的是在DOM标准中并没有DOM0级这个级别。
所谓的DOM0级是DOM历史坐标中的⼀个参照点⽽已，怎么说呢，DOM0级指的是IE4和N etscape 4.0这些浏览器最初⽀持的DOM相关⽅法。
主要关注于常见的页⾯元素，⽐如图像，链接和表单。
有些现在图像和表单的那些⽅法，⽬前依然可以被⽤在当前版本的DOM中。
DOM Level 1：于1998年10⽉成为W3C的推荐标准。
DOM1级由两个模块组成：DOM核⼼ (DOM Core)和DOM HTML。
这个版本引⼊了⽹页的完整模型，允许在⽹页的每个部分进⾏导航。
DOM Level 2：对DOM level 1 做了扩展，于20001年出版，引⼊了流⾏的 getElementById()⽅法，让访问⽹页上的特定元素变得更加容易。
DOM Level 3：对DOM level 2做了进⼀步的扩展，于2004年出版。
JavaScript中的DOM操作和事件处理
JavaScript中的DOM操作和事件处理DOM操作和事件处理是JavaScript编程中非常重要的部分。
DOM （文档对象模型）是指将HTML文档转换成对象模型，通过JavaScript 代码来操作这些对象，实现动态的网页功能。
一、DOM操作1.获取元素：通过getElementById、getElementsByClassName、getElementsByTagName等方法获取页面上的元素。
例如：```var element = document.getElementById("myElement");```2.创建元素：通过createElement方法来创建新的元素，可以指定标签名称，然后可以添加到文档中。
```var newElement = document.createElement("div");```3.修改元素属性：可以使用DOM元素的属性来修改元素的各种属性，如id、class、style等。
```element.className = "new-class";element.style.color = "red";```4.修改元素内容：可以使用innerHTML属性来修改元素的显示内容。
```element.innerHTML = "新的内容";```5.添加子元素：可以使用appendChild方法将一个元素添加为另一个元素的子元素。
```parentElement.appendChild(childElement);```6.删除元素：可以使用removeChild方法将一个元素从文档中移除。
```parentElement.removeChild(childElement);```7.修改元素样式：可以使用style属性来修改元素的各种样式。
```element.style.color = "red";element.style.backgroundColor = "blue";```二、事件处理1.注册事件：使用addEventListener方法来注册事件，指定事件类型和对应的处理函数。
dom 的准则
dom 的准则DOM（文档对象模型）是一种用于表示和操作HTML、XML等文档的标准。
DOM提供了一种将文档解析为一个由节点和对象（包括元素、文本等）组成的树结构的方式，使得开发者可以通过对树中节点的操作来修改文档的结构、样式和内容。
DOM的设计准则之一是避免在文章中插入任何网络地址。
这是因为网络地址可能会包含不安全或不适当的内容，甚至可能导致恶意软件的传播。
因此，在使用DOM时，开发者应该遵循这一准则，避免在文章中插入任何网络地址，以确保文档的安全性和可靠性。
另一个准则是文章中不得包含数学公式或计算公式。
这是因为数学公式和计算公式可能难以理解和解释，会给读者带来困扰。
在使用DOM时，开发者应该避免使用数学公式和计算公式，而是使用简洁明了的语言来表达思想和观点，以提高文章的可读性和可理解性。
确保文章内容的独一性也是DOM的重要准则之一。
重复出现的内容会让读者感到枯燥和无聊，降低文章的吸引力。
在使用DOM时，开发者应该确保文章内容的独一性，避免重复出现相同的观点和表述，以保持文章的新鲜感和吸引力。
文本的结构合理和段落明晰也是DOM的准则之一。
通过合理的结构和明晰的段落，可以使文章更易于阅读和理解。
在使用DOM时，开发者应该合理划分文章的结构，使用适当的标题来引导读者，以增强阅读流畅性和理解度。
避免使用依赖图像的语句也是DOM的准则之一。
图像是一种视觉信息，对于一些视觉障碍的读者来说可能无法理解和解释。
在使用DOM时，开发者应该避免使用依赖图像的语句，而是使用简洁明了的语言来表达思想和观点，以提高文章的可读性和可理解性。
不得在文章中反复提出同一个问题也是DOM的准则之一。
重复的问题会让读者感到烦躁和无聊，降低文章的吸引力。
在使用DOM 时，开发者应该避免在文章中反复提出同一个问题，而是使用简洁明了的语言来表达观点和解决问题，以保持文章的新鲜感和吸引力。
文章应刻画明确，句式流畅，并使用丰富多样的词汇来表达。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
结束
8.1 文档对象模型概述
1．浏览器对DOM标准的支持 2．树形结构表示文档
8.2 DOM核心接口
1．Node接口 2．Document接口 3．Element接口 4．Attr接口 5．CharacterData接口 6．Text接口 7．Common接口 8．接口定义的其他功能，以及其他DOM核心接口
8.3 DOM HTML
【课堂案例8-18】：验证表单数据 【课堂案例8-19】：为所有段落加边框 【课堂案例8-20】：选项卡效果 【课堂案例8-21】：Web相册 【课堂案例8-22】：修改网页背景色 【课堂案例8-24】：覆盖显示图片 【课堂案例8-25】：在网页中绘图 【课堂案例8-26】：在网页中绘图
8.3 DOM HTML
1．HTMLDocument接口 2．HTMLElement接口
8.3 DOM HTML
【课堂案例8-9】：获取文档信息 【课堂案例8-10】：修改文档中的链接 【课堂案例8-11】：操作文档中的表格 【课堂案例8-12】：获取文本框中用户输入的内容 【课堂案例8-13】：获取单选框用户选择的内容 【课堂案例8-14】：获取复选框用户选择的内容 【课堂案例8-15】：控制下拉菜单 【课堂案例8-16】：判断用户选取的文件类型 【课堂案例8-17】：限制用户使用表单元素
8.2 DOM核心接口
【课堂案例8-1】：获取DOM树中的节点信息 【课堂案例8-2】：删除DOM树中的节点 【课堂案例8-3】：在DOM树中添加子节点 【课堂案例8-4】：替换DOM树中的节点 【课堂案例8-5】：复制DOM树中的节点 【课堂案例8-6】：获取节点的属性 【课堂案例8-7】：控制文本节点 【课堂案例8-8】：提取网页中的超链接地址
JAVASCRIPT程序设计基础与范例教程
第八章 HTML文档对象模型（DOM）
课堂学习目标
了解DOM的体系结构； 理解DOM文档树的构建； 理解DOM接口的作用； 掌握DOM核心接口的功能用法； 掌握HTML DOM接口的功能用法；
8.1 文档对象模型概述来自 DOM是W3C（万维网联盟）的标准，它定义了操作 HTML和XML文档的标准接口。DOM允许程序或脚本 动态地访问文档的内容、结构和样式。 DOM核心API：访问结构化文档的标准模型 XML DOM：访问XML文档的标准模型 HTML DOM：访问HTML文档的标准模型