Chapter06_1_事件与DOM基础
dom学习笔记
DOM一、基本概念1、DOM ：Document Object Model 缩写，文档对象模型。
2、元素：一个元素就是HTML 标签，包括其中的属性和内容。
二、元素对象1、浏览器本身、文档，以及HTML 元素都可以当作对象。
2、把元素声明成对象的三种方法：1）使用var test =document.getElementById(‘s’)test 就是id 为s 的元素的对象实例2）onclick=”show(this)”this 就代表这个元素的对象实例3）<script for=”s”event=”onclick”>xxx</script>三、事件源、事件、事件处理程序1、事件源：在哪里发生2、事件：发生什么事3、事件处理程序：处理发生事的程序四、元素对象1、公共属性：1）Object.属性：设置元素属性。
a.href =‘’;2）object.getAttribute(“元素名”)：获取元素属性值var i =a.getAttribute(‘href’);3）Object.innerText ：修改HTML 内容（只操作文本）。
4）Object.innerHTML ：修改HTML 内容（可以插入HTML 标签）。
a.innerHTML =“<img src=’xxx.jpg’/>”;5）Object.style ：返回对象的样式，是一个对象类型a.style.color =“red”;6）Object.className ：CSS 类名<style>.test{color:red;}</style>a.className =‘test’;7）Object.appendChild(‘s’)：向本元素中嵌入其它元素。
var img =document.createElement(‘img’);a.appendChild(‘img’);8）Object.removeChild(‘s’)：删除本元素中内嵌的元素。
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事件相關知識的起步點。
今天來瞭解一下DOM事件的模型。
基本事件模型在Web應用程序或Web網站中，可以通過使用者操作或系統的事件，達到相應的響應。
而在JavaScript中，事件在未得到標準化之前，各瀏覽器就有一個事件模型——基本事件模型（Basic Event Model）。
在基本事件模型中，要在某個事件發生時，調用指定的函數，也就是上一節中介紹的事件處理程序。
這個程序會指定事件觸發將會做什麼樣的事情。
打個比方，當Web頁面加載完所有資源之後，即window的load事件中做指定的事情：window.onload = function () {// window的load事件發生時要做的事情...}除此之外，事件還可以由使用者的操作一些事情來觸發事件。
比如在按鈕上綁定一個click事件：<!-- HTML --><button>Click Me!</button>// Scriptlet handler = function () {console.log(this)}document.querySelector('button').onclick = handler上面的代碼，當用戶用鼠標點擊按鈕時會調用handler()函數，打印出來的this就是用戶點擊的按鈕。
像這樣的做法，被稱為傳統模型（Traditional Model）或傳統註冊模型（Traditional Registration Model）。
這種事件模型也被稱為DOM0級模型。
基本事件模型有一個典型的缺點，就是只能註冊一個事處處理程序，如果你想註冊多個事件處理程序是行不通的。
比如：<!-- HTML --><button>單擊我</button>// Scriptlet handler1 = function () {console.log('Handler1:', this)}let handler2 = function () {console.log('Handler2', this)}document.querySelector('button').onclick = handler1document.querySelector('button').onclick = handler2當你點擊button按鈕時，瀏覽器控制台只會輸出hander2()函數做的事情：第一個函數handler1()不起作用。
DOM及DOM技术介绍
DOM及DOM技术介绍本文概述了一些强大的，基本的DOM 级别一中的方法以及如何在JavaScript中使用它们。
你将会学习到如何动态地创建，访问，控制以及移除HTML元素。
这里提到的DOM方法，并非是HTML专有的；它们在XML中同样适用。
这里所有的示例，在任何全面支持DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器，像网景公司的下一代导航者（Navigatior）浏览器等。
这里的示例代码在IE5中也能正常工作。
（这里所提到的DOM 方法是文档对象模型规范（级别一）的核心的一部分。
DOM 级别一包括对文档进行访问和处理的方法（DOM 1 核心）和专门为HTML文档定义的方法。
）DOM简介：DOM的全称是文档对象模型（即Document Object Model），它在本质上是一种文档平台。
文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。
支持Javascript的所有浏览器都支持DOM。
DOM实际上是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的一种语言平台。
这段文字是通过一个实例代码来介绍了DOM的。
那么我们从下面的HTML示例来开始吧。
这段示例使用了DOM 级别一的方法，从JavaScript动态创建了一个HTML表格。
它创建了一个包含了四个单元的小表格，并且在每个单元中含有文本。
单元中文字内容是“这个单元式y行x列”，来展示单元格在表格中所处的位置。
<head><title>样例代码 - 使用 JavaScript 和 DOM 接口创建一个 HTML 表格</title><script>function start() {// 获得从body的引用varmybody=document.getElementsByTagName("body").item(0);// 创建一个TABLE的元素mytable = document.createElement("TABLE");// 创建一个TBODY的元素mytablebody = document.createElement("TBODY"); // 创建所有的单元格for(j=0;j<2;j++) {// 创建一个TR元素mycurrent_row=document.createElement("TR"); for(i=0;i<2;i++) {// 创建一个TD元素mycurrent_cell=document.createElement("TD");// 创建一个文本（text）节点currenttext=document.createTextNode("cellis row "+j+", column "+i);// 将我们创建的这个文本节点添加在TD元素里mycurrent_cell.appendChild(currenttext); // 将TD元素添加在TR里mycurrent_row.appendChild(mycurrent_cell); }// 将TR元素添加在TBODY里mytablebody.appendChild(mycurrent_row);}// 将TBODY元素添加在TABLE里mytable.appendChild(mytablebody);// 将TABLE元素添加在BODY里mybody.appendChild(mytable);// 设置mytable的边界属性border为2mytable.setAttribute("border","2");}</script></head><body onload="start()"></body></html>注意我们创建元素和文本节点的顺序：首先我们创建了TABLE元素。
DOM事件：DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件
DOM事件：DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、⾃定义事件前端⾯试中只要问到事件，就肯定会有DOM事件；如果回答出来了，就会⼀直向下延申，其实这些东西都很简单，但我第⼀次被问到的时候，也是懵的；DOM事件级别：DOM0 element.onclick = function() { }DOM1⼀般只有设计规范，没有设计跟事件相关的东西；所以直接跳过DOM2 element.addEventListener(‘click’, function() { }, false)DOM3 element.addEventLIstener(‘keyup’, function() { }, false)DOM3在DOM2的基础上参加了很多的事件类型；DOM2、DOM3 中的第三个参数表⽰：该事件在捕获阶段触发（true）、在冒泡阶段触发（false）DOM事件模型：就是正常的事件冒泡和捕获向上冒泡向下捕获DOM事件流：事件流就是：浏览器在为这个页⾯与⽤户做交互的过程中，（⽐如我点击了⿏标左键）如何将这个左键是传到页⾯上的，⼜是如何响应的；⼀共分为三个阶段：捕获 -> ⽬标阶段 -> 冒泡事件通过捕获到达⽬标元素，这个阶段为⽬标阶段；从⽬标元素再上传到window对象即冒泡阶段DOM事件捕获过程：⼀个事件⾸先会被 window捕获，其捕获流程：window -> document -> html -> body -> … -> ⽬标元素1 <style>2 #ev {3 background: lightblue;4 width: 200px;5 height: 200px;6 text-align: center;7 line-height: 200px;8 }9 </style>10 <div id="ev">11⽬标元素12 </div>13 <script>14var ev = document.getElementById('ev');15// 为了能表现出事件捕获流程，这⾥使⽤在捕获时触发事件16 window.addEventListener('click', function() {17 console.log('window capture');18 }, true)1920 document.addEventListener('click', function() {21 console.log('document capture');22 }, true)2324 document.body.addEventListener('click', function() {25 console.log('body capture');26 }, true)2728 ev.addEventListener('click', function() {29 console.log('ev capture');30 }, true)31 </script>Event对象的常见应⽤:event.preventDefault()阻⽌元素的默认⾏为（如链接的跳转）event.stopPropagaation()阻⽌捕获和冒泡阶段中当前事件的进⼀步传播。
DOM学习笔记(一)
DOM学习笔记（一）一、Dom入门DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。
比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。
JavaScript→Dom就是C#→.Net Framwork。
没有.net，C#只能for、while，连WriteLine、MessageBox都不行。
Dom就是一些让JavaScript 能操作HTML页面控件的类、函数。
DOM也像WinForm一样，通过事件、属性、方法进行编程。
CSS+JavaScript+DOM=DHTML二、Dom事件事件：<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。
有时间事件响应的代码太多，就放到单独的函数中：<script type="text/javascript">function bodymousedown() {alert("网页被点坏了，赔吧！");alert("逗你玩的！");}</script><body onmousedown="bodymousedown()">bodymousedown后的括号不能丢，因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。
动态设置事件可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样function f1() {alert("1");}function f2(){alert("2");}<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />//注意f1不要加括号。
DOM基础
文档对象
document 描述当前窗口或指定窗口对象的文 档。它包含了从<head>到</body>的内容。
松迪科技（北京）有限公司
文档对象
document属性 lastModified 文档最后修改日期，是一个 Date 对象。 referrer 如果文档通过点击连接打开，则 referrer 返回原来的 URL。 title <title>...</title>定义的文字。 fgColor <body>的 text 属性所表示的文本颜色。 bgColor <body>的 bgcolor 属性所表示的背景颜色。 linkColor <body>的 link 属性所表示的连接颜色。 alinkColor <body>的 alink 属性所表示的活动连接颜色。 vlinkColor <body>的 vlink 属性所表示的已访问连接颜色。
松迪科技（北京）有限公司
event对象
altKey 检索ALT键的当前状态 可能的值 true为关闭 false为不关闭 button 检索按下的鼠标键 可能的值： 0 没按键 1 按左键 2 按右键 3 按左右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键
松迪科技（北京）有限公司
松迪科技（北京）有限公司
窗口对象
close() 关闭一个已打开的窗口。 blur() 使窗口变为“非活动窗口”。 focus() 使窗口变为“活动窗口”。 scrollTo() [<窗口对象>.]scrollTo(x, y)；使窗 口从左上角数起的(x, y)点滚动到窗口的左上 角。 scrollBy() [<窗口对象>.]scrollBy(deltaX, deltaY)；使窗口向右滚动 deltaX 像素，向下 滚动 deltaY 像素。如果取负值，则向相反的 方向滚动。
DOM基础
DOM 基础什么是 DOM？通过 JavaScript，您可以重构整个 HTML 文档。
您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。
这个入口， 连同对 HTML 元素进行添加、 移动、 改变或移除的方法和属性， 都是通过文档对象模型来获得的 （DOM） 。
在 1998 年， W3C 发布了第一级的 DOM 规范。
这个规范允许访问和操作 HTML 页面中的每一个单独 的元素。
所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
DOM 被分为不同的部分（核心、XML 及 HTML）和级别（DOM Level 1/2/3）： Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对 XML 文档的对象 HTML DOM 定义了一套标准的针对 HTML 文档的对象。
HTML 文档中的每个成分都是一个节点。
节点根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点Node 层次节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。
HTML 文档中的每个元素、属性、文本等都代 表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节 点为止。
下面这个图片表示一个文档树（节点树）：一棵节点树中的所有节点彼此都是有关系的。
文档树（节点数）请看下面这个 HTML 文档： <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html>上面所有的节点彼此间都存在关系。
JavaScript中的事件处理和DOM操作技巧
JavaScript中的事件处理和DOM操作技巧一、事件处理的基本概念与方法JavaScript中的事件处理是指对网页中的各种交互事件进行响应和处理的技术。
常见的事件包括点击、鼠标移动、键盘按下等。
以下是几个常用的事件处理方法：1.1 onclick事件处理onclick事件是最常用的一种事件，它会在用户点击元素时触发相应的操作。
例如，我们可以通过以下代码给一个按钮添加点击事件处理：```javascriptvar btn = document.getElementById("myButton");btn.onclick = function() {// 点击按钮后执行的操作};```1.2 onmouseover和onmouseout事件处理这两个事件分别在鼠标移入和移出元素时触发，可以用来实现一些与鼠标交互相关的效果。
例如，下面的代码会让一个元素在鼠标移入时背景颜色变为红色，在鼠标移出时恢复原来的颜色：```javascriptvar element = document.getElementById("myElement");element.onmouseover = function() {// 鼠标移入时执行的操作this.style.backgroundColor = "red";};element.onmouseout = function() {// 鼠标移出时执行的操作this.style.backgroundColor = "";};```1.3 addEventListener方法除了上述直接赋值方式外，还可以使用addEventListener方法来添加事件处理。
该方法接受三个参数，分别是事件名称、回调函数和是否在捕获阶段触发。
例如，下面的代码会在点击按钮时执行相应的操作：```javascriptvar btn = document.getElementById("myButton");btn.addEventListener("click", function() {// 点击按钮后执行的操作});```二、事件对象与事件传播在事件处理过程中，事件对象和事件传播是两个重要的概念。
DOM基础教程之使用DOM
DOM基础教程之使⽤DOM 在了解DOM(⽂本对象模型)的框架和节点后，最重要的是使⽤这些节点处理html⽹页对于⼀个DOM节点node，都有⼀系列的属性和⽅法可以使⽤。
常⽤的有下表。
1.访问节点BOM提供了⼀些边界的⽅法访问节点，常⽤的就是getElementsByTagName()，和getElementById()复制代码代码如下:<script type="text/javascript">function searchDOM(){var oLi = document.getElementsByTagName("li");var j =oLi.length;var j2 =oLi[5].tagName;var j3 =oLi[0].childNodes[0].nodeValue;document.write(j+"<br>"+j2+"<br>"+j3+"<br>");}</script><body><body onload="searchDOM()"><div id-"in"></div><ul>客户端语⾔<li>HTML</li><li>JavaScript</li><li>CSS</li></ul><ul>服务器端语⾔<li></li><li>JSP</li><li>PHP</li></ul></body>document.getElementById()复制代码代码如下:<script type="text/javascript">window.onload = function(){function findid(){var j4 =oli2.tagName;document.write(j4);}var oli2 = document.getElementById("inn");oli2.onclick = findid;}</script><li id="inn">PHP</li>复制代码代码如下:<html><body id="myid" class="mystyle"><div class="myid2"></div><script type="text/javascript">x=document.getElementsByTagName('div')[0];document.write("div CSS class: " + x.className);document.write("<br />");document.write("An alternate way: ");document.write(document.getElementById('myid').className);</script></body></html>//id获得className2.检测节点类型通过节点的nodeType可以检测到节点的类型，该参数⼀个返回12个整数值。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
onmousedown
onmouseup onscroll
鼠标按下
鼠标弹起 滚动条移动
事件对象
属性
type button keyCode
可读/可写
R R/W R/W
说明
事件名称，如mouseover、click、submit或自 定义事件名称。 表示按下的鼠标按钮 ,返回 0~7 表示按下按钮的数字代号
HTML DOM节点关系
父节点 子节点 同级节点
说明以下节点的关系 <html> <head> <title>DOM 基础</title> </head> <body> <h1>HTML DOM </h1> <p>Hello world!</p> <div> <p>div里面的段落</p> </div> </body> </html>
什么是DOM（文档对象模型）
需要通过javascript对html页面上添加、移除、改变或重 排页面上的项目； DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以 及 XML 文档。 DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）： Core DOM / XML DOM / HTML DOM
IE的地址栏对应哪个浏览器对象？它用来保存网页的地址 信息
目 标
掌握javascript的事件处理机制 掌握常用的HTML DOM属性和方法
事件处理
事件是发生并得到处理的操作 事件：电话振铃 处理事件
事件基本概念
JavaScript是基于对象(object-based)的语言，基于对象 的基本特征，就是采用事件驱动(event-driven) 通常鼠标或热键的动作我们称之为事件(Event)，而由鼠 标或热键引发的一连串程序的动作，称之为事件驱动 (Event Driver)。 而对事件进行处理程序或函数，我们称之为事件处理程序 (Event Handler)。
属性
0 1 鼠标左键(FireFox) 鼠标左键(IE)
说明
2
3 4
鼠标右键
鼠标左右键同时按下 鼠标中键
5
6 7
鼠标左键和中键同时按下
鼠标右键和中键同时按下 所有三个键都按下
事件对象示例
事件函数中可传递当前事件对象event this代表当前div对象
<div id=“mydiv” onclick=“dealClick(event,this)”>这是一个层</div>
function divClick(event){ if(event.type == “click”){ //事件类型 alert(“click”); } var iKeyCode = event.keyCode; //获取按钮 var iClientX = event.clientX; //事件的客户端X坐标 var iClientY = event.clientY; //事件的客户端Y坐标 //…… }
DOM属性
属 性 parentNode
firstChild lastChild nodeName nodeValue childNodes previousSibling nextSibling
clientX
clientY
R
R
事件发生时，鼠标在客户端区域(不包含工具栏、 滚动条等)的x坐标
事件发生时，鼠标在客户端区域(不包含工具栏、 滚动条等)的y坐标
screenX
screenY
R
Rபைடு நூலகம்
相对于整个计算机屏幕的鼠标x坐标
相对于整个计算机屏幕的鼠标y坐标
Mousedown event.button
WEB页面的XML发展
HTML4.0到XHTML1.0的演变 HTML DOM（HTML文档对象模型）定义了访问和处理HTML 元素和文本的标准方法,基于Core DOM(核心DOM)的特性和 方法进行了简便化
HTML DOM节点
HTML 文档中的每个成分都是一个节点。
整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点
2) 对象.事件 = 函数名或者函数定义
<script type="text/javascript"> this.onscroll =function(){ alert("scrolling..."); } 事件 </script>
处理事件
事件类型分类
鼠标事件 click dbclick mousedown mouseout mouseover mouseup mousemove 键盘事件 keydown keypress keyup HTML事件 load unload abort error resize scroll select change submit reset focus blur
Javascript
第六章 事件与DOM基础
回
顾
常用的浏览器对象有哪些？ 希望在网页打开时，就伴随弹出广告窗口，应使用什么事 件？打开广告窗口使用window对象的哪个方法？ history对象的哪个方法相当于IE浏览器中的后退按钮？ 希望动态改变网页的背景色，应使用哪个对象的bgColor 属性？
事件处理
JavaScript 事件处理程序就是一组语句，在事件（如点 击鼠标或移动鼠标等）发生时执行
事件处理程序的基本语法是：
1) 事件名=" JavaScript 代码或调用函数“
<INPUT type=”BUTTON” … onclick=“alert(“单击我！”);”> <INPUT type=”BUTTON” … onmousedown=“check( )”>
JavaScript常用事件
事件名
onclick onchange
说明
鼠标单击 文本内容或下拉菜单中的选项发生改变
onfocus
onblur onmouseover onmouseout onmousemove onload onsubmit
获得焦点，例如：表示文本框等获得鼠标光标。
失去焦点，例如：表示文本框等失去鼠标光标。 鼠标悬停，例如：鼠标停留在图片等的上方 鼠标移出，例如：离开图片等所在的区域 鼠标移动，例如：表示在<DIV>层等上方移动 网页文档加载事件 表单提交事件