标签：
什么是DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过HTML DOM，可访问js HTML文档的所有元素。HTML DOM模型被构造为对象的树。
js查找HTML元素的三种方法：
1）通过id找到HTML元素
var x=document.getElementById("intro");
2）通过标签名找到HTML元素
3）通过类型找到HTML元素
var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
js改变HTML
1）改变HTML输出流
语法：document.write()
<!DOCTYPE html> <html> <body> <script> document.write(Date()); // 直接向HTML输出流写当前日期时间 </script> </body> </html>
2）改变HTML内容
语法：document.getElementById(id).innerHTML=new HTML
<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> </body> </html>
3）改变HTML属性
语法：document.getElementById(id).attribute=new value
<!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif"> <script> document.getElementById("image").src="landscape.jpg"; </script> </body> </html>
js改变CSS
语法：document.getElementById(id).style.property=new style
<!DOCTYPE html> <html> <body> <h1 id="id1">我的标题 1</h1> <button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘"> 点我!</button> </body> </html>
js处理DOM事件
对事件做出反应：
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML=‘Ooops!‘">点击文本!</h1> </body> </html>
如需向HTML元素分配事件，可以使用事件属性：
<!DOCTYPE html> <html> <body> <p>点击按钮执行 <em>displayDate()</em> 函数.</p> <button onclick="displayDate()">点这里</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
HTML DOM允许使用js向HTML元素分配事件：
<!DOCTYPE html> <html> <head> </head> <body> <p>点击按钮执行 <em>displayDate()</em> 函数.</p> <button id="myBtn">点这里</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
onload和onunload事件会在用户进入或离开页面时被触发。可用来检测访问者浏览器类型和版本，处理cookie：
<!DOCTYPE html> <html> <body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("Cookies 可用") } else { alert("Cookies 不可用") } } </script> <p>弹窗-提示浏览器cookie是否可用。</p> </body> </html>
onchange事件常用来对输入字段进行验证：
<!DOCTYPE html> <html> <head> <script> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 输入你的名字: <input type="text" id="fname" onchange="myFunction()"> <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p> </body> </html>
onmouseover和onmouseout时间可用于在用户的鼠标移至HTML元素上方或移出时触发函数：
<!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> function mOver(obj) { obj.innerHTML="Thank You" } function mOut(obj) { obj.innerHTML="Mouse Over Me" } </script> </body> </html>
onmousedown和onmouseup以及onclick构成鼠标点击事件的所有部分。点击时触发onmousedown事件，释放时触发onmouseup事件，完成时触发onclick事件。
<!DOCTYPE html> <html> <head> <script> function lighton() { document.getElementById(‘myimage‘).src="bulbon.gif"; } function lightoff() { document.getElementById(‘myimage‘).src="bulboff.gif"; } </script> </head> <body> <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" /> <p>点击不释放鼠标灯将一直亮着!</p> </body> </html>
<!DOCTYPE html> <html> <body> <h1 onmouseover="style.color=‘red‘" onmouseout="style.color=‘black‘"> 将鼠标移至文部上</h1> </body> </html>
onfocus：
<!DOCTYPE html> <html> <head> <script> function myFunction(x) { x.style.background="yellow"; } </script> </head> <body> 输入你的名字: <input type="text" onfocus="myFunction(this)"> <p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p> </body> </html>
js处理EventListener
1）addEventListener()方法
语法：element.addEventListener(event, function, useCapture);
event代表事件类型，function代表事件触发后调用的函数，useCaption是布尔值用于描述事件是冒泡还是捕获（可选的）。
你可以使用 removeEventListener() 方法来移除事件的监听。
<!DOCTYPE html> <html> <body> <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> <button id="myBtn">点我</button> <p id="demo"></p> <script> document.getElementById("myBtn").addEventListener("click", displayDate); function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </body> </html>
向原元素添加事件句柄：
<!DOCTYPE html> <html> <body> <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> <button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); }); </script> </body> </html>
上例也可食用函数名来引用外部函数：
<!DOCTYPE html> <html> <body> <p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p> <button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); } </script> </body> </html>
也可以向同一个元素添加多个事件句柄：
<!DOCTYPE html> <html> <body> <p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p> <button id="myBtn">点我</button> <script> var x = document.getElementById("myBtn"); x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); function myFunction() { alert ("Hello World!") } function someOtherFunction() { alert ("函数已执行!") } </script> </body> </html>
也可以向同一个元素添加不同类型的事件：
<!DOCTYPE html> <html> <body> <p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p> <button id="myBtn">点我</button> <p id="demo"></p> <script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("demo").innerHTML += "Moused over!<br>" } function mySecondFunction() { document.getElementById("demo").innerHTML += "Clicked!<br>" } function myThirdFunction() { document.getElementById("demo").innerHTML += "Moused out!<br>" } </script> </body> </html>
向window对象添加事件句柄：
<!DOCTYPE html> <html> <body> <p>实例在window对象中使用 addEventListener() 方法。</p> <p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p> <p id="demo"></p> <script> window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = Math.random(); }); </script> </body> </html>
事件传递有两种方式：冒泡或捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
在addEventListener()方法的第三个参数useCapture中，默认值为false代表冒泡传递，ture代表捕获传递。
<!DOCTYPE html> <html> <head> <style> div { background-color: coral; border: 1px solid; padding: 50px; } </style> </head> <body> <p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p> <div id="myDiv"> <p id="myP">点击段落，我是冒泡。</p> </div><br> <div id="myDiv2"> <p id="myP2">点击段落，我是捕获。 </p> </div> <script> document.getElementById("myP").addEventListener("click", function() { alert("你点击了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert(" 你点击了 DIV 元素 !"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你点击了 P 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你点击了 DIV 元素 !"); }, true); </script> </body> </html>
使用 removeEventListener() 方法来移除由 addEventListener() 方法添加的事件句柄:
<!DOCTYPE html> <html> <head> <style> #myDIV { background-color: coral; border: 1px solid; padding: 50px; color: white; } </style> </head> <body> <div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。 <p>点击按钮移除 DIV 的事件句柄。</p> <button onclick="removeHandler()" id="myBtn">点我</button> </div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() { document.getElementById("myDIV").removeEventListener("mousemove", myFunction); } </script> </body> </html>
在日常开发中，需要参考HTML DOM事件对象参考手册。
DOM 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素：
<!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
删除已有的HTML元素：
<!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/wddoer/p/4345631.html
