Danmo的學習之路（JavaScript基礎_下）

阿新 • • 發佈：2020-12-29

技術標籤：前端

DOM

簡介

事件：使用者和瀏覽器之間的互動行為，比如：點選按鈕，滑鼠移動、關閉視窗。

JavaScript 事件參考手冊

獲取物件

	<button id="btn">我是一個按鈕</button>
	<script type="text/javascript">
	//獲取按鈕物件
	var btn = document.getElementById("btn");
	//修改按鈕的文字
	btn.innerHTML = "I'm Button";

觸發事件執行程式碼的2種寫法

1.結構和行為耦合

<button id="btn" onclick="alert('討厭，你點我幹嘛！');">我是一個按鈕</button>
 <!--點選按鈕彈出警告框-->

2.分離式寫法（推薦）

	<button id="btn">我是一個按鈕</button>
	<script type="text/javascript">
		//獲取按鈕物件
		var btn = document.getElementById 
("btn");
		//繫結一個單擊事件
		//像這種為單擊事件繫結的函式，稱為單擊響應函式
		btn.onclick = function(){
			alert("你還點~~~");
			};			
	</script>

文件的載入onload

瀏覽器在載入一個頁面時，是按照自上向下的順序載入的，讀取到一行就執行一行，如果將script標籤寫到頁面的上邊，在程式碼執行時，頁面還沒有載入，頁面沒有載入DOM物件也沒有載入，會導致無法獲取到DOM物件

onload事件會在整個頁面載入完成之後才觸發。為window繫結一個onload事件，該事件對應的響應函式將會在頁面載入完成之後執行

，這樣可以確保我們的程式碼執行時所有的DOM物件已經載入完畢了

	<head>
		<script type="text/javascript">
			window.onload = function(){
				//如果要寫在上方的script標籤內，就需要把內容寫在window.onload函式中
				//獲取id為btn的按鈕
				var btn = document.getElementById("btn");
				//為按鈕繫結一個單擊響應函式
				btn.onclick = function(){
					alert("hello");
				};
			};
		</script>
	</head>
	<body>
		<button id="btn">點我一下</button>
	</body>

DOM查詢

getElementById

可以根據ID來獲取一組元素節點物件

<li id="bj">北京</li>

var bj = document.getElementById("bj");
//查詢#bj節點
alert(bj.innerHTML);
//innerHTML 通過這個屬性可以獲取到元素內部的html程式碼

innerHTML用於獲取元素內部的HTML程式碼的，對於自結束標籤（比如下邊的input），這個屬性沒有意義

getElementsByTagName

可以根據標籤名來獲取一組元素節點物件
這個方法會給我們返回一個類陣列物件，所有查詢到的元素都會封裝到物件中
即使查詢到的元素只有一個，也會封裝到陣列中返回

<li>上海</li>
<li>東京</li>
<li>首爾</li>

var lis = document.getElementsByTagName("li");
for(var i=0 ; i<lis.length ; i++){
	alert(lis[i].innerHTML);
}
//遍歷輸出

getElementsByName

可以根據name來獲取一組元素節點物件

如果需要讀取元素節點屬性，直接使用元素.屬性名
例子：元素.id 元素.name 元素.value

注意：class屬性不能採用這種方式，讀取class屬性時需要使用元素.className

gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>

var inputs = document.getElementsByName("gender");
for(var i=0 ; i<inputs.length ; i++){
	alert(inputs[i].className);
	//列印內容為hello
}

查詢某個父節點下的子節點

	var btn05 = document.getElementById("btn05");
	btn05.onclick = function(){
		//獲取id為city的節點
		var city = document.getElementById("city");
		//獲取city下的li節點
		var lis = city.getElementsByTagName("li");
	};

childNodes

它是屬性，表示包括文字節點在內的所有節點，標籤間空白也會當成文字節點

注意：在IE8及以下的瀏覽器中，不會將空白文本當成子節點

獲取包括文字節點在內的所有節點：

	var btn05 = document.getElementById("btn05");
	btn05.onclick = function(){
		//獲取id為city的節點
		var game = document.getElementById("game");
		//獲取city下的li節點
		var nds = city.childNodes;
	};