下载文档原格式
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事件有了一個簡單的瞭解。
但這只是學習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 级别一中的方法以及如何在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事件级别：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就是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 基础什么是 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中的事件处理是指对网页中的各种交互事件进行响应和处理的技术。
常见的事件包括点击、鼠标移动、键盘按下等。
以下是几个常用的事件处理方法：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(⽂本对象模型)的框架和节点后，最重要的是使⽤这些节点处理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个整数值。
