JS基礎-DOM Node節點

時間 2019-11-12

原文原文鏈接

DOM 節點

節點(Node)	釋義	對象
文檔節點	整個文檔	Document 對象
元素節點	每一個HTML元素	Eelement 對象
文本節點	HTML元素內的文本	Text 對象
屬性節點	每一個HTML的屬性	Attribute 對象
註釋節點	文檔的註釋內容	Comment 對象

Attributes屬性節點

屬性	釋義
nodeType	節點類型
nodeValue	節點值
nodeName	節點名稱
innerHTML	節點(元素)的文本值

導航屬性

屬性	釋義
parentNode	節點(元素)的父節點
firstChild	節點下第一個子元素
lastChild	節點下最後一個子元素
childNodes	節點(元素)的子節點

Node標籤的增刪改查

方法

方法	描述
createElement(name)	建立元素
appendChild()	添加元素
removeChild()	刪除元素

添加標籤節點(createElement)和刪除節點標籤(removeChild)都是在父級節點上操做的html

綜合示例

<html>
 <head>
  <style>
		.div1 { width: 300px;height: 100%;color: #000;float: left;text-align: center;background-color: #FFCCCC;}
		div p { background-color: #fff;}
	</style>
 </head>
 <body>
  <div class="div1">
   <h3>Node的增刪改查</h3>
   <button onclick="add()">添加標籤</button>
   <button onclick="del()">刪除標籤</button>
   <button onclick="replace()">替換標籤</button>
  </div>
  <script>
	var div_1 = document.getElementsByClassName("div1")[0];			//定位標籤元素父級

	//添加節點標籤函數
	function add(){
		var ele = document.createElement("p");						//定義建立標籤元素
		ele.innerHTML="新增的 P 標籤";								//添加標籤元素內容
		div_1.appendChild(ele);										//定位標籤中添加元素
					}

	//刪除節點標籤函數
	function del(){
		var div_p = div_1.getElementsByTagName("p")[0];				//定義刪除的標籤元素
		div_1.removeChild(div_p);									//定位標籤中刪除元素
					}

	//修改節點標籤函數
	function replace(){
		var new_title = document.createElement("h2");				//定義建立要修改後的標籤
		new_title.innerHTML="替換後的新標題"							//添加標籤元素內容
		var old_title = document.getElementsByTagName("h3")[0];		//定義要修改的標籤
		div_1.replaceChild(new_title,old_title);				    //進行調遣替換
				   }
</script>
 </body>
</html>

Node樣式的增刪改查

方法

方法	描述
[ele].classList.add()	添加樣式
[ele].classList.remove()	刪除樣式
[ele].style.[ClassName]	修改樣式

添加標籤節點(classList.add)和刪除節點標籤(classList.remove)都是在當前節點上操做的node

綜合示例

<!DOCTYPE html>
<html>
 <head> 
  <style>
		.sty_1 { height: 200px;width: 200px;background-color: #FFCCCC;}
		.sty_2 { margin: auto;color: #FFF;line-height: 200px;text-align: center;}
	</style> 
 </head> 
 <body> 
  <div class="sty_1">
   this is test !!!
  </div> 
  <button onclick="add()">添加樣式</button> 
  <button onclick="del()">刪除樣式</button> 
  <button onclick="cha()">修改樣式</button> 
  <script>
	i = 0;
	var div_1 = document.getElementsByClassName("sty_1")[0];
	function add(){
			div_1.classList.add("sty_2");						//添加樣式
	}
	function del(){
			div_1.classList.remove("sty_2")						//刪除樣式
	}
	function cha(){
			var val = ["#CCCCFF","#FFCC99","#99CCFF"];
			if (i < val.length -1){
				i++;
				div_1.style.backgroundColor=val[i];				//修改樣式
			}
			else{
				i = 0;
				div_1.style.backgroundColor=val[i];				//修改樣式
			}
	}
</script>  
 </body>
</html>

選項選擇

<!DOCTYPE html>
<html>
<body>
	
<button onclick="SelectALL()">全選</button>
<button onclick="Cancel()">取消</button>
<button onclick="Reverse()">反選</button>

<div>
	<input type="checkbox"> 文本
	<input type="checkbox"> 文本
	<input type="checkbox"> 文本
</div>

<script>
	var inputs = document.getElementsByTagName("input");		//定義標籤元素數組

	function SelectALL()
	{
		for (var i=0; i<inputs.length;i++)						//for循環數組
		{

			var input=inputs[i];								//循環位置對象
			input.checked=true;									//標記 true 狀態
		}
	}

	function Cancel()
	{
		for (var i=0; i<inputs.length;i++)						//for循環數組
		{
			var input=inputs[i];								//循環位置對象
			input.checked=false;								//標記 false 狀態
		}
	}
	function Reverse()
	{
		for (var i=0; i<inputs.length;i++)						//for循環數組
		{
			var input=inputs[i];								//循環位置對象
			input.checked=!input.checked;						//狀態取反
		}
	}
</script>
</body>
</html>

二級聯動

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="provinces">
	<option>請選擇省份</option>
</select>
<select id="citys">
	<option>請選擇城市</option>
</select>

<script>
	data = {"上海市":["徐彙區","寶山區","浦東新區"],"北京市":["朝陽區","豐臺區","昌平區"]}
	
	var pro_ele = document.getElementById("provinces");
	var city_ele = document.getElementById("citys");

	for (var i in data){									//遍歷省份
		var ele = document.createElement("option");			//定義建立標籤元素
		ele.innerHTML=i;									//添加標籤元素內容
		pro_ele.appendChild(ele);							//定位標籤中添加元素
	}

	pro_ele.onchange=function(){							//域的內容被改變觸發事件
		var city_label = this.options[this.selectedIndex];	//經過 this 索引拿到當前選中項的省份標籤
		var citys = data[city_label.innerHTML];				//經過省份標籤拿到當前選中省份的城市

		city_ele.options.length=1;							//options 只保留第一個，避免不一樣省份城市累加

		for (var i=0;i<citys.length;i++){					//遍歷當前選中省份全部的城市
			var ele = document.createElement("option");		//定義建立標籤元素
			ele.innerHTML=citys[i];							//添加標籤元素內容
			city_ele.appendChild(ele);						//定位標籤中添加元素
		}
	}
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。