JavaEE學習日誌持續更新----> 必看！JavaEE學習路線（文章總彙）

JavaEE學習日誌（四十三）

DOM對象

DOM對象

DOM對象介紹

JS中對象 Document Object Module

作用：整個HTML頁面，變成對象document，可以使用對象中的方法或者屬性。（對象是自動創建的，瀏覽器打開後，對象建立完成）

document對象方法

獲取
1. getElementById("id屬性值") 通過id屬性值獲取標籤，結果是標籤的對象
2. getElementsTagName("標籤名")通過標籤的名字來獲取，返回的不是一個對象，返回的是數組
3. getElementsByClassName("class屬性值")通過標籤的class屬性獲取，返回的不是一個對象，返回的是數組
4. getElementsByName("name屬性值")通過標籤的name屬性獲取，返回的不是一個對象，返回的是數組
創建標籤
createElement("標籤名") 創建指定名字的標籤
對象屬性

innerHTML 設置的是標籤體的內容，如標籤體，內容標籤有效
innerText 設置的是標籤體的內容，如標籤體，內容標籤無效（純文本）

操作標籤屬性方法

getAttribute("屬性名") 返回指定的屬性的值
setAttribute("屬性名","屬性值") 設置屬性和屬性值

節點相關

appendChild(子節點) 追加子標籤
hasChildNodes() 是否有子節點
removeChild(節點對象) 刪除子節點
replaceChild(新節點,舊節點)替換子標籤，剪切效果
insertBefore(新節點,老節點)在節點前,添加節點

DOM對象練習

練習一：`getElementById`

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
    <meta  charset="UTF-8"/>
  </head>
  
  <body>
  	   <form name="form1" action="test.html" method="post" >
  	   	  <input type="text" name="username" value="傳智播客10週年_1"  id="tid"  onchange="" >
		  		<input type="button" name="ok" value="保存1"/>
  	   </form>
  </body>

  
  <script type="text/javascript">
    //輸出 <input type="text" name="username" value="傳智播客10週年_1"  id="tid" >標籤value屬性的值
    var tid = document.getElementById("tid");
    alert(tid.value);
   
		//輸出 <input type="text" name="username" value="傳智播客10週年_1"  id="tid" >標籤type屬性的值
		alert(tid.type);
  </script>

</html>

練習二：`getElementByTagName`

注意：下拉框中的某option被選中時，該option的selected屬性值爲true；未被選中時，selected屬性值爲false。（默認選中時，selected=“selected”）

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>

    <meta charset="UTF-8">
  </head>
  <body>
	   <form name="form1" action="test.html" method="post" >
  	   	  <input type="text" name="tname" value="傳智播客5週年_1"  id="tid_1"  ><br>
				  <input type="text" name="tname" value="傳智播客5週年_2"  id="tid_2"  ><br>
				  <input type="text" name="tname" value="傳智播客5週年_3"  id="tid_3"  ><br>
				  <input type="button" name="ok" value="保存1"/>
  	 </form>
	   
	   <select name="edu" id="edu">
	   	  <option value="博士">博士^^^^^</option>
			  <option value="碩士" selected="selected">碩士^^^^^</option>
			  <option value="本科" >本科^^^^^</option>
			  <option value="幼兒園">幼兒園^^^^^</option>
	   </select>
	   
	   <select name="job" id="job" >
	   	  <option value="美容">美容^^^^^</option>
			  <option value="IT">IT^^^^^</option>
			  <option value="程序員">程序員^^^^^</option>
			  <option value="建築師">建築師^^^^^</option>
	   </select>
	   <input type="button" value="打印option選中的值" onclick="showSelect()" />
  </body>
  
  <script  type="text/javascript">
    //獲取所有的input元素,返回值是數組
    var inputs = document.getElementsByTagName("input");
   // alert(inputs.length);
    //遍歷value的值
    for(var i=0; i<inputs.length;i++){
    	//遍歷數組,inputs[i] 表示數組中的元素,就是input標籤對象
    	//alert(inputs[i].value);
    }
    
		//輸出type="text"中 value屬性的值 不包含按鈕(button)
		for(var i=0; i<inputs.length;i++){
    	//遍歷數組,inputs[i] 表示數組中的元素,就是input標籤對象
    	//判斷,input標籤對象的屬性type是不是text
    	if(inputs[i].type=="text"){
    		// alert(inputs[i].value);
    	}
    }
			
    //輸出所有下拉選 id="edu"中option標籤中 value屬性的值
    //獲取需要的標籤對象, document表示整個文檔對象
    //通過option的父標籤找
    var edu = document.getElementById("edu");
    //edu找他的所有子標籤option
    var options = edu.getElementsByTagName("option");
    for (var i=0;i<options.length;i++) {
    	//alert(options[i].value);
    }
    
    
  	//輸出所有下拉選select的option標籤中value的值
  	var allOptions = document.getElementsByTagName("option");
  	for (var i=0;i<allOptions.length;i++) {
  		//alert(allOptions[i].value);
  	}
  	//輸出選中的值
  	function showSelect(){
  		//表單: 下拉菜單 屬性 selected="selected"
  		
  		var options = document.getElementsByTagName("option");
  		for(var i=0; i < options.length;i++){
  			//selected="selected",在DOM對象,屬性值,被選中了是true
  			if(options[i].selected){
  				alert(options[i].value);
  			}
  		}
  	}
  </script>
</html>

練習三：`getElementByName`

注意：

可以使用標籤對象的onchange等屬性，給標籤添加事件
示例：tname[i].οnchange=function(){}
上述示例的function中，如果需要使用標籤對象，則必須使用this關鍵字來代替，因爲在頁面加載結束之後，for循環中的i就死亡了，在事件觸發時，function中，如果有tname[i]，則會報錯，事件不會觸發。

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>

    <meta charset="UTF-8">
  </head>
  
  <body>
  	   <form name="form1" action="test.html" method="post" >
  	   	  <input type="text" name="tname" value="傳智播客10週年_1"  id="tid_1"  ><br>
				  <input type="text" name="tname" value="傳智播客10週年_2"  id="tid_2"  ><br>
				  <input type="text" name="tname" value="傳智播客10週年_3"  id="tid_3"  ><br>
				  <input type="button" name="ok" value="保存1"/>
  	   </form>
  </body>
  
  <script type="text/javascript">
   //通過元素的name屬性獲取所有元素的引用  name="tname"
   var tname = document.getElementsByName("tname");
   //測試該數據的長度
   //alert(tname.length);
   //遍歷元素,輸出所有value屬性的值
   for (var i=0;i<tname.length;i++) {
   	// alert(tname[i].value);
   }
   
   //爲每個文本框(<input type="text">)增加chanage事件,當值改變時,輸出改變的值
   for (var i=0;i<tname.length;i++) {
      //遍歷中,爲文本框綁定事件
      //當事件發生的時候,監聽器,自動調用匿名函數
      tname[i].onchange=function(){
      	/*
      	 * 循環結束,HTML頁面加載完成
      	 * 修改文本框的值,事件onchange觸發,調用匿名函數
      	 * for結束了,變量i已經死了
      	 * 
      	 * tname[i]是找到一個input標籤對象,找到一個東西,可以替換對象
      	 * Java, this表示當前對象
      	 */
      	alert(this.value);
      }
   }
  </script>
  
</html>

練習四：`getAttribute`

注意：標籤對象.value屬性值,適用於表單標籤；其他標籤: 使用DOM對象的方法 getAttribute("value")

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>

    <meta charset="UTF-8">
  </head>
  
  <body>
  	   
	   <form name="form1" action="test.html" method="post" >
  	   	  <input type="text" name="tname" value="傳智播客5週年_1"  id="tid_1"  ><br>
				  <input type="text" name="tname" value="傳智播客5週年_2"  id="tid_2"  ><br>
				  <input type="text" name="tname" value="傳智播客5週年_3"  id="tid_3"  ><br>
				  <input type="button" name="ok" value="保存1"/>
  	 </form>
	   
	  您喜歡的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
			 <li id="sh" value="shanghai">上海</li>
			 <li id="cq" value="chongqing">重慶</li>
	   </ul>
	  
	  您喜歡的遊戲:<br> 
	   <ul>
	   	 <li id="fk" value="fankong">反恐</li>
			 <li id="ms" value="moshou">魔獸</li>
			 <li id="xj" value="xingji">星際爭霸</li>
	   </ul>   
  </body>
  
  <script  type="text/javascript">
	  //<li id="xj" value="xingji">星際爭霸</li>節點的value屬性的值
	  var xj = document.getElementById("xj");
	  //標籤對象.value屬性值,適用於表單標籤
	  //其他標籤: 使用DOM對象的方法 getAttribute
		alert(xj.getAttribute("value"));
  </script>
</html>

練習五：`setAttribute`

注意：DOM對象的方法setAttribute(屬性名，屬性值),沒有的屬性，則添加；如果屬性存在,就是修改。

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
		<meta charset="UTF-8">
  </head>
  
  <body>
	   
	  您喜歡的城市:<br> 
	   <ul>
	   	 <li id="bj" value="beijing">北京</li>
			 <li id="sh" value="shanghai">上海</li>
			 <li id="cq" value="chongqing">重慶</li>
	   </ul>
	  
	  您喜歡的遊戲:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
			 <li id="ms" value="moshou">魔獸</li>
			 <li id="xj" value="xingji" >星際爭霸</li>
	   </ul>   
  </body>
  
  <script type="text/javascript">
      //給這個節點增加 name屬性 <li id="xj" value="xingji" name="xingjizhengba">星際爭霸</li>
	  	var xj = document.getElementById("xj");
	  	//DOM對象的方法setAttribute(屬性名，屬性值),沒有的屬性添加,如果屬性存在,就是修改
	  	xj.setAttribute("name","xingjizhengba");
  	  //測試
  	  alert(xj.getAttribute("name"));
	 
  </script>
</html>

練習六：`innerHTML`

注意：

當js寫在太前面，而導致js程序執行時，某個標籤沒有被讀取到，此時就需要把js的執行順序改爲整個頁面讀取完畢之後。添加windows對象的事件onload，並把js代碼放在其中即可。
向標籤中添加內容：
DOM對象的屬性 innerHTML,設置標籤體內容,標籤有效。
DOM對象的屬性 innerText,設置標籤體內容,屬性無論寫什麼,認爲是純文本。

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
		<meta charset="UTF-8">
  </head>
  <script type="text/javascript">
   /*
    *  程序在頁面加載完成後執行
    *  事件 onload,事件源是整個頁面
    *  BOM對象, window
    */
   //被事件監聽器,自動調用匿名函數
   window.onload = function(){
   		//在div層中插入 <h1>海馬</h1>
  	var city = document.getElementById("city");
  	//向標籤中添加內容  , DOM對象的屬性 innerHTML,設置標籤體內容,標籤有效
  	//city.innerHTML="<h1>海馬</h1>";

		
		//在div層中插入“海馬” 文本
		//DOM對象屬性 innerText,設置標籤體內容,屬性無論寫什麼,認爲是純文本
		city.innerText="<h1>海馬</h1>";
		

	  //讀取div的標籤體內容
	//  alert(city.innerHTML);
	 
	  //讀取div的標籤體文本內容
	  alert(city.innerText);
   }
  
	
  </script>
  <body>
  	  <div id="city">fff</div>
  	  
  </body>

</html>

練習七：`hasChildNodes`

注意：火狐、谷歌等瀏覽器，如果標籤中的空行，也算作空節點；IE瀏覽器則不算。

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
		<meta charset="UTF-8">
  </head>
  
  <body>
  	   
	   <form name="form1" action="test.html" method="post" >
  	      <input type="text" name="tname" value="傳智播客10週年_1"  id="tid_1"  ><br>
				  <input type="text" name="tname" value="傳智播客10週年_2"  id="tid_2"  ><br>
				  <input type="text" name="tname" value="傳智播客10週年_3"  id="tid_3"  ><br>
				  <input type="button" name="ok" value="保存1"/>
  	 </form>
	   
	   <select name="edu" id="edu">
	   	  <option value="博士">博士^^^^^</option>
			  <option value="碩士">碩士^^^^^</option>
			  <option value="本科" selected="selected" >本科^^^^^</option>
			  <option value="幼兒園">幼兒園^^^^^</option>
	   </select>
	   
	   
	   
	   <select name="job" id="job" >
	   	  <option value="美容">美容^^^^^</option>
			  <option value="IT">IT^^^^^</option>
			  <option value="程序員">程序員^^^^^</option>
			  <option value="建築師">建築師^^^^^</option>
	   </select>
	   
	   
	   
  </body>
  
  <script  type="text/javascript">
  	//查看id="edu"的節點是否含有子節點
  	var edu = document.getElementById("edu");
  	//DOM對象方法 hasChildNodes(),如果有返回true
  	alert(edu.hasChildNodes());
  	
  	
   	//查看id="tid_1"的節點是否含有子節點
   	var tid_1 = document.getElementById("tid_1");
   	alert(tid_1.hasChildNodes());
 
  </script>
</html>

練習八：`removeChild`

注意：自己刪除自己，有些瀏覽器不支持，所以使用父節點刪除子節點

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
		<meta charset="UTF-8">
  </head>
  <body>
       <ul id="city">
		   	 <li id="bj" name="beijing">北京</li>
				 <li id="sh" name="shanghai">上海</li>
				 <li id="cq" name="chongqing">重慶</li>
		   </ul>
  </body>
  
  <script  type="text/javascript">
     	//刪除<ul id="city"> 下<li id="bj" name="beijing">北京</li>這個節點</ul>
      //獲取bj的父標籤
      var city = document.getElementById("city");
      //獲取北京節點
      var bj = document.getElementById("bj");
      //DOM對象的方法 removeChild()刪除子節點
      city.removeChild(bj);
   
	 		//獲取北京的父節點
	 		alert(bj.parentNode);
	 		
  </script>
</html>

練習九：`replaceChild`

注意：

自己不能替換自己，所以需要使用父節點來進行替換。
替換帶有剪切的效果

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
		<meta charset="UTF-8">
  </head>
  <body>
	  您喜歡的城市:<br> 
	   <ul id="city">
	   	 <li id="bj" value="beijing" onclick="fnChange()">北京</li>
			 <li id="sh" value="shanghai">上海</li>
			 <li id="cq" value="chongqing"> 重慶</li>
	   </ul>
	  
	  您喜歡的遊戲:<br> 
	   <ul>
	   	 <li id="fk" value="fankong">反恐精英</li>
			 <li id="ms" value="moshou">魔獸</li>
			 <li id="cq" value="chuanqi">傳奇</li>
	   </ul>   
  </body>
  
  <script type="text/javascript">
     	//點擊北京節點， 將被反恐節點替換
		function fnChange(){
			//獲取bj的父標籤
      var city = document.getElementById("city");
      //獲取北京節點
      var bj = document.getElementById("bj");
      //獲取反恐節點
      var fk = document.getElementById("fk");
      //DOM對象方法 replaceChild(新節點,舊節點)
      city.replaceChild(fk,bj);
		}
	
  </script>
</html>

練習十：`createElement`

在節點後邊添加標籤的步驟：

獲取父標籤
創建新標籤
給新標籤設置屬性
父標籤追加子節點

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
		<meta charset="UTF-8">
  </head>
  <body>
	   
	  您喜歡的城市:<br> 
	   <ul id="city">
	   	 <li id="bj" value="beijing">北京</li>
			 <li id="sh" value="shanghai">上海</li>
			 <li id="cq" value="chongqing">重慶</li>
	   </ul>
	  
	  您喜歡的遊戲:<br> 
	   <ul>
	   	 <li id="fk" value="fangkong">反恐</li>
			 <li id="ms" value="moshou">魔獸</li>
			 <li id="xj" value="xingji">星際爭霸</li>
	   </ul>
  </body>
  <script  type="text/javascript">
     //增加城市節點 <li id="tj" v="tianjin">天津</li>放置到city下
     	 //獲取bj的父標籤
      var city = document.getElementById("city");
       //創建標籤對象,返回此創建好的標籤對象
      var tjLi = document.createElement("li");
      //設置標籤的屬性
      tjLi.setAttribute("id","tj");
      tjLi.setAttribute("v","tianjin");
      tjLi.innerHTML="天津";
      //DOM對象方法 appendChild追加子節點
      city.appendChild(tjLi);
    
  </script>
</html>

練習十一：`insertBefore`

在節點前邊加

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
		<meta charset="UTF-8">
  </head>
  <body>
       <ul id="city">
		   	 <li id="bj" name="beijing">北京</li>
				 <li id="sh" name="shanghai">上海</li>
				 <li id="cq" name="chongqing">重慶</li>
		   </ul>
  </body>
  
  <script  type="text/javascript">
  	// 在重慶前面插入新的節點 <li id="tj" name="tianjin">天津</li>
  	  var tjLi = document.createElement("li");
      //設置標籤的屬性
      tjLi.setAttribute("id","tj");
      tjLi.setAttribute("name","tianjin");
      tjLi.innerHTML="天津";
      
       //獲取bj的父標籤
      var city = document.getElementById("city");
      //獲取cq標籤
      var cq = document.getElementById("cq");
      //DOM對象的方法 insertBefore()在節點前,添加節點
      city.insertBefore(tjLi,cq);
  	
  </script>
</html>

JavaEE學習日誌(四十三): DOM對象

JavaEE學習日誌（四十三）

DOM對象

DOM對象介紹

DOM對象練習

練習一：`getElementById`

練習二：`getElementByTagName`

練習三：`getElementByName`

練習四：`getAttribute`

練習五：`setAttribute`

練習六：`innerHTML`

練習七：`hasChildNodes`

練習八：`removeChild`

練習九：`replaceChild`

練習十：`createElement`

練習十一：`insertBefore`

nginx負載均衡器的部署與配置

品優購項目筆記（十四）：微信支付

Mycat數據庫集羣中間件

品優購項目筆記（十三）：購物車解決方案

品優購項目筆記（十二）：用戶中心之cas單點登錄

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

JavaEE學習日誌(四十三): DOM對象

JavaEE學習日誌（四十三）

DOM對象

DOM對象介紹

DOM對象練習

練習一：getElementById

練習二：getElementByTagName

練習三：getElementByName

練習四：getAttribute

練習五：setAttribute

練習六：innerHTML

練習七：hasChildNodes

練習八：removeChild

練習九：replaceChild

練習十：createElement

練習十一：insertBefore

練習一：`getElementById`

練習二：`getElementByTagName`

練習三：`getElementByName`

練習四：`getAttribute`

練習五：`setAttribute`

練習六：`innerHTML`

練習七：`hasChildNodes`

練習八：`removeChild`

練習九：`replaceChild`

練習十：`createElement`

練習十一：`insertBefore`