DOM
DOM基础
DOM的级别 DOM
Core和DOM DOM Level 1, 分成DOM Level 1 Core DOM Level 1 HTML DOM 2,分成DOM Level 2 Core Core、 DOM Level 2, DOM Views、 DOM Level 2 Views Events、 DOM Level 2 Events Style、 DOM Level 2 Style Specification、 DOM Level 2 Traversal and Range Specification DOM Level 2 HTML DOM Level 3,还没有哪个浏览器可以完全实现DOM Level 3 HTML规范 3, DOM HTML
DOM 冒泡事件流
DOM 捕获事件流
Q&A
Thank You !来自DOM 1 HTML方式的话 ，得到id属性的字符串的值
myElement.id
DOM 节点树
DHTML本质上就是DOM ，DOM DOM树 DOM DOM树可以由HTML DHTML DOM HTML 代码直接构建DOM DOM树，也可以通过js js构建DOM DOM树， DOM js DOM 如果没有脚本语言，DOM DOM树的修改只能通过修改 DOM HTML源代码进行 HTML
DOM CURD
脚本开发人员可以通过文档对象的属性、方法和事 件来掌控、操纵和创建动态的网页元素。每一个网 页元素（一个HTML HTML标签）都对应着一个对象。 HTML
DOM 节点信息
• nodeName • nodeValue • nodeType
元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 对于文本节点， 属性包含文本。 对于文本节点，nodeValue 属性包含文本。 对于属性节点， 属性包含属性值。 对于属性节点，nodeValue 属性包含属性值。 nodeValue 属性对于文档节点和元素节点是不可用的。 属性对于文档节点和元素节点是不可用的。
什么是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 分子组成
DOM，全称为溶解有机物，是水生生态系统中一种重要的化学组成部分。
它是由各种生物过程产生的复杂混合物，主要包括蛋白质、碳水化合物、脂肪酸、氨基酸等有机化合物。
DOM的分子组成相当复杂，且因来源和降解程度的不同而有所差异。
首先，蛋白质是DOM中重要的组成部分。
蛋白质由氨基酸通过肽键连接而成，而氨基酸的结构特点是至少含有一个氨基和一个羧基，并且它们都连接在同一个碳原子上。
这个碳原子还连接一个氢原子和一个侧链基团，这个侧链基团决定了氨基酸的种类。
在DOM中，蛋白质可能经过水解等过程，形成各种大小的肽段和游离的氨基酸。
其次，碳水化合物也是DOM的重要组成部分。
碳水化合物是由碳、氢、氧三种元素组成的，其中氢氧的比例通常为2:1，与水的比例一致，因此称为碳水化合物。
在DOM中，碳水化合物可能以单糖、寡糖和多糖的形式存在，它们是由糖苷键连接而成的。
此外，DOM中还含有各种脂肪酸和氨基酸等有机化合物。
这些化合物可能来自于生物的代谢过程，也可能来自于外界环境的输入。
它们在DOM中的存在形式和比例，受到许多因素的影响，如温度、pH值、氧化还原条件等。
总的来说，DOM的分子组成非常复杂，包括蛋白质、碳水化合物、脂肪酸、氨基酸等各种有机化合物。
这些化合物在DOM中的存在形式和比例，对于水生生态系统的物质循环和能量流动具有重要的影响。
因此，对DOM的分子组成进行深入的研究，有助于我们更好地理解水生生态系统的功能和过程。
DOM基础讲解
DOM基础学习要点：1.DOM 介绍2.查找元素3.DOM 节点4.节点操作DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。
DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。
DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。
一．DOM介绍DOM 中的三个字母，D（文档）可以理解为整个Web 加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。
DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为 W3C 标准。
DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera1.7+。
PS：IE 中的所有 DOM 对象都是以 COM 对象的形式实现的，这意味着 IE 中的 DOM 可能会和其他浏览器有一定的差异。
1.节点加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。
DOM将这种树型结构理解为由节点组成。
节点树从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。
head标签是html子标签，meta和title标签之间是兄弟关系。
如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。
PS：后面我们经常把标签称作为元素，是一个意思。
2.节点种类：元素节点、文本节点、属性节点。
<div title="属性节点">测试 Div</div>二．查找元素W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。
什么是DOM
什么是DOM？？？DOM 是Document Object Model的缩写，即文档对象模型！理解为一套浏览器解读和显示的标准！dom提供了很多标签和页面样式标准，一定的接口（方法）规定浏览器需要完成一定的操作，单单javascript只能组成一些算法，实际上没法操作页面！只有通过DOM对HTML 和XML文档进行读取，搜索，修改，添加和删除等操作来间接操作页面样式。
DOM是独立于语言和平台的一套标准接口，定义了构成DOM的不同对象，比恩没有提供特定的实现，可以用任何编程语言实现。
利用DOM中的对象，开发人员可以对HTML和XML文档进行读取，搜索，修改，添加和删除等操作。
W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。
从面向对象的角度看，可以把HTML文档和XML文档看成是一个对象。
一个XML文档对象可以包含其他的对象，如节点对象。
在DOM中有相应的对象来对应实际XML文档的对象。
DOM规范中提供了一组对象用来实现对文档结构的访问。
各种基于DOM规范的解析器必须按照DOM规范在内存中建立数据模型。
DOM规范的核心是树模型。
解析XML文件的解析器，通过读入XML文件在内存中建立一个树模型，（通过特定算法存储数据，也通过相应的算法操作数据）DOM是一组API接口，接口里面存放的不同类型的未实例化对象对应着XML文档中不同类型的节点和数据。
用编程语言实现这些接口，就可以通过对象来操作相应的XML文档。
DOM为一套规范（包括代码解析标准和代码组织标准）如：DOM文档：interface document{.//有很多方法，每个方法的实现文本也都给出来了}interface Node{}interface NodeList{}interfact NamedNodeMap{}interfact Element{}interfact Text{}通过每个接口的方法的实现来创建对象（这些对象也都已经定义好了）如通过document接口创建document对象，一个document对象其本质就是一个HMTL文档，即为一个htnl标记。
DOM详解——精选推荐
DOM详解⼀、简介DOM即（Document Object Model）：⽂档对象模型，⽤来将标记型⽂档封装成对象，并将标记型⽂档中的所有内容（标签、⽂本、属性等）都封装成对象。
即标记型⽂档的⼀种解析⽅式。
因为封装为对象就可以对其中的属性和⾏为进⾏调⽤，以便于对这些⽂档及⽂档中的内容进⾏更⽅便的操作。
DOM解析⽅式：将标记型⽂档解析为⼀颗dom树，⽽树中的内容都封装为节点对象。
按照标签的层次关系体现出标签的所属，形成⼀个树状结构。
所以我们将DOM解析⽂档形成的document对象称为dom树，⽽树中的标签以及⽂本甚⾄属性称为节点。
这个节点也称为对象。
标签通常也称为页⾯中的元素。
注意：这个DOM解析的好处是可以对树中的节点进⾏任意操作，如增删查改。
但也有弊端：这种解析需要将标记型⽂档加载进内存。
意味着如果⽂档体积很⼤时较为浪费空间。
⼆、另⼀种解析⽅式：SAX是由⼀些组织定义的⼀种民间常⽤的解析⽅式，并不是w3c标准，⽽DOM是w3c的标准。
SAX的解析⽅式：基于事件驱动的解析。
好处：获取数据的速度快。
弊端：不遵从增删查改操作。
三、DOM三种模型DOM level 1：将html⽂档封装成对象。
DOM level 2：在level1的基础上加⼊了新功能，⽐如解析名称空间。
DOM level 3：将xml⽂档封装成了对象。
四、DHTML:动态html不是⼀门语⾔，⽽是多项技术综合体的简称，这些技术包括HTML、CSS、DOM、JavaScript。
四种技术(语⾔)在动态html中扮演的⾓⾊：HTML:⽤标签封装数据。
即负责提供标签，对数据进⾏封装，⽬的是便于对该标签中的数据进⾏操作。
CSS：对数据样式进⾏定义。
即负责提供样式属性，对标签中的数据进⾏样式的定义。
DOM：将⽂档和标签等所有内容进⾏解析。
即负责将标记型⽂档及⽂档中的内容进⾏解析。
并封装成对象，在对象中定义了更多的属性和⾏为，便于对对象进⾏操作。
dom基本概念
dom基本概念DOM基本概念DOM（Document Object Model）是一种用于处理HTML和XML文档的编程接口。
它将文档表示为一个树形结构，其中每个节点都是一个对象，每个对象都有其自身的属性和方法。
DOM的基本概念包括节点、元素、属性、文本、注释、文档对象等。
节点节点是DOM中最基本的单位，它可以是元素、属性、文本、注释等。
每个节点都有其自身的类型、名称、值等属性。
节点之间可以存在父子关系、兄弟关系等。
在DOM中，节点可以通过节点类型来进行分类，例如元素节点、属性节点、文本节点等。
元素元素是DOM中的一种节点类型，它表示HTML或XML文档中的标签。
每个元素都有其自身的标签名、属性、子元素等。
在DOM中，元素节点可以通过标签名来进行访问，例如document.getElementsByTagName()方法可以获取文档中指定标签名的所有元素。
属性属性是DOM中的一种节点类型，它表示HTML或XML文档中的属性。
每个属性都有其自身的名称和值。
在DOM中，属性节点可以通过元素节点来进行访问，例如element.getAttribute()方法可以获取元素节点的指定属性值。
文本文本是DOM中的一种节点类型，它表示HTML或XML文档中的文本内容。
每个文本节点都有其自身的文本值。
在DOM中，文本节点可以通过元素节点来进行访问，例如element.firstChild.nodeValue 可以获取元素节点的文本内容。
注释注释是DOM中的一种节点类型，它表示HTML或XML文档中的注释内容。
每个注释节点都有其自身的注释值。
在DOM中，注释节点可以通过元素节点来进行访问，例如element.childNodes可以获取元素节点的所有子节点，其中包括注释节点。
文档对象文档对象是DOM中的一种节点类型，它表示整个HTML或XML文档。
文档对象是DOM树的根节点，它包含了整个文档的所有元素、属性、文本、注释等节点。
什么是DOM
什么是DOM1. 什么是DOM: document object modelDOM: 专门操作⽹页内容的⼀套函数和对象DOM还是⼀个标准，由W3C制定为什么:⼴义JS=ECMAScript + DOM + BOM核⼼语法操作⽹页内容访问浏览器软件要想操作⽹页内容，为页⾯添加交互效果，其实只能⽤DOM函数和对象。
问题: 早起的DOM没有标准解决: W3C制定了统⼀的DOM函数和对象的标准。
⼏乎所有浏览器100%兼容。
特例: IE8何时: 只要操作⽹页内容，为⽹页添加交互⾏为，只能⽤DOM包括: 5件事: 增删改查事件绑定2. DOM树:什么是: 在内存中，集中保存⼀个⽹页中所有内容的树形结构为什么: 树形结构是最直观的保存上下级包含关系的数据结构。
⽽⽹页中的HTML标签，刚好也是⽗⼦嵌套的上下级包含关系。
所以，⽹页中每⼀项内容，在内存中，都是存在⼀棵树形结构上的。
如何:1. 当浏览器读取到⼀个.html⽂件时，会先在内存中创建⼀个document对象，作为整棵树的树根对象2. 开始扫描.html中每个元素,⽂本等内容。
每扫描到⼀项内容，就在document下对应位置创建⼀个节点(node)对象。
3. 查找元素:1. 不需要查找，就可直接获得:document.documentElement <html>document.head <head>document.body <body>2. 按节点间关系查找:树上的每个节点都不是孤⽴存在的。
都和上下左右的节点之间有各种各样的关系，可以互相访问到。
包括:节点树: 包含所有节点内容的完整树结构2⼤类关系：1. ⽗⼦关系:节点.parentNode获得当前节点的⽗节点⽗节点.childNodes 获得当前⽗节点下的所有直接⼦节点的集合。
强调: childNodes返回的是⼀个类数组对象，今后我都简称集合。
⽗节点.firstChild 获得当前⽗节点下的第⼀个直接⼦节点。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
表单事件是指在form元素的开始标记内声明的事件
【例4-15】演示利用onmouseover事件控制和显示区域热点。
2016年9月24日星期六
12
2016年9月24日星期六
7
Document对象
Document对象的常用方法
var x= document.getElementsByTagName("p")；//返回标记名为p的子元素列表（数组） var x=document.createElement("div") ；//创建一个div元素节点 var txt=document.createTextNode("这是动态创建的内容")；//创建一段文本
2016年9月24日星期六
9
客户端事件
在HTML元素的开始标记内，可以定义与用户交互的客户端事件。 可以利用JavaScript或者jQuery实现事件被触发时执行的代码。 鼠标事件
2016年9月24日星期六
10
客户端事件
键盘事件
窗体事件
2016年9月24日星期六
11
客户端事件
表单事件
2016年9月24日星期六
5
计时器
计时器提供了一个可以异步延时执行JavaScript代码片段的
能力。
注意JavaScript本身是单线程的（在一定时间范围内仅一部
分脚本能运行），利用计时器则可以突破这种限制，从而规 划一些在指定时间后自动执行的代码。
【例4-13】演示利用JavaScript函数开始和停止计时。
浏览器对象和客户端事件
DOM
DOM（Document Object Model for HTML，文档对象模型）是W3C制定的一 种与客户端浏览器、平台和语言无关的HTML编程接口，它提供了对HTML文档 的结构表述，定义了访问和操作HTML文档的标准方法，而且可被其他编程语言 或脚本使用。例如： <html> <head> <title>文档标题</title> Element：head </head> Element：title <body> <h1>标题1</h1> Text："文档标题" <a href=”” id=”myLink”>我的链接</a> </body> </html>
2016年9月24日星期六
3
Windows对象
பைடு நூலகம்利用浏览器提供的window对象，可以控制浏览器窗口。
2016年9月24日星期六
4
获取浏览器窗口信息 //浏览器窗口大小 var windowWidth = window.outerWidth; var windowHeight = window.outerHeight; //浏览器窗口相对于屏幕左上角的位置 var windowX = window.screenX; var windowY = window.screenY; //浏览器工作区（不包括工具条、菜单条、状态条） var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight; 【例4-12】演示获取浏览器窗口信息的基本用法
2016年9月24日星期六
8
Document对象——node对象 调用Node对象的属性及方法来查询、设置或者删除一个节点的相关属性：
（1）childNodes属性： 返回指定节点的所有子节点，并将其保存在数组中 （2）nodeName属性： 返回指定节点的HTML标记名称 （3）innerHTML属性： 设置或返回该标签元素开始和结束标记之间包含的HTML （4） appendChild方法： 向当前节点对象追加节点，一般用于给页面动态添加内容的场合。 （5）removeChild方法： 移除当前节点的子节点，并返回被移除的节点对象。
2016年9月24日星期六
document Element：html Element：body Element：a Attribute："id" Text："标题1" Attribute："href" Text："我的链接"
Element：h1
2
客户端浏览器公开的DOM树中html元素对象的层次结构。
2016年9月24日星期六
6
screen对象 screen对象用于获取客户端屏幕和渲染能力等信息。属性： （1）availHeight：获取屏幕的工作区高度，不包括Windows 任务栏可用高度。 （2）availWidth：获取屏幕的工作区宽度，不包括Windows 任务栏可用宽度。 （3）width：屏幕宽度。 （4）height：屏幕高度。 （5）colorDepth：颜色深度，即可用的颜色数量。 【例4-14】利用Screen对象返回客户端屏幕的高度和宽度等信 息。