web前端javaScript筆記——（11）DOM

這篇具有很好參考價值的文章主要介紹了web前端javaScript筆記——（11）DOM。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一、DOM簡介

DOM簡介
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript">
        /*宿主對象，由瀏覽器，運(yùn)行環(huán)境為我們提供的對象，BOM對象 和 DOM對象
         DOM   document object model  文檔對象模型
         JS中通過DOM來對HTML文檔進(jìn)行操作。只要理解了DOM就可以隨心所欲的操作WEB頁面
                     文檔
			-文檔表示的就是整個的HTML網(wǎng)頁文檔，一個HTML網(wǎng)頁就是一個文檔
		 對象
			- 對象表示將網(wǎng)頁中的每一個部分，各種標(biāo)簽、屬性、文本都轉(zhuǎn)換為了一個對象
		 模型
			-使用模型來表示對象之間的關(guān)系，這樣方便我們獲取對象
         
                     轉(zhuǎn)換為對象之后，可以以純面向?qū)ο蟮姆椒ú僮骶W(wǎng)頁
         *模型
         * 
         * 節(jié)點Node，是構(gòu)成我們網(wǎng)頁的最基本的組成部分，
         * 網(wǎng)頁中的每一個部分都可以稱為是一個節(jié)點。
         * 比如:html標(biāo)簽、屬性、文本、注釋、整個文檔等都是一個節(jié)點。
		   雖然都是節(jié)點，但是實際上他們的具體類型是不同的。
		   比如:標(biāo)簽我們稱為元素節(jié)點、屬性稱為屬性節(jié)點、文本稱為文本節(jié)點、文檔稱為文檔節(jié)點。
		   節(jié)點的類型不同，屬性和方法也都不盡相同
		 網(wǎng)頁中的每個部分都是一個節(jié)點
		
		 節(jié)點：Node——構(gòu)成HTML文檔最基本的單元
		 常用節(jié)點分為四類：
		 文檔節(jié)點：整個HTML文檔
		 元素節(jié)點：HTML文檔中的標(biāo)簽
		 屬性節(jié)點：元素的屬性
		 文本節(jié)點：HTML標(biāo)簽中的文本內(nèi)容
		 
		 節(jié)點的屬性：nodeName nodeType  nodeValue是每個節(jié)點都有的屬性
		 文檔節(jié)點的nodeName是一個固定值 #document    
		 				nodeName    nodeType        nodeValue
         * 文檔節(jié)點 		#document   9 				null
         * 元素節(jié)點       		標(biāo)簽名                  1				null
         * 屬性節(jié)點		屬性名		2				null
         * 文本節(jié)點		#text		3				文本內(nèi)容
         * 通過nodeType的值可以判斷類型
         * 
         * */
        
         
    </script>
   
</head>
<body>
       <button id="btn">我是一個按鈕</button>
       <script type="text/javascript">
       	  /*瀏覽器已經(jīng)為我們提供了文檔節(jié)點對象，這個對象是window屬性
       	   可以在頁面中直接使用，文檔節(jié)點代表的是整個網(wǎng)頁*/
       	  console.log(document);    //[object HTMLDocument]
       	  /*document就是文檔節(jié)點，它代表的是整個網(wǎng)頁，通過document可以獲取到網(wǎng)頁中的
       	   任意一個對象*/
       	  //獲取到button對象
       	  var btn=document.getElementById("btn");   //通過id獲取元素
       	  console.log(btn);  //[object HTMLButtonElement]
       	  /*<button id="btn">我是一個按鈕</button>*/
       	 /*DOM中的對象都是和網(wǎng)頁中的對象是一一對應(yīng)的，這個btn現(xiàn)在就是按鈕，它兩是一回事*/
       	   //修改按鈕的文字
       	   console.log(btn.innerHTML);        //我是一個按鈕
       	   btn.innerHTML="T'm a Button";     //直接賦值修改
       	   //DOM中的btn就是網(wǎng)頁中的按鈕
       </script>
    
</body>
</html>

二、事件簡介

屬性 ????????????????????????????????????此事件發(fā)生在何時

onabort 圖像的加載被中斷。

onblur???????????????????????????????????元素失去焦點。

anchange?????????????????????????????????域的內(nèi)容被改變

onclick ?當(dāng)用戶點擊某個對象時調(diào)用的事件句柄。

ondblclick?????????????????????????????????當(dāng)用戶雙擊某個對象時調(diào)用的事件句柄。

onerror???????????????????????????????????在加載文檔或圖像時發(fā)生錯誤。

onfocus???????????????????????????????????元素獲取焦點。

onkeydown????????????????????????????????某個鍵盤按鍵被按下

onkeypress?????????????????????????????????某個健盤按健被按下并松開。

onkeyup???????????????????????????????????某個鍵盤按鍵被松開。

onload?????????????????????????????????????張頁面或一幅圖像完成加載。

onmousedown?????????????????????????鼠標(biāo)按鈕被擠下。

onmousemove?????????????????????????鼠標(biāo)被移動。

onmouseout???????????????????????????鼠標(biāo)從某元素移開。

onmouseover??????????????????????????鼠標(biāo)移到某元素之上。

onmouseup????????????????????????????鼠標(biāo)按鍵被松開。

onreset???????????????????????????????重置按紐被點擊·

onresize??????????????????????????????商口或框架被重新調(diào)整大小

onselect??????????????????????????????文本選中。

onsubmit?????????????????????????????確認(rèn)按鈕被點擊。

onunload?????????????????????????????用戶退出頁面。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    </script>
   
</head>
<body>
    
     <button id="btn">點我一下</button>
     <script type="text/javascript"> 
     /*瀏覽器加載頁面的時候，是從上到下一行一行記載，
      * 所以這里的<script>標(biāo)簽對寫在body中的元素標(biāo)簽下下面，這樣按鈕會先出來，在頁面加載完畢之后
      * 然后再執(zhí)行Js代碼
      * 如果寫在<head>標(biāo)簽對里面會報錯，代碼會先執(zhí)行，然后頁面再加載，然后按鈕會后出來
      * 想要把js代碼寫在<head>標(biāo)簽里面，然后等body中的頁面加載完畢之后再執(zhí)行的解決方法：
      * onload事件會在整個頁面加載完畢之后再觸發(fā)
      * 為window綁定一個onload事件
      * 
      * 下面的代碼不會立即執(zhí)行，會在整個頁面加載完之后再執(zhí)行
      * window.onload=function(){
      * 	
      *    //將js代碼寫在這里，然后將這個大的整體寫在<head>里面的<script>標(biāo)簽里面
      * }
      * */
     
    </script> 
</body>
</html>

三、文檔加載

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	/*想要把代碼寫在<head>標(biāo)簽里面，就統(tǒng)一把代碼寫在window.onload對應(yīng)的函數(shù)里面
    	 這樣可以保證我們的js代碼在頁面加載完畢之后再執(zhí)行
    	 onload事件會在整個頁面加載完成之后才觸發(fā)
                     為window綁定一個onload事件
                     該事件對應(yīng)的響應(yīng)函數(shù)將會在頁面加載完成之后執(zhí)行，
                     這樣可以確保我們的代碼執(zhí)行時所有的DOM對象已經(jīng)加載完畢了，
                     這樣就不會出現(xiàn)獲取不到DOM對象的情況
                     
                     寫上面的話會影響頁面加載速度，所以推薦寫到下面，但是差別不大。
                     寫下面最大的好處就是好管理，方便管理
    	 * */
    	window.onload=function(){
    		//獲取id為btn的按鈕
    		var btn=document.getElementById("btn");
    		//為按鈕綁定一個單擊響應(yīng)函數(shù)
    		btn.onclick=function(){
    			alert("hello");
    		};
    	};
    </script>
   
</head>
<body>
	<button id="btn">我是一個按鈕</button>
</body>
</html>

四、DOM查詢

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	/*獲取元素節(jié)點
    	 通過document對象調(diào)用
    	 1.getElementById()
    	   通過id屬性獲取一個元素節(jié)點的對象
    	 2.getElementsByTagName()
    	   通過標(biāo)簽名獲取一組元素節(jié)點對象
    	 3.getElementsByName()
    	  通過name屬性來獲取一組元素節(jié)點對象,（復(fù)數(shù)）主要獲取表單項，
    	  
    	  獲取元素節(jié)點的子節(jié)點；
    	  通過具體的元素節(jié)點調(diào)用（縮小了選擇范圍）
    	  1.getElementsByTagName()
    	  -方法，返回當(dāng)前節(jié)點的指定標(biāo)簽名后代節(jié)點
    	  2.childNodes
    	  -屬性，表示當(dāng)前節(jié)點的所有子節(jié)點，都包括空白的文本節(jié)點
    	  3.firstChild
    	  -屬性，表示當(dāng)前節(jié)點的第一個子節(jié)點
    	  4.lastChild
    	  -屬性，表示當(dāng)前節(jié)點的最后一個子節(jié)點
    	  
    	  獲取父節(jié)點和兄弟節(jié)點
    	  通過具體的節(jié)點調(diào)用
    	  1.parentNode
    	  -屬性，表示當(dāng)前節(jié)點的父節(jié)點
    	  2.previousSibling
    	  -屬性，表示當(dāng)前節(jié)點的前一個兄弟節(jié)點
    	  3.nextSibling
    	  -屬性，表弟當(dāng)前節(jié)點的后一個兄弟節(jié)點
    	  
    	 */
    	 //查找#bj節(jié)點
    	 
    	 /*遇到大量重復(fù)性代碼，可以嘗試將其提取為一個函數(shù)
    	  * 
    	  * 定義一個函數(shù)，專門用來為指定元素綁定單擊響應(yīng)函數(shù)
    	  * 參數(shù)idStr  要綁定單擊響應(yīng)函數(shù)的對象
    	  * fun事件的回調(diào)函數(shù)，當(dāng)單擊元素時，該函數(shù)將會被觸發(fā)
    	  * 函數(shù)也是對象，是對象就可以作為參數(shù)*/
    	 
    	 function myClick(idStr,fun){
    	 	var btn=document.getElementById(idStr);
    	 	btn.onclick=fun;
    	 }
    	 window.onload=function(){
    	 	//為id為btn01的按鈕綁定一個單擊響應(yīng)函數(shù)
    	 	var btn01=document.getElementById("btn01");
    	 	btn01.onclick=function(){
    	 		//查找id為北京的節(jié)點
    	 		var bj=document.getElementById("bj");//這里寫#bj就會報錯，就什么都打印不出來
    	 		//打印bj
    	 		//innerHTML 通過這個屬性可以獲取到元素內(nèi)部的html代碼
    	 		alert(bj.innerHTML);  //打印出“北京”
    	 	};
    	 	//查找所有的li節(jié)點
    	 	//為id為btn02的按鈕綁定一個單擊響應(yīng)事件
    	 	var btn02=document.getElementById("btn02");
    	 	btn02.onclick=function(){
    	 		//查找所有l(wèi)i節(jié)點
    	 		//getElementsByTagName通過標(biāo)簽名來獲取一組節(jié)點對象，Element有s
    	 		//這個方法會給我們返回一個類數(shù)組對象，所有查詢到的元素都會封裝到對象中
    	 		//即使查詢到的元素只有一個，也會封裝到數(shù)組中
    	 		var lis=document.getElementsByTagName("li");
    	 		//打印lis
    	 	//	alert(lis.length);  //10
    	 	//遍歷lis
    	 	for(var i=0;i<lis.length;i++){
    	 		alert(lis[i].innerHTML);  //innerHTML可以獲得標(biāo)簽上的內(nèi)容
    	 	}		
    	 	};
    	 
    	     //為id為btn03的按鈕綁定一個單擊響應(yīng)函數(shù)
    	 var btn03=document.getElementById("btn03");
    	 btn03.onclick=function(){
    	 	//查找name=gender的所有節(jié)點
    	 	var inputs=document.getElementsByName("gender");
    	 //	alert(inputs.length);  //2
    	  for(var i=0;i<inputs.length;i++){
    	  	/*innerHTML用于獲取元素內(nèi)部的HTML代碼的
    	  	 input就是一個單標(biāo)簽,獲取不到innerHTML 
    	  	 對于自結(jié)束標(biāo)簽，這個屬性沒有意義
    	  	 如果需要讀取元素節(jié)點屬性。
    	  	 直接使用元素.屬性名
    	  	 所有的屬性都適合這個
    	  	 例子：元素.id  元素.name  元素.value
    	  	    注意：class屬性不能采用這種方式  class是保留字
    	  	    讀取class屬性時需要使用元素.className
    	  	    getElementById（）返回的是一個元素，盡量用這個
    	  	    getElementsByTagName()、getElementsByName（）返回的是一個數(shù)組
    	  	    這三個都是非常常用的方法
    	  	 */
    	  	alert(inputs[i].className);
    	  };
    	 };
    	 //為id為btn04的按鈕綁定一個單擊響應(yīng)函數(shù)
    	 //查找#city下所有l(wèi)i節(jié)點
    	 var btn04=document.getElementById("btn04");
    	 btn04.onclick=function(){
    	 	獲取id為city的元素
    	 	var city=document.getElementById("city");
    	 	//查找#city下所有的li節(jié)點，縮小了查找返回
    	 	var lis=city.getElementsByTagName("li");
    	 	//alert(lis.length);  //4
    	 	for(var i=0;i<lis.length;i++){
    	 		alert(lis[i].innerHTML);
    	 	}
    	 };
    	 //返回city下的所有子節(jié)點
    	 var btn05=document.getElementById("btn05");
    	 btn05.onclick=function(){
    	 	//獲取city節(jié)點
    	 	var city=document.getElementById("city");
    	// 	alert(city.childNodes.length); //9
    	//返回#city的所有子節(jié)點
    	//Nodes包括所有的，文本，注釋，元素都算nodes,
    	//childNodes屬性會獲取包括文本節(jié)點在內(nèi)的所有節(jié)點
    	//根據(jù)DOM標(biāo)簽標(biāo)簽間空白也會被當(dāng)成文本節(jié)點
    	//但是IE8沒有完全實現(xiàn)這個標(biāo)準(zhǔn)
    	/*注意：在IE8及以下的瀏覽器中，不會將空白文本當(dāng)成子節(jié)點
    	 所以該屬性在IE8中會返回4個子元素而不是其他瀏覽器是9個*/
    	    var cns=city.childNodes;   
    	//   alert(cns.length);//9，包括了代碼書寫時候的五個換行的空白內(nèi)容當(dāng)成了文本節(jié)點
    	 
    	 /*   for(var i=0;i<cns.length;i++){
    	    	alert(cns[i]);  
    	    }
    	*/	/*children屬性可以獲取當(dāng)前元素的所有子元素,這個屬性只包括子元素，不包括文本節(jié)點
    	，這個屬性是所有瀏覽器都兼容的，推薦使用?。?！*/
    	    var cns2=city.children;
    	 	alert(cns2.length);  //4
    	 };
    	 
    	 //返回#phone的第一個子節(jié)點
    	 var btn06=document.getElementById("btn06");
    	 btn06.onclick=function(){
    	 	//獲取id為phone的節(jié)點
    	 	var phone=document.getElementById("phone");
    	    //返回phone的第一個子節(jié)點
    	   // phone.childNodes[0];
    	   //firstChild可以獲取到當(dāng)前元素的第一個子節(jié)點，包括空白文本節(jié)點
    	    //	var fir=phone.firstChild;
    	 	//firstElements可以獲取到當(dāng)前元素的第一個子元素節(jié)點，不包括文本，元素就是標(biāo)簽
    	 	//這個方法不建議使用，IE8及以下瀏覽器不兼容
    	 	var fir=phone.firstElementChild;
    	 	alert(fir.innerHTML);
    	 	
    	 };
    	 
    	 //為id為btn07的按鈕綁定一個單擊響應(yīng)函數(shù)
    	 myClick("btn07",function(){
    	 	//獲取id為bj的父節(jié)點
    	 	var bj=document.getElementById("bj");
    	 	//返回#bj的父節(jié)點
    	 	var pn=bj.parentNode;
    	 	/*innerText
    	 	該屬性可以獲取到元素內(nèi)部的文本內(nèi)容，它和innerHTML 類似，單不同的是
    	 	它會自動將html的標(biāo)簽去掉，只返回文本*/
    	 	alert(pn);
    	 });
    	 //返回#android的前一個兄弟節(jié)點
    	 /*如果寫兩個myClick("btn08",function(){.....});
    	  * 綁定的按鈕一樣，方法不一樣，后面的會把前面的覆蓋掉*/
    	 myClick("btn08",function(){
    	 	
    	 	var and=document.getElementById("android");
    	 	var ps=and.previousSibling;//也可能獲取到空白的文本
    	 	//previousElementSibling獲取前一個兄弟元素，不包括空白文本，IE8及以下不支持
    	 	//var pe=and.previousElementSiblin;
    	 	alert(ps.innerHTML);
    	 });
    	 
    	 
    	 //讀取#username的value屬性值
    	 myClick("btn09",function(){
    	 	//獲取id為username的元素
    	 	var um=document.getElementById("username");
    	 	//讀取um的value屬性值
    	 	//文本框中的value屬性值，就是文本框中填寫的內(nèi)容
    	 	alert(um.value);
    	 	
    	 });
    	 
    	  myClick("btn10",function(){
    	 	//獲取id為username的元素
    	 	var um=document.getElementById("username");
    	 	//設(shè)置#username的value屬性值
    	 	//設(shè)置的話直接寫，屬性名=屬性值
    	     um.value="你好，今天天氣真不錯";
    	 });
    	 //獲取#bj的文本值
    	 myClick("btn11",function(){
    	 	 //獲取id為北京的元素
    	 	 var bj=document.getElementById("bj");
    	 	// alert(bj.innerText);
    	 	 // alert(bj.innerHTML);如果沒標(biāo)簽的話，這兩個沒什么區(qū)別
    	 	 /*獲取bj中的文本節(jié)點，*/
    	 	//文本節(jié)點上的文字可以用屬性名nodeValue獲取
    	 	alert(bj.firstChild.nodeValue);  //這個方法更麻煩
    	 	
    	 });
    	 
    	 };
  
    </script>
   
</head>
<body>
	<div id="total">
		<div class="inner">
			<p>你喜歡哪個城市？</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li >上海</li>
				<li >東京</li>
				<li >首爾</li>
			</ul>
			<br/>
			<br/>
			<p>你喜歡哪款單機(jī)游戲？</p>
			<ul id="game">
				<li id="rl">紅警</li>
				<li>實況</li>
				<li>極品飛車</li>
			</ul>
			<br/>
			<br/>
			<p>你的手機(jī)操作系統(tǒng)是？</p>
			<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
		</div>
		<div class="inner">
		     gender:
		     <input type="radio" name="gender" value="male"/>male
		     <input type="radio" name="gender" value="female"/>female
		     <br />
		     <br />
		     name:
		     <input type="text" name="name" id="username" value="abcde" />
	    </div>
	</div>
	<div id="btnList">
		<div><button id="btn01">查找#bj節(jié)點</button></div>
		<div><button id="btn02">查找所有l(wèi)i節(jié)點</button></div>
		<div><button id="btn03">查找name=gender的所有節(jié)點</button></div>
		<div><button id="btn04">查找#city下所有l(wèi)i節(jié)點</button></div>
		<div><button id="btn05">查找#city下的所有子節(jié)點</button></div>
		<div><button id="btn06">返回#phone的第一個子節(jié)點</button></div>
		<div><button id="btn07">返回#bj的父節(jié)點</button></div>
		<div><button id="btn08">返回#android的前一個兄弟節(jié)點</button></div>
		<div><button id="btn09">返回#username的value屬性值</button></div>
		<div><button id="btn10">設(shè)置#username的value屬性值</button></div>
		<div><button id="btn11">返回#bj的文本值</button></div>
		
	</div>
	
</body>
</html>

五、圖片切換的練習(xí)

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <!--難點：
    	1.把圖片的路徑存在一個數(shù)組當(dāng)中
    	首先獲取到圖片數(shù)組的第一個元素，否則用document.getElementsByTagName獲取到的是一個數(shù)組。
    	因為只能操作元素，不能操作數(shù)組。
    	var imgArr=["img/","img/","img/"];
    	2.通過用img.src的屬性值來修改要顯示的圖片
    	var index
    	index++;/index--;
    	img.src=imgAtrr[index];
    	3.靈活設(shè)置當(dāng)前圖片的總張數(shù)，和當(dāng)前顯示的第幾張圖片數(shù)
    	獲取到id為info的元素
    	info.innerHTML=做一個拼串，可以靈活顯示。
    	
    	開發(fā)思路：
    	功能要綁定函數(shù)，什么時候開要始功能
    	要綁定的按鈕
    -->
    <style>
       *{
       	margin:0px;
       	padding:0px;
       }
       #outer{
       	width:500px;
       	
       	margin:50px auto;
       	padding:10px;
       	background-color: greenyellow;
       	/*設(shè)置內(nèi)斂樣式文本的居中*/
        text-align: center;
        background-size:cover;
        
       }
       img{
       	width:500px;
       	height:400px;
       	
       }
    </style>
    <script type="text/javascript"> 
    	
    	 window.onload=function(){
    	 
    	 	//獲取img標(biāo)簽
    	// 	var img=document.getElementsByTagName("img");//這樣獲取到的是數(shù)組
    	//哪怕只有一個元素，上面這種寫法獲取到的也是數(shù)組
    	 	
    	 	//是要獲取數(shù)組的元素，而不是數(shù)組。
    	 	//下面這樣的寫法獲取到的就是元素
    	 	var img=document.getElementsByTagName("img")[0];
    	 	//創(chuàng)建一個數(shù)組，用來保存圖片路徑
    	 	var imgArr=["img/0vfvn55rfey0vfvn55rfey.jpg","img/011b915f101bf8a801206621f7be55.jpg@3000w_1l_0o_100sh.jpg","img/u=1654698843,1250978122&fm=253&fmt=auto&app=120&f=JPEG.webp"
    	 	,"img/u=3784956362,763614624&fm=253&fmt=auto&app=120&f=JPEG.webp","img/u=4076188782,4102717595&fm=253&fmt=auto&app=138&f=JPEG.webp","img/u=2419341326,3742894269&fm=253&fmt=auto&app=120&f=JPEG.webp"];
    	   //創(chuàng)建一個變量，來保存當(dāng)前正在顯示的圖片的索引。
    	   var index=0;
    	   
    	   //設(shè)置提示文字
    	   //獲取id為info的標(biāo)簽
    	   var info=document.getElementById("info");
    	   
    	   	/*點擊按鈕，切換圖片*/
    	 	//獲取兩個按鈕
    	 	var prev=document.getElementById("prev");
    	 	var next=document.getElementById("next");
    	 	//分別為兩個按鈕綁定單擊響應(yīng)函數(shù)
    	 	prev.onclick=function(){
    	 		if(index>0){
    	 			 index--;
    	 		}else{
    	 			index=imgArr.length-1;
    	 		}
             
              img.src=imgArr[index];
              每次點擊按鈕的時候，都重新設(shè)置信息
              info.innerHTML="一共有"+imgArr.length+"張圖片，現(xiàn)在是第"+(index+1)+"張圖片";
    	 	};
    	 	next.onclick=function(){
    	 		
    	 		//切換圖片就是修改imgd的src屬性
    	 		//修改的的方法就是屬性名=屬性值
    	 		if(index<imgArr.length-1){
    	 			index++;
    	 		}else{
    	 			index=0;
    	 		}
    	 	
    	 		img.src=imgArr[index];
    	 		//每次點擊按鈕的時候，都重新設(shè)置信息
    	 		info.innerHTML="一共有"+imgArr.length+"張圖片，現(xiàn)在是第"+(index+1)+"張圖片";
    	 		
    	 	};
    	 	//切換圖片就是修改img標(biāo)簽的src屬性
    	 	
    	 };
  
    </script>
   
</head>
<body>
	<div id="outer">
		<p id="info"></p>
		<img src="img/011b915f101bf8a801206621f7be55.jpg@3000w_1l_0o_100sh.jpg" alt="貓">
		<button id="prev">上一張</button>
		<button id="next">下一張</button>
	</div>	
</body>
</html>

六、全選練習(xí)

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		var items=document.getElementsByName("items");
    		//全選/全不選按鈕
    		var checkedAllBox=document.getElementById("checkedAllBox");
    		/*全選按鈕
    		 -點擊按鈕以后，四個多選框全都被選中*/
    		var checkedAllBtn=document.getElementById("checkedAllBtn");
    		checkedAllBtn.onclick=function(){
    			//獲取四個多選框items
    			
    		
    			//設(shè)置四個多選框變成選中狀態(tài)
    			//通過多選框的checked屬性可以來獲取或設(shè)置多選框的選中狀態(tài)
    			for(var i=0;i<items.length;i++){
    				items[i].checked=true;
    			}
    			
    			checkedAllBox.checked=true;
    			
    		};
    		var checkedNoBtn=document.getElementById("checkedNoBtn");
    		checkedNoBtn.onclick=function(){

    			//設(shè)置四個多選框變成不選中狀態(tài)
    			for(var i=0;i<items.length;i++){
    				items[i].checked=false;
    			}
    			
    			checkedAllBox.checked=false;
    		};
    		//反選
    		var checkedRevBtn=document.getElementById("checkedRevBtn");
    		checkedRevBtn.onclick=function(){
    				//將checkedAllBox設(shè)置為選中狀態(tài)
    			checkedAllBox.checked=true;
    			for(var i=0;i<items.length;i++){
    				items[i].checked=!items[i].checked;
    				//判斷四個多選框是否全選
    	   			//只要有一個沒選中就不是
    	   			if(!items[i].checked){
    	   				//一旦進(jìn)入判斷，則證明不是全選狀態(tài)
    	   				//將checkedAllBox設(shè)置為沒選中狀態(tài)
    	   				checkedAllBox.checked=false;
    	   				
    	   			}
    			}
    			//在反選時也需要判斷四個多選框是否全都選中
    		
    			
    		}; 
    		/*提交按鈕：
    		 點擊按鈕之后，將所有選中的多選框彈出*/
    		var sendBtn=document.getElementById("sendBtn");
    		sendBtn.onclick=function(){
    			//遍歷items
    			for(var i=0;i<items.length;i++){
    				
    				if(items[i].checked){
    					alert(items[i].value);
    				}
    			}
    		};
    		//全選/全不選
    		//當(dāng)它選中時候,其余的也選中，當(dāng)它取消時其余的也取消
    	
    		checkedAllBox.onclick=function(){
    			//this===checkedAllBox
    			//在事件的響應(yīng)函數(shù)中，響應(yīng)函數(shù)是給誰綁定的this就是誰
    			for(var i=0;i<items.length;i++){
    				items[i].checked=this.checked;
    			}
    		};
    
    	   //6.items
    	   /*如果四個多選框都選中，則checkedAllBox也可以選中
    	    如果四個多選框都沒選中，則checkedBox也不應(yīng)該選中*/
    	   for(var i=0;i<items.length;i++){
    	   	items[i].onclick=function(){
    	   		//將checkedAllBox設(shè)置為選中狀態(tài)
    	   		checkedAllBox.checked=true;
    	   		//判斷四個多選框是否全選
    	   		for(var j=0;j<items.length;j++){
    	   			//判斷四個多選框是否全選
    	   			//只要有一個沒選中就不是
    	   			if(!items[j].checked){
    	   				//一旦進(jìn)入判斷，則證明不是全選狀態(tài)
    	   				//將checkedAllBox設(shè)置為沒選中狀態(tài)
    	   				checkedAllBox.checked=false;
    	   				//一旦進(jìn)入判斷，則已經(jīng)得出結(jié)果，不用再繼續(xù)執(zhí)行循環(huán)
    	   				break;
    	   			}
    	   		}
    	   	};
    	   }
    	
    	};
  
    </script>
   
</head>
<body>
	<form method="post" action="">
		你愛好的運(yùn)動是？<input type="checkbox"  id="checkedAllBox"/>全選/全不選
		<br />
		<input type="checkbox" name="items" value="足球"/>足球
		<input type="checkbox" name="items" value="籃球"/>籃球
		<input type="checkbox" name="items" value="羽毛球"/>羽毛球
		<input type="checkbox" name="items" value="乒乓球"/>乒乓球
		<br />
		<input type="button"  id="checkedAllBtn" value="全  選"/>
		<input type="button"  id="checkedNoBtn" value="全不選"/>
		<input type="button"  id="checkedRevBtn" value="反選"/>
		<input type="button"  id="sendBtn" value="提交"/>
	</form>
</body>
</html>

七、DOM查詢的剩余方法

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		/*document的屬性
    		 -body
    		 	-寫法一：document.body
    		 	-寫法二：document.getElementsByTagName("body")[0]
    		 -documentElement
    		 	-document.documentElement保存的是html根標(biāo)簽
    		 -all
    		 	-寫法一：document.all
    		 	-寫法二：document.getElementsByTagName("*")
    		 document.getElementsByClassName()  不支持IE8及以下
    		 document.querySelector()     只查第一個    支持IE8及以下
    		 document.querySelectorAll()  即便有多個，也會封裝到數(shù)組中返回 支持IE8及以下
    		 
    		 * 
    		 * */
    		//獲取body標(biāo)簽
    		//不寫[0]獲取到的是一個數(shù)組，因為<body>標(biāo)簽只有一個，所以寫[0]
    		//方法一
    		//var body=document.getElementsByTagName("body")[0];
    		/*方法二：
    		 * 在document中有一個屬性body,它保存的是body的引用
    		 */
    		var body=document.body;//想要獲取body，可以直接document.body
    		//documentElement 文本元素
    		//document.documentElement保存的是html根標(biāo)簽
    		var html=document.documentElement;  //html是根標(biāo)簽
    		console.log(html);
    		/*document.all代表的是頁面所有的元素(標(biāo)簽)*/
    		//方法一（更簡單）
    		var all=document.all;
    		//console.log(all);   //undefined
    		//console.log(typeof all);   //undefined
    		console.log(all.length);    //7
    		for(var i=0;i<all.length;i++){
    			console.log(all[i]);
    		}
    		/* [object HTMLHtmlElement]
    		 * [object HTMLHeadElement]
    		 * [object HTMLMetaElement]
    		 * [object HTMLTitleElement]
    		 * [object HTMLStyleElement]
    		 * [object HTMLScriptElement]
    		 * [object HTMLBodyElement]
    		 */
    		//方法二
    		all=document.getElementsByTagName("*"); *表示所有元素
    		console.log(all.length);    //7
    		console.log(all);            //[object HTMLCollection]
    		
    		/*根據(jù)元素的class屬性值查詢一組元素節(jié)點對象
    		 * document.getElementsByClassName()可以根據(jù)class屬性值獲取一組元素節(jié)點對象
    		 * 但是該方法不支持IE8及以下的瀏覽器
    		 */
    		var box1=document.getElementsByClassName("box1");
    		console.log(box1.length);//1
    		
    		var div=document.getElementsByTagName("div");
    		console.log(div.length);//3
    		
    		//獲取class為box1中的所有div
    		//.box1 div
    		/*document.querySelector()這個方法是很強(qiáng)強(qiáng)大的
    		 需要一個選擇器的字符串作為參數(shù)，可以根據(jù)一個CSS選擇器來查詢你一個元素節(jié)點對象
    		 雖然IE8中沒有g(shù)etElementsByClassName()，但是可以使用querySelector()代替
    		 這個方法很靈活，也可以根據(jù)id，標(biāo)簽名來查詢
    		 使用該方法總會返回唯一的一個元素，如果滿足條件的元素有多個，那么它只會返回第一個
    		 */
    		var div=document.querySelector(".box1 div");
    		console.log(div.length);
    		console.log(div);                 //[object HTMLDivElement]
    		console.log(div.innerHTML);  //我是box1中的div
    		
    		var box1=document.querySelector(".box1");
    		console.log(box1);    //[object HTMLDivElement]
    		console.log(box1.innerHTML); 
    		/*我是第一個box1
	         	<div>我是box1中的div</div>*/
	         	//必須寫.  .box1,否則獲取的長度為0
	         	/*document.querySelectorAll()
	         	 * 該方法和querySelector()用法類似，不同的是它會將符合條件的元素封裝到一個數(shù)組中返回
	         	 * document.querySelectorAll()查詢到的是多個
	         	 * document.querySelector()查詢到的是一個
	         	 */
    		var box1=document.querySelectorAll(".box1");  //支持IE8以上的瀏覽器
    		console.log(box1.length); //3
    		console.log(box1);   //[object NodeList]
    		
    		var box2=document.querySelectorAll("#box2");  //支持IE8以上的瀏覽器
    		console.log(box2.length); //1
    		console.log(box2);   //[object NodeList]
    		//document.querySelectorAll根據(jù)id查詢，只有唯一的一個，返回的也是數(shù)組
    		
    	};
    </script>
   
</head>
<body>
	<div class="box1">
		我是第一個box1
		<div>我是box1中的div</div>
	</div>
	<div class="box1">
		<div>我是box1中的div</div>
	</div>
	<div class="box1">
		<div>我是box1中的div</div>
	</div>
	<div id="box2">
		<div>我是box2中的div</div>
	</div>
</body>
</html>

八、DOM增刪改

getElementById() ???????返回帶有指定 ID 的元素。

getElementsByTagName() 返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點列表(集合/節(jié)點數(shù)組)。

getElementsByClassName() ?返回包含帶有指定類名的所有元素的節(jié)點列表。

appendChild() ???????????把新的子節(jié)點添加到指定節(jié)點。

removeChild() ???????????刪除子節(jié)點?????????

replaceChild() ???????????替換子節(jié)點。

insertBefore() ???????????在指定的子節(jié)點前面插入新的子節(jié)點。

createAttribute() ?????????創(chuàng)建屬性節(jié)點。

createElement() ?????????創(chuàng)建元素節(jié)點。

createTextNode()?????????創(chuàng)建文本節(jié)點。

getAttribute() ???????????返回指定的屬性值。

setAttribute() ???????????把指定屬性設(shè)置或修改為指定的值。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		
    		    var li=document.createElement("li");
    			//創(chuàng)建廣州節(jié)點文本
    			/*document.createTextNode();
    			 可以用來創(chuàng)建一個文本節(jié)點對象
    			 需要一個文本內(nèi)容作為參數(shù)，將會根據(jù)該內(nèi)容創(chuàng)建文本節(jié)點，并將新的節(jié)點返回*/
    			var gzText=document.createTextNode("廣州");
    			//將gzText設(shè)置li的子節(jié)點
    			/*appendChild()
    			 向一個父節(jié)點中添加一個新的子節(jié)點
    			 用法：父元素.appendChild(子節(jié)點)*/
    			/*先創(chuàng)建節(jié)點，再創(chuàng)建文本，然后拼在一塊兒*/
    			li.appendChild(gzText);
    		    //獲取id為city的節(jié)點
    			var city=document.getElementById("city");
    		    var bj=document.getElementById("bj");
    		
    		//創(chuàng)建一個“廣州”節(jié)點，添加到#city下
    		myClick("btn01",function(){
    			
    			// 創(chuàng)建廣州節(jié)點<li>廣州</li>
    			//創(chuàng)建li元素節(jié)點
    			/*document.createElement()
    	                         可以用于創(chuàng)建一個元素節(jié)點對象
    	                         它需要一個標(biāo)簽名作為參數(shù)，將會根據(jù)該標(biāo)簽名創(chuàng)建元素節(jié)點對象
    	                         并將創(chuàng)建好的對象作為返回值返回
    	         * */
    			
    		    //將廣州添加到city下
    		    city.appendChild(li);
    			
    		});
    		
    		//將”廣州“節(jié)點添加到#bj前面
    		myClick("btn02",function(){
    			
    			/*insertBefore()在指定的子節(jié)點前面插入新的子節(jié)點，所有是父節(jié)點來調(diào)用
    			 語法：
    			 父節(jié)點.insertBefore(新節(jié)點,舊節(jié)點)*/
    			city.insertBefore(li,bj);  //新節(jié)點在前面，舊節(jié)點在后面
    		});
    		
    		//使用”廣州“節(jié)點替換北京節(jié)點
    		myClick("btn03",function(){
    			/*replaceChild()
    			 可以使用指定的子節(jié)點替換已有的子節(jié)點
    			 語法：
    			 父節(jié)點.replaceChild(新節(jié)點,舊節(jié)點)*/
    			city.replaceChild(li,bj);
    		});
    		
    		//刪除北京節(jié)點
    		myClick("btn04",function(){
    			/*removeChild()可以刪除一個子節(jié)點
    			 語法：父節(jié)點.removeChild(子節(jié)點)*/
    		//	city.removeChild(bj);  //這是知道父元素是什么的情況
    			
    			//如果不知道bj的父節(jié)點是什么,這種方式更方便簡單一點兒
    			bj.parentNode.removeChild(bj);
  
    		});
    		
    		//讀取#city內(nèi)的HTML代碼
    		myClick("btn05",function(){
    			alert(city.innerHTML);
    		});
    		
    		//設(shè)置#bj內(nèi)的HTML代碼
    		myClick("btn06",function(){
    			bj.innerHTML="海淀";
    		});
    		
    		myClick("btn07",function(){
    			//向city中添加廣州，在原來的基礎(chǔ)上增加廣州
    	//		city.innerHTML+="<li>廣州</li>";
    			/*使用innerHTML 也可以完成DOM的增刪改的相關(guān)操作
    			 這個操作的本質(zhì)是將之前的內(nèi)容都刪了，然后將增加廣州之后的內(nèi)容（都是新的）再
    			 全部寫到<city>里面，如果舊的綁定事件了，這么一操作就都沒有了
    			 不建議使用
    			 
    			 上面那種寫法，舊的東西不改變，只是新增了”廣州“這個新的
    			 
    			 一般我們會兩種方式結(jié)合使用
    			 * */
    			//創(chuàng)建一個li
    			var li=document.createElement("li");
    			//向li中設(shè)置文本
    			li.innerHTML="廣州";
    			//將li添加到city中
    			city.appendChild(li);
    		});
    		//為所有的獲取按鈕和綁定函數(shù)寫一個可以共用的方法
    		function myClick(idStr,fun){
    			var btn=document.getElementById(idStr);
    			btn.onclick=fun;
    		}
    	};
    </script>
   
</head>
<body>
	<div class="inner">
			<p>你喜歡哪個城市？</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li >上海</li>
				<li >東京</li>
				<li >首爾</li>
			</ul>
	</div>
	<button id="btn01">創(chuàng)建一個“廣州”節(jié)點添加到#city下</button>
	<button id="btn02">將“廣州”節(jié)點插入到#bj前面</button>
	<button id="btn03">使用“廣州”節(jié)點替換#bj節(jié)點</button>
	<button id="btn04">刪除#bj節(jié)點</button>
	<button id="btn05">讀取#city內(nèi)的HTML代碼</button>
	<button id="btn06">設(shè)置#bj內(nèi)的HTML代碼</button>
	<button id="btn07">創(chuàng)建一個“廣州”節(jié)點添加到#city下</button>
</body>
</html>

九、添加刪除記錄-刪除、添加、修改

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    	#employeeTable{
    		border:1px solid black;	
    		margin:0 auto;
    	}
    	td,th{
    		border:1px solid black;	
    		cellspacing:0;
    	}
    	#formDiv{
    		border:1px solid black;	
    		text-align: center;
    		width:300px;
    		height:300px;
    		margin:10px auto;	
    	}
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		/*點擊超鏈接。刪除一個員工的信息*/
    		//獲取所有的超鏈接
    		/*刪除tr的響應(yīng)函數(shù)*/
    		function delA(){
    			var allA=document.getElementsByTagName("a");  //得到的是一個數(shù)組
    		//為每個超鏈接都綁定一個單擊響應(yīng)函數(shù)
    		for(var i=0;i<allA.length;i++){
    			allA[i].onclick=function(){
    				
    				//點擊超鏈接之后，刪除超鏈接所在的那一行
    				//this代表的就是a,這里我們點擊哪個超鏈接this就是誰
    				//獲取當(dāng)前tr
    				var tr=this.parentNode.parentNode;
    				//獲取要刪除的員工的名字
    			//方法一	var name=tr.getElementsByTagName("td")[0].innerHTML;
    			    var name=tr.children[0].innerHTML;
    				//刪除之前彈出提示框
    				/*confirm()用于彈出一個帶有確認(rèn)和取消按鈕的提示框
    				 需要一個字符串作為參數(shù)，該字符串將會作為提示文字顯示出來
    				 如果用戶點擊確認(rèn)則會fanhuitrue，如果點擊取消則返回false*/
    				var flag=confirm("確認(rèn)刪除"+name+"嗎?");
    				if(flag){
    					//刪除tr
    				    tr.parentNode.removeChild(tr);
    				
    				}
    				/*點擊超鏈接以后，超鏈接會跳轉(zhuǎn)頁面，這個是超鏈接的默認(rèn)行為
    				 此時我們不希望出現(xiàn)默認(rèn)行為，可以通過在響應(yīng)函數(shù)的最后return false來取消默認(rèn)行為*/
    				return false;  //取消跳轉(zhuǎn)的默認(rèn)行為
    			};  
    		};
    		}
    		
    		/*添加員工功能；
    		 -點擊按鈕以后，將員工的信息添加到表格中*/
    		//為提交按鈕，綁定一個單擊響應(yīng)函數(shù)
    		var addEmpButton=document.getElementById("addEmpButton");
    		addEmpButton.onclick=function(){
    			//獲取用戶添加的員工信息
    			//獲取員工的名字
    			//文本框的內(nèi)容就是文本框的value屬性
    			var name=document.getElementById("empName").value;
    	//		alert(name);//aaa
    			//獲取員工的郵箱
    			var email=document.getElementById("email").value;
    			//獲得員工的薪資
    			var salary=document.getElementById("salary").value;
    			
    			//創(chuàng)建一個a元素
    			var a=document.createElement("a");
    			//需要將獲取到的信息保存到tr中
    			//創(chuàng)建一個tr
    			var tr=document.createElement("tr");
    			//創(chuàng)建4個td
    			var nameTd=document.createElement("td");
    			var emailTd=document.createElement("td");
    			var salaryTd=document.createElement("td");
    			var aTd=document.createElement("td");
    			
    			//創(chuàng)建文本節(jié)點
    			var nameText=document.createTextNode(name);
    			var emailText=document.createTextNode(email);
    			var salaryText=document.createTextNode(salary);
    			var delText=document.createTextNode("Delete");
    			
    			//把文本節(jié)點添加到td中
    			nameTd.appendChild(nameText);
    			emailTd.appendChild(emailText);
    			salaryTd.appendChild(salaryText);
    			
    			//向a中添加文本
    			a.appendChild(delText);
    			//將a添加到td中
    			aTd.appendChild(a);
    			
    			//把td添加到tr中
    			tr.appendChild(nameTd);
    			tr.appendChild(emailTd);
    			tr.appendChild(salaryTd);
    			tr.appendChild(aTd);
    			
    			//向a中添加href屬性
    			a.href="javascript:;"
    			//為新添加的a再綁定一次單擊響應(yīng)函數(shù)
    			a.onclick=delA;
    			
    			
    			//獲取table
    			var employeeTable=document.getElementById("employeeTable");
    			//獲取employeeTable中的tbody
    			var tbody=employeeTable.getElementsByTagName("tbody")[0];
    			//將tr添加到tbody中
    			tbody.appendChild(tr);
    			
    		};
    		
    	};
    </script>
   
</head>
<body>
	<table id="employeeTable" cellspacing="0">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<!--
                              也可以通過<a href="javascript:;"></a>取消默認(rèn)的跳轉(zhuǎn)行為
            -->
			<td><a href="javascript:;">Delete</a></td>
		</tr>
	</table>
	<div id="formDiv">
		<h4>添加新員工</h4>
		<table>
			<tr>
				<td class="word">name:</td>
				<td class="inp">
					<input type="text" name="empName" id="empName">
				</td>
			</tr>
			<tr>
				<td class="word">email:</td>
				<td class="inp">
					<input type="text" name="email" id="email">
				</td>
			</tr>
			<tr>
				<td class="word">salary:</td>
				<td class="inp">
					<input type="text" name="salary" id="salary">
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

上述功能的另一種實現(xiàn)方式文章來源地址http://www.zghlxwxcb.cn/news/detail-805992.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    	#employeeTable{
    		border:1px solid black;	
    		margin:0 auto;
    	}
    	td,th{
    		border:1px solid black;	
    		cellspacing:0;
    	}
    	#formDiv{
    		border:1px solid black;	
    		text-align: center;
    		width:300px;
    		height:300px;
    		margin:10px auto;	
    	}
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		/*點擊超鏈接。刪除一個員工的信息*/
    		//獲取所有的超鏈接
    		/*刪除tr的響應(yīng)函數(shù)*/
    		function delA(){
    			var allA=document.getElementsByTagName("a");  //得到的是一個數(shù)組
    		//為每個超鏈接都綁定一個單擊響應(yīng)函數(shù)
    		for(var i=0;i<allA.length;i++){
    			allA[i].onclick=function(){
    				
    				//點擊超鏈接之后，刪除超鏈接所在的那一行
    				//this代表的就是a,這里我們點擊哪個超鏈接this就是誰
    				//獲取當(dāng)前tr
    				var tr=this.parentNode.parentNode;
    				//獲取要刪除的員工的名字
    			//方法一	var name=tr.getElementsByTagName("td")[0].innerHTML;
    			    var name=tr.children[0].innerHTML;
    				//刪除之前彈出提示框
    				/*confirm()用于彈出一個帶有確認(rèn)和取消按鈕的提示框
    				 需要一個字符串作為參數(shù)，該字符串將會作為提示文字顯示出來
    				 如果用戶點擊確認(rèn)則會fanhuitrue，如果點擊取消則返回false*/
    				var flag=confirm("確認(rèn)刪除"+name+"嗎?");
    				if(flag){
    					//刪除tr
    				    tr.parentNode.removeChild(tr);
    				
    				}
    				/*點擊超鏈接以后，超鏈接會跳轉(zhuǎn)頁面，這個是超鏈接的默認(rèn)行為
    				 此時我們不希望出現(xiàn)默認(rèn)行為，可以通過在響應(yīng)函數(shù)的最后return false來取消默認(rèn)行為*/
    				return false;  //取消跳轉(zhuǎn)的默認(rèn)行為
    			};  
    		};
    		}
    		
    		/*添加員工功能；
    		 -點擊按鈕以后，將員工的信息添加到表格中*/
    		//為提交按鈕，綁定一個單擊響應(yīng)函數(shù)
    		var addEmpButton=document.getElementById("addEmpButton");
    		addEmpButton.onclick=function(){
    			//獲取用戶添加的員工信息
    			//獲取員工的名字
    			//文本框的內(nèi)容就是文本框的value屬性
    			var name=document.getElementById("empName").value;
    	//		alert(name);//aaa
    			//獲取員工的郵箱
    			var email=document.getElementById("email").value;
    			//獲得員工的薪資
    			var salary=document.getElementById("salary").value;
    			
    			//需要將獲取到的信息保存到tr中
    			//創(chuàng)建一個tr
    			var tr=document.createElement("tr");
    			
    			//設(shè)置tr中的內(nèi)容
    			tr.innerHTML="<td>"+name+"</td>"+
    							"<td>"+email+"</td>"+
    							"<td>"+salary+"</td>"+
    							"<td><a href='javascript:;'>Delete</a></td>";
    			a=tr.getElementsByTagName("a")[0];
    			a.onclick=delA;
    			
    			//獲取table
    			var employeeTable=document.getElementById("employeeTable");
    			//獲取employeeTable中的tbody
    			var tbody=employeeTable.getElementsByTagName("tbody")[0];
    			//將tr添加到tbody中
    			tbody.appendChild(tr);
    		/*這樣寫也可以，不過不推薦	
    		 * tbody.innerHTML+="<tr>"+
    							"<td>"+name+"</td>"+
    							"<td>"+email+"</td>"+
    							"<td>"+salary+"</td>"+
    							"<td><a href='javascript:;'>Delete</a></td>"
    							+"</tr>";
    		*/
    		};
    		
    	};
    </script>
   
</head>
<body>
	<table id="employeeTable" cellspacing="0">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<!--
                              也可以通過<a href="javascript:;"></a>取消默認(rèn)的跳轉(zhuǎn)行為
            -->
			<td><a href="javascript:;">Delete</a></td>
		</tr>
	</table>
	<div id="formDiv">
		<h4>添加新員工</h4>
		<table>
			<tr>
				<td class="word">name:</td>
				<td class="inp">
					<input type="text" name="empName" id="empName">
				</td>
			</tr>
			<tr>
				<td class="word">email:</td>
				<td class="inp">
					<input type="text" name="email" id="email">
				</td>
			</tr>
			<tr>
				<td class="word">salary:</td>
				<td class="inp">
					<input type="text" name="salary" id="salary">
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

到了這里，關(guān)于web前端javaScript筆記——（11）DOM的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！