溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript如何獲取元素

發(fā)布時間：2022-02-19 14:14:13 來源：億速云 閱讀：158 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹JavaScript如何獲取元素，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

根據(jù) id 獲取元素

根據(jù) id 獲取元素是使用getElementById去獲取標(biāo)簽的 id 名。如下：

document.getElementById("id名");

根據(jù)標(biāo)簽獲取元素

document.getElementsByTagName("標(biāo)簽的名字");

這里用一個例子來說明以上兩個獲取元素的用法。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript獲取元素的幾種方法 - 億速云(yisu.com)</title>
</head>
<body>
	<input type="button" value="按鈕" id="btn">
	<div>
		<p>這是一段文字</p>
	</div>
	<script type="text/javascript">
		document.getElementById("btn").onclick=function(){
			var p=document.getElementsByTagName("p");
			for(var i=0;i<p.length;i++){
				p[i].innerText="已改變";
			}
		}
	</script>
</body>
</html>

我們可以看到，在獲取按鈕時，使用了 id 獲取方式，而在獲取 p 元素時則使用了標(biāo)簽獲取的方式。上述代碼實(shí)現(xiàn)的功能是點(diǎn)擊按鈕時將原本的“這是一段文字”換成“已改變”。

根據(jù) class 獲取元素

根據(jù) class 獲取元素是使用getElementByClassName去獲取標(biāo)簽的 class 名。如下：

document.getElementByClassName("類名");

使用 class 獲取元素的用法與 id 的一致，同學(xué)們可以參考上述例子自己編寫代碼進(jìn)行獲取，可以加深印象。

根據(jù) name 獲取元素

document.getElementsByName("name的屬性值");

使用該方法獲取的元素返回的是一個偽數(shù)組。具體使用方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript獲取元素的幾種方法 - 億速云(yisu.com)</title>
</head>
<body>
	<input type="button" value="按鈕" id="btn">
	<input type="text" name="text" value="請?zhí)钊雰?nèi)容">
	<script type="text/javascript">
		document.getElementById("btn").onclick=function(){
			var text=document.getElementsByName("text");
			for(var i=0;i<text.length;i++){
				text[i].value="已填入內(nèi)容";
			}
		}
	</script>
</body>
</html>

上述實(shí)現(xiàn)的效果是：未點(diǎn)擊按鈕時，文本輸入框中顯示的內(nèi)容為“請?zhí)钊雰?nèi)容”，點(diǎn)擊按鈕后文本框中的內(nèi)容顯示為“已填入內(nèi)容”。

根據(jù)選擇器獲取元素

document.querySelector("選擇器");

使用該方法返回值是一個元素對象。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript獲取元素的幾種方法 - 億速云(yisu.com)</title>
</head>
<body>
	<input type="button" value="按鈕1" id="btn">
	<script type="text/javascript">
		var btn1=document.querySelector("#btn");
			btn1.onclick=function(){
				alert("第一個按鈕");
			};
	</script>
</body>
</html>
或
document.querySelectorAll("選擇器");

使用該方法返回的是一個偽數(shù)組。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JavaScript獲取元素的幾種方法 - 億速云(yisu.com)</title>
</head>
<body>
	<input type="button" value="按鈕" id="btn"><br>
	<input type="text" value="修改文本" class="text">
	<script type="text/javascript">
		document.getElementById("btn").onclick=function(){
			var text=document.querySelectorAll(".text");
			for(var i=0;i<text.length;i++){
				text[i].value="文本已被修改";
			};
		};
	</script>
</body>
</html>

以上是“JavaScript如何獲取元素”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手