(7)JavaScript DOM練習題

阿新 • • 發佈：2018-11-27

需求1：點選submit按鈕時檢查是否選擇type 若沒有選擇給出提示： “請選擇型別”；
檢查文字框是否有輸入（可以去除前後空格），若沒有輸入，則給出提示：“請輸入內容”；
若檢查都通過，則在相應的ul節點中新增對應的li節點
需求2：使包括新增的li都能響應onclick 事件：彈出li的文字值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type= 
"text/javascript">
	  
	  
	 
	  //需求： 點選submit按鈕時  檢查是否選擇type  若沒有選擇給出提示： “請選擇型別”；
	  //	  檢查文字框是否有輸入（可以去除前後空格）， 若沒有輸入，則給出提示：“請輸入內容”；
	  //	 若檢查都通過，則在相應的ul節點中新增對應的li節點
	  
	  //需求2：	使包括新增的li都能響應onclick 事件：彈出li的文字值。
	  window.onload = function()
	  {
	  	
	  	function showContent(liNode){
	  			alert("11^_^" 
 + liNode.firstChild.nodeValue);
	  		}
	  	
	  	
	  	var liNodes = document.getElementsByTagName("li");
	  	for(var i = 0; i < liNodes.length; i++){
	  		liNodes[i].onclick = function(){
	  			showContent(this);
	  		}
	  	}
	  	
	  //1.	獲取#submit 對應的按鈕submitBtn
	  var submit = document.getElementById 
("submit");
	  //2.	為submitBtn 新增onclick響應函式
	  //3.	在onclick 響應函式的結尾處新增return false 就可以取消提交按鈕的預設行為
	  submit.onclick = function () {
	  	
	  	//4.	檢查是否選擇type 若沒有選擇給出提示： “請選擇型別”
	  	//4.1	選擇所有的name=“type”  的節點types
		 var types = document.getElementsByName("type");
	  	//4.2	遍歷types， 檢查其是否有一個type的checked屬性存在， 就可說明
	  	//有一個type被選中了： 通過if（元素節點.屬性名） 來判斷某一個元素節點是否有該屬性
	  	var typeVal = null;
	  	for(var i = 0; i < types.length; i++){
	  		if(types[i].checked){
				typeVal = types[i].value;
	  		}
		
	  	}
	  	//4.3	若沒有任何一個type被選中   則彈出：“情選擇型別”。 響應方法結束：
	  	//return false
	  	if(typeVal == null){
	  		alert("請選擇型別");
	  		return false;
	  	}
	  	//5.	獲取name=“name”的文字值  ：通過value屬性： nameVal
	  	var nameEle = document.getElementsByName("name")[0];
	  	var nameVal = nameEle.value;
	  	//6.	去除nameVal的前後空格
	  	var reg = /^\s*|\s*/g;
		nameVal = nameVal.replace(reg,"");
		
		//使name的文字框也去除前後空格
		nameEle.value = nameVal;
		//6.	把nameVal和“”進行比較， 若是“”說明值出入了空格，彈出“請輸入內容”
	  	//方法結束： return falue
	  	if(nameVal == ""){
	  		alert("請輸入內容");
	  		return false;
	  	}  
	  	
	  	nameEle
	  	//7.	建立li節點
	  	var liNode = document.createElement("li");
	  	//8.	利用nameVal	建立文字節點
	  	var content = document.createTextNode(nameVal);
	  	//9.	把8加為7的子節點
	  	liNode.appendChild(content);
	  	
	  	//11.	為新建立的li新增onclick 響應函式
	  	liNode.onclick = function () {
	  		showContent(this);
	  	}
	  	
	  	//10.	把7加為選擇的type對應的ul的子節點
	  	document.getElementById(typeVal).appendChild(liNode);
	  	
	  	
	  	
	  	return false;
	  }
		
	  }
	  
	  
	</script>
</head>
<body>
	<p>你喜歡哪個城市？</p>
	<ul id = "city">
		<li id="bj">北京</li>
	   <li>上海</li>
	   <li>東京</li>
	   <li>首爾</li>
	</ul>
	
	<br><br>
	<p>你喜歡哪款單機遊戲？</p>
	<ul id = "game">
	   <li id="rl">紅警</li>
	   <li>實況</li>
	   <li>極品飛車</li>
	   <li>魔獸</li>
	</ul>
	
	<br><br>
	
	<form action="dom-8.html" name="myform">
		<input type="radio" name="type" value="city"/>城市
		<input type="radio" name="type" value="game"/>遊戲  
		name: <input type="text" name="name"/>
		<input type="submit" value="Submit" id="submit">
	</form>
	
</body>
</html>

(7)JavaScript DOM練習題

需求1：點選submit按鈕時檢查是否選擇type 若沒有選擇給出提示： “請選擇型別”；檢查文字框是否有輸入（可以去除前後空格），若沒有輸入，則給出提示：“請輸入內容”；若檢查都通過，則在相應的ul節點中新增對應的li節點需求2：使包括新增的li都能響應onclick 事件：

(5)JavaScript DOM練習題

題目1：點選每個 li節點都彈出其文字值程式碼注意：1 . 為什麼要寫成 liNodes[i].onclick = funciton（）{xxxx} l

《JavaScript Dom 編程藝術》讀書筆記-第7章

write 瀏覽器中 requests elm event 數據筆記它的自己動態創建標記~內容包括： 1. 傳統技術：document.write 和innerHTML 2. 深入剖析DOM方法：createElemen、createTextNode、appendC

web前端學習（四）JavaScript學習筆記部分（7）-- JavaScript DOM物件控制HTML元素詳解

1、方法 getElementsByName() 獲取name 可以獲取一個數組型別資料（引數加引號） getElementsByTagName() 獲取元素 getAttribute()

JavaScript-瀏覽器-DOM-練習題

1.請選擇出指定條件的節點如下的HTML結構： JavaScript Java Python Ruby Swift Scheme Haskell  <div id="test-div"> &

javascript-DOM(3)

play load attribute bsp dom -1 tag html har 1、元素屬性操作　　a、oDiv.style.display = "block"; 　　b、oDiv.style["display"] = "block"; 　　c、DOM方式 D

javaScript DOM節點樹

next hid body nbsp 屬性學生節點 dom節點元素 1. 例如： <html> <head> <title>節點樹<title/> <head/> <body> <p>

javascript dom頁面中的location屬性

完整 javascrip url hash name arc () hostname 開始屬性名稱 host：設置或返回主機名和當前URL的端口號 hostname：設置或返回當前的URL的主機名 href：設置或返回完整的url，可用於設置跳轉 hash：設置或返回從

JavaScript DOM操作及擴展

解釋多層 click 這樣的 cap exe 不能 tails isp 什麽是DOM？？？ DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的一個API（應用程序編程接口）。註意，IE中的所有DOM對象都是以COM（組件對象

【幹貨】JavaScript DOM編程藝術學習筆記4-6

ext 屬性節點另一個機器 rep lin bsp 每次增加四、案例研究：JavaScript圖片庫 js: function showPic(whichpic){ //取得鏈接 var source=whichpic.getAttribute("hr

JavaScript DOM總結

.class 第一個 self insert elements 提交相關定義 remove DOM 定義了訪問和操作HTML文檔的標準方法訪問（查找標簽）---- 直接查找　　document.getElementById(“idname”)　　document

javascript-dom文檔對象模型2

class art get 輸入關鍵字操作根據 erb utf-8 nth 每個標簽都是一個對象一：查找元素　　1、直接查找　　 document.getElementById 根據ID獲取一個標簽 document.getElement

javaScript--Dom 二級事件

add 區別 dom query selector document 程序 () 例子 1、Dom2級事件定義了兩個方法，用於處理指定刪除事件處理程序事件：addEventListener() 和 removeEventListener()。 2、這兩個方法有三個參數，（處

javascript dom節點x

文本 prev 下一個 alt 返回技術復制代碼 bili 順序一,js 獲取元素(父節點,子節點,兄弟節點) var test = document.getElementById("test");　　var parent = test.parentNod

javascript dom節點的

技術分享 next() ctr test 匹配新的就是 div ava 一,js 獲取元素(父節點,子節點,兄弟節點) 按 Ctrl+C 復制代碼按 Ctrl+C 復制代碼二,jquery 獲取元素(父節點,子節點,兄弟節點)

JavaScript DOM 編程藝術（1）---> JavaScript語法

cti scrip 回車括號全局運行方法回車換行 charset 一. JavaScript語法目錄語法操作條件語句循環語句函數對象二. 具體內容 2.1 語法　　javaScript代碼要通過HTML/XHTML文檔才能執行

[ Day51 ]Python之路----JavaScript --DOM操作

pro 句柄 mar conf 屬性列表輸入框毫秒歷史 asc JavaScript可以操作整個瀏覽器，但是這個瀏覽器對象比較大，因此為了操作方便，又分為三個對象。 1.BOM對象 BOM對象主要操作地址欄，瀏覽歷史，窗口高度等。 2.DOM對象 DOM對象主要操作網

JavaScript——Dom編程（1）

cli -c his close 屬性設置 utf-8 裏的點名 oct DOM：Document Object Model(文本對象模型) D：文檔 – html 文檔或 xml 文檔O：對象 – document 對象的屬性和方法M：模

JavaScript——Dom編程（2）

ast tar new 城市 show gen aps 字符 ide ①、創建一個元素節點: var reference = document.createElement(element) createElement(): 按照給定的標簽名創建一個新的元素

JavaScript DOM(一)

有一個 keyword radi class append track list return 文件夾文件夾： DOM家譜樹節點的基本屬性和方法 docume

(7)JavaScript DOM練習題

相關推薦