JS基礎_dom增刪改

ZHOU_VIP發表於2020-11-22
JS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function() {
				
				//建立一個"廣州"節點,新增到#city下
				myClick("btn01",function(){
					//建立廣州節點 <li>廣州</li>
					//建立li元素節點
					/*
					 * document.createElement()
					 * 	可以用於建立一個元素節點物件，
					 * 	它需要一個標籤名作為引數，將會根據該標籤名建立元素節點物件，
					 * 	並將建立好的物件作為返回值返回
					 */
					var li = document.createElement("li");
					
					//建立廣州文字節點
					/*
					 * document.createTextNode()
					 * 	可以用來建立一個文字節點物件
					 *  需要一個文字內容作為引數，將會根據該內容建立文字節點，並將新的節點返回
					 */
					var gzText = document.createTextNode("廣州");
					
					//將gzText設定li的子節點
					/*
					 * appendChild()
					 * 	 - 向一個父節點中新增一個新的子節點
					 * 	 - 用法：父節點.appendChild(子節點);
					 */
					li.appendChild(gzText);
					
					//獲取id為city的節點
					var city = document.getElementById("city");
					
					//將廣州新增到city下
					city.appendChild(li);
				});
				

				//將"廣州"節點插入到#bj前面
				myClick("btn02",function(){
					//建立一個廣州
					var li = document.createElement("li");
					var gzText = document.createTextNode("廣州");
					li.appendChild(gzText);
					
					//獲取id為bj的節點
					var bj = document.getElementById("bj");
					
					//獲取city
					var city = document.getElementById("city");
					
					/*
					 * insertBefore()
					 * 	- 可以在指定的子節點前插入新的子節點
					 *  - 語法：
					 * 		父節點.insertBefore(新節點,舊節點);
					 */
					city.insertBefore(li , bj);
				});
				
				
				//使用"廣州"節點替換#bj節點
				myClick("btn03",function(){
					//建立一個廣州
					var li = document.createElement("li");
					var gzText = document.createTextNode("廣州");
					li.appendChild(gzText);
					
					//獲取id為bj的節點
					var bj = document.getElementById("bj");
					
					//獲取city
					var city = document.getElementById("city");
					
					/*
					 * replaceChild()
					 * 	- 可以使用指定的子節點替換已有的子節點
					 * 	- 語法：父節點.replaceChild(新節點,舊節點);
					 */
					city.replaceChild(li , bj);
				});
				
				//刪除#bj節點
				myClick("btn04",function(){
					//獲取id為bj的節點
					var bj = document.getElementById("bj");
					//獲取city
					var city = document.getElementById("city");
					
					/*
					 * removeChild()
					 * 	- 可以刪除一個子節點
					 * 	- 語法：父節點.removeChild(子節點);
					 * 		
					 * 		子節點.parentNode.removeChild(子節點);
					 */
					//city.removeChild(bj);
					
					//這個方法更方便，不用通過父節點去獲取，所以更常用
					bj.parentNode.removeChild(bj);
				});
				
				
				//讀取#city內的HTML程式碼
				myClick("btn05",function(){
					//獲取city
					var city = document.getElementById("city");
					alert(city.innerHTML);
				});
				

				//設定#bj內的HTML程式碼
				myClick("btn06" , function(){
					//獲取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				

				myClick("btn07",function(){
					
					//向city中新增廣州
					var city = document.getElementById("city");
					
					/*
					 * 使用innerHTML也可以完成DOM的增刪改的相關操作
					 * 一般我們會兩種方式結合使用
					 */
					//city.innerHTML += "<li>廣州</li>";
					

					//兩種方式結合使用：推薦使用
					//建立一個li
					var li = document.createElement("li");
					//向li中設定文字
					li.innerHTML = "廣州";
					//將li新增到city中
					city.appendChild(li);
					
				});
				
				
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		
		</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>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">建立一個"廣州"節點,新增到#city下</button></div>
			<div><button id="btn02">將"廣州"節點插入到#bj前面</button></div>
			<div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
			<div><button id="btn04">刪除#bj節點</button></div>
			<div><button id="btn05">讀取#city內的HTML程式碼</button></div>
			<div><button id="btn06">設定#bj內的HTML程式碼</button></div>
			<div><button id="btn07">建立一個"廣州"節點,新增到#city下</button></div>
		</div>
	</body>
</html>

 

相關文章