當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript与DOM编程
生活随笔
收集整理的這篇文章主要介紹了
JavaScript与DOM编程
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- JavaScript
- JS簡介
- 常量與變量
- 數(shù)組
- 創(chuàng)建數(shù)組
- 訪問數(shù)組：通過指定數(shù)組名以及索引號，可以訪問某個特定的元素
- 對象
- 1.系統(tǒng)所提供對象
- 2.自定義對象
- 訪問對象
- 函數(shù)
- 第一種
- 第二種
- 第三種
- DOM編程
- DOM文檔對象模型
- 獲取節(jié)點
- document對象
- 節(jié)點指針
- 創(chuàng)建和插入節(jié)點
- 創(chuàng)建節(jié)點
- 插入節(jié)點
- appendChild方法
- 注意：
- 復制，刪除和替換節(jié)點
- 復制刪除和替換節(jié)點
- removeChild移出已存在的元素
- 注意
- replaceChild替換已存在的元素
- 注意
- 獲取，設置和刪除屬性
- 獲取，設置和刪除屬性
- 修改元素內(nèi)容
- 使用innerHTML屬性改變元素內(nèi)容
- 修改元素樣式
- 使用.style修改元素樣式
- 獲取表單數(shù)據(jù)
- 未加JavaScript代碼
- 加JavaScript代碼
- 事件與事件流
- 事件
- DOM0級事件
- DOM2級事件
- DOM3級事件
- DOM事件流
- 冒泡型事件
- 捕獲型事件
- BOM編程
- window對象常用方法
- 函數(shù)組1
- 頁面上顯示時鐘
- JavaScript進度條
- 方塊平移
- 函數(shù)組2
- 函數(shù)組3
JavaScript
JS簡介
常量與變量
數(shù)組
創(chuàng)建數(shù)組
訪問數(shù)組：通過指定數(shù)組名以及索引號，可以訪問某個特定的元素
對象
1.系統(tǒng)所提供對象
2.自定義對象
自定義對象由花括號分隔，在括號內(nèi)部，對象屬性以名稱和值對的形式(name:value)來定義，各個屬性時間由逗號分隔。
var person={firstname:"Jhon",lastname:"Doe",id:5566};訪問對象
name=person.lastname; name=person["lastname"];函數(shù)
函數(shù)通常在<head>部分或.js文件中定義
第一種
<!DOCTYPE html> <html><head><script>function add(a,b){return a+b;}</script> </head> <body> 6+5=<script>document.write(add(6,5))</script> </body> </html>第二種
<!DOCTYPE html> <html><head><script>function fun1(txt){alert(txt);}</script> </head> <body> <form><input type="button" onclick="fun1(this.value)" value="hello"> </form> </body> </html>第三種
<!DOCTYPE html> <html><head><script src="my.js" type="text/javascript"></script> </head> <body> <form><input type="button" onclick="disp()" value="OK"/> </form> </body> </html>my.js文件：
function disp() {alert("hello world!"); }
注意：
DOM編程
DOM文檔對象模型
獲取節(jié)點
獲取節(jié)點主要有兩種方式：一種是從document頂層對象出發(fā)，調(diào)用相應方法訪問各節(jié)點，另一種方式是從節(jié)點指針出發(fā)獲取該節(jié)點所在的父節(jié)點，兄弟節(jié)點和子節(jié)點
document對象
節(jié)點指針
注意：
getElementById這里是大寫的i，我用小寫的L居然也行，表示疑惑。。。
提示：
僅僅只是IE瀏覽器行得通，我用Chrome然后再使用小寫的L就不行嘍
所以大寫的i是毫無疑問的標準答案，別奇思妙想。
創(chuàng)建和插入節(jié)點
創(chuàng)建節(jié)點
插入節(jié)點
appendChild方法
<!DOCTYPE html> <html><head></head> <body> <div id="div1"><p id="p1">這是一個段落</p><p id="p2">這是另外一個段落</p><script>var para=document.createElement("p");var node=document.createTextNode("這是一個新的段落");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script> </div> </body> </html>
注意：
<script>var para=document.createElement("p");var node=document.createTextNode("這是一個新的段落");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script>這段代碼必須放在
<div id="div1"> …………………………………………</div>這個標簽里面，否則無效
復制，刪除和替換節(jié)點
復制刪除和替換節(jié)點
removeChild移出已存在的元素
<!DOCTYPE html> <html><head></head> <body> <div id="div1"><p id="p1">這是一個段落</p><p id="p2">這是另外一個段落</p> </div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);</script> </body> </html>注意
<script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);</script>上面這段代碼需要放在下面這段代碼的下面或者里面（放在上面是無效的）
<div id="div1"><p id="p1">這是一個段落</p><p id="p2">這是另外一個段落</p> </div>replaceChild替換已存在的元素
<!DOCTYPE html> <html><head></head> <body> <div id="div1"> <p id="p1">這是一個段落</p><p id="p2">這是另外一個段落</p> </div> <script>var para=document.createElement("p");var node=document.createTextNode("這是新的段落");para.appendChild(node);var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.replaceChild(para,child);</script> </body> </html>注意
<script>var para=document.createElement("p");var node=document.createTextNode("這是新的段落");para.appendChild(node);var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.replaceChild(para,child);</script>上面這段代碼需要放在下面這段代碼的下面或者里面（放在上面是無效的）
<div id="div1"> <p id="p1">這是一個段落</p><p id="p2">這是另外一個段落</p> </div>獲取，設置和刪除屬性
獲取，設置和刪除屬性
修改元素內(nèi)容
使用innerHTML屬性改變元素內(nèi)容
也可以通過innerHTML獲得文本內(nèi)容，既可以read也可以write
<!DOCTYPE html> <html><meta charset="utf-8" /><head><title>改變HTML內(nèi)容</title> </head> <body> <p id="p1">hello world！</p><script>document.getElementById("p1").innerHTML="新文本";</script> </body> </html>
還是那句話，必須放在下面或者里面（上面無效）
修改元素樣式
使用.style修改元素樣式
<!DOCTYPE html> <html><meta charset="utf-8" /><head><title></title> </head> <body> <p id="p1">hello world！</p> <p id="p2">hello world！</p><script>document.getElementById("p1").style.color="blue";document.getElementById("p2").style.fontSize="larger";document.getElementById("p2").style.fontFamily="Arial";</script> </body> </html>獲取表單數(shù)據(jù)
未加JavaScript代碼
<!DOCTYPE html> <html><meta charset="utf-8" /><head><title></title> </head> <body> <form>Name:<input type="text" id="name" /><br/><br/>Password:<input type="password" id="pwd" maxlength="8"/><br/><br/>Gender:<input type="radio" name="gender" value="male" checked/>Male<input type="radio" name="gender" value="female"/>female<br><br>Hobby:<input type="checkbox" name="hobby" value="football" />Football<input type="checkbox" name="hobby" value="basketball" />Basketball<input type="checkbox" name="hobby" value="tennis" />Tennis<br><br>Major:<select id="major"><option value="CS">Computer Science</option><option value="SE">Software Engineering</option><option value="CN">Computer Network</option></select><br><br>Speciality:<select id="speciality" size="3" multiple><option value=".Net">.Net</option><option value="C++">C++</option><option value="Java">Java</option><option value="Python">Python</option></select>attachment:<input type="file" id="myFile"/><br><br>Resume:<textarea id="resume" cols="50" rows="10"></textarea><br><br><input type="button" value="Show Value" onclick="show()" /><input type="reset" value="Reset Form" /><br><br> </form></body> </html>加JavaScript代碼
<!DOCTYPE html> <html><meta charset="utf-8" /> <head><script>function getMultiSelectValue(SelectName){var obj=document.getElementById(SelectName);var str="";if(obj!=null){for(var i=0;i<obj.length;i++){if(obj.options[i].selected) str+=obj.options[i].value+",";}}if(str.length>0) str=str.substring(0,str.length-1);return str;}function getCheckBoxValue(CheckBoxName){var obj=document.getElementsByName(CheckBoxName);var str="";if(obj!=null){for(var i=0;i<obj.length;i++){if(obj[i].checked) str+=obj[i].value+",";}}if(str.length>0) str=str.substring(0,str.length-1);return str;}function getRadioValue(RadioName){var obj=document.getElementsByName(RadioName);if(obj!=null){for(var i=0;i<obj.length;i++){if(obj[i].checked) return obj[i].value;}}return null;}function show(){var message="";var name=document.getElementById("name").value;message+="Name:"+name+"\n";var pwd=document.getElementById("pwd").value;message+="Password"+pwd+"\n";var gender=getRadioValue("gender");message +="Gender"+gender+"\n";var hobby=getCheckBoxValue("hobby");message+="Hobby:"+hobby+"\n";var major=document.getElementById("major").value;message+="Major:"+major+"\n";var speciality=getMultiSelectValue("speciality");message+="speciality:"+speciality+"\n";var attachment=document.getElementById("myFile").value;message+="Attachment:"+attachment+"\n";var resume=document.getElementById("resume").value;message+="Resume:"+resume+"\n";alert(message);}</script> </head> <body> <form>Name:<input type="text" id="name" /><br/><br/>Password:<input type="password" id="pwd" maxlength="8"/><br/><br/>Gender:<input type="radio" name="gender" value="male" checked/>Male<input type="radio" name="gender" value="female"/>female<br><br>Hobby:<input type="checkbox" name="hobby" value="football" />Football<input type="checkbox" name="hobby" value="basketball" />Basketball<input type="checkbox" name="hobby" value="tennis" />Tennis<br><br>Major:<select id="major"><option value="CS">Computer Science</option><option value="SE">Software Engineering</option><option value="CN">Computer Network</option></select><br><br>Speciality:<select id="speciality" size="3" multiple><option value=".Net">.Net</option><option value="C++">C++</option><option value="Java">Java</option><option value="Python">Python</option></select>attachment:<input type="file" id="myFile"/><br><br>Resume:<textarea id="resume" cols="50" rows="10"></textarea><br><br><input type="button" value="Show Value" onclick="show()" /><input type="reset" value="Reset Form" /><br><br> </form></body> </html>事件與事件流
事件
DOM0級事件
DOM0級事件就是將一個函數(shù)賦值給一個事件處理屬性，缺點在于一個處理程序無法同時綁定多個處理函數(shù)
<!DOCTYPE html> <html><meta charset="utf-8" /> <head> </head> <body> <button id="btn" type="button"></button><script>var btn=document.getElementById("btn");btn.onclick=function(){alert("Hello world");}//btn.οnclick=null;解綁事件</script> </body> </html>DOM2級事件
DOM2級事件彌補了DOM0級事件無法事件無法綁定多個事件處理函數(shù)的缺點，允許添加多個處理函數(shù)
<!DOCTYPE html> <html><meta charset="utf-8" /> <head> </head> <body> <button id="btn" type="button"></button><script>var btn=document.getElementById("btn");function show() {alert("hello world");}btn.addEventListener("click",show,false);// btn.removeEventListemer("click",show,false);解綁事件</script> </body> </html>DOM3級事件
DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型，同時DOM3級事件也允許用戶自定義一些事件
| 頁面事件 | 當用戶與頁面上的元素交互時觸發(fā)，如：load，unload，scroll，resize |
| 表單事件 | 當用戶與表單元素交互時觸發(fā)，如：blur，focus，reset，submit |
| 鼠標事件 | 當用戶通過鼠標在頁面執(zhí)行操作時觸發(fā)，如：click，dblclick，mouseup。mousedown，mouseover，mousemove |
| 鍵盤事件 | 當用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)，如：keydown，keypress，keyup |
DOM事件流
冒泡型事件
事件冒泡即事件開始時由具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）
<!DOCTYPE html> <html><meta charset="utf-8" /> <head><title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html>
click事件首先在<div>元素上發(fā)生，然后click事件沿DOM樹向上傳播，在每一級節(jié)點上都會發(fā)生，直至傳播到document對象
捕獲型事件
事件捕獲機制中，不太具體地節(jié)點更早接收到事件，而最具體的節(jié)點最后接收到事件
<!DOCTYPE html> <html><meta charset="utf-8" /> <head><title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html>
click事件首先在document對象上發(fā)生，然后click事件沿DOM樹向下傳播，在每一級節(jié)點都會發(fā)生，直至傳播到<div>元素
onmouseover（鼠標經(jīng)過）和onmouseout（鼠標移開）事件處理示例
<!DOCTYPE html> <html><meta charset="utf-8" /> <head></head> <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>
BOM編程
window對象常用方法
函數(shù)組1
頁面上顯示時鐘
<!DOCTYPE html> <html><meta charset="utf-8" /> <head></head> <body> <p>當前時間：</p> <p id="demo"></p> <button onclick="myStopFunction">停止</button> <script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){var date=new Date();var time=date.toLocaleTimeString();document.getElementById("demo").innerHTML=time;}function myStopFunction(){clearInterval(myVar);}</script> </body> </html>JavaScript進度條
<!DOCTYPE html> <html><meta charset="utf-8" /> <head><style>#myProgress{width: 1000px;height: 30px;position: relative;background-color: #ddd;}#myBar{background-color:red;width: 0px;height: 30px;position:absolute;}</style> </head> <body> <div id="myProgress"><div id="myBar"></div> </div> <button onclick="start()">點我</button> <script>function start(){var bar=document.getElementById("myBar");var width=0;var id=setInterval(frame,50);function frame(){if(width==1000){clearInterval(id);}else{width=width+10;bar.style.width=width+"px";}}} </script> </body> </html>方塊平移
<!DOCTYPE html> <html><meta charset="utf-8" /> <head><style>#box{width: 100px;height: 100px;background-color: red;position: absolute;top: 0;left: 0;}#btn{position: absolute;top: 200px;}</style> </head> <body> <div id="box"></div> <button id="btn">開始</button> <script>var box=document.getElementById("box");var btn=document.getElementById("btn");var timer=null;btn.onclick=function(){var speed=5;clearInterval();timer=setInterval(function (){box.style.left=box.offsetLeft+speed+"px";},50)} </script> </body> </html>函數(shù)組2
注意：
<button onclick="myFunction()">點我</button> <button onclick="myStopFunction()">停止彈框</button>這里的onclick后面不止是函數(shù)名，而是 函數(shù)名 + 括號，少些括號的話，無效
函數(shù)組3
總結
以上是生活随笔為你收集整理的JavaScript与DOM编程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS层叠样式表进阶
- 下一篇： agilebpm脑图_干货基于Sprin