免費(fèi)AI編程助手
有很多同學(xué)不太了解 JavaScript 中獲取元素的方法，那么這篇文章中 w3cschool 小編來為大家介紹一下 JavaScript 獲取元素的五種方法。
根據(jù) id 獲取元素
根據(jù) id 獲取元素是使用getElementById?去獲取標(biāo)簽的 id 名。如下：
document.getElementById("id名");根據(jù)標(biāo)簽獲取元素
document.getElementsByTagName("標(biāo)簽的名字");這里用一個(gè)例子來說明以上兩個(gè)獲取元素的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript獲取元素的幾種方法 - 編程獅(w3cschool.cn)</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>我們可以看到，在獲取按鈕時(shí)，使用了 id 獲取方式，而在獲取 p 元素時(shí)則使用了標(biāo)簽獲取的方式。上述代碼實(shí)現(xiàn)的功能是點(diǎn)擊按鈕時(shí)將原本的“這是一段文字”換成“已改變”。如下圖：
根據(jù) class 獲取元素
根據(jù) class 獲取元素是使用?getElementByClassName?去獲取標(biāo)簽的 class 名。如下：
document.getElementByClassName("類名");使用 class 獲取元素的用法與 id 的一致，同學(xué)們可以參考上述例子自己編寫代碼進(jìn)行獲取，可以加深印象。
根據(jù) name 獲取元素
document.getElementsByName("name的屬性值");使用該方法獲取的元素返回的是一個(gè)偽數(shù)組。具體使用方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript獲取元素的幾種方法 - 編程獅(w3cschool.cn)</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)擊按鈕時(shí)，文本輸入框中顯示的內(nèi)容為“請?zhí)钊雰?nèi)容”，點(diǎn)擊按鈕后文本框中的內(nèi)容顯示為“已填入內(nèi)容”。
根據(jù)選擇器獲取元素
document.querySelector("選擇器");使用該方法返回值是一個(gè)元素對象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript獲取元素的幾種方法 - 編程獅(w3cschool.cn)</title>
</head>
<body>
<input type="button" value="按鈕1" id="btn">
<script type="text/javascript">
var btn1=document.querySelector("#btn");
btn1.onclick=function(){
alert("第一個(gè)按鈕");
};
</script>
</body>
</html>
或
document.querySelectorAll("選擇器");使用該方法返回的是一個(gè)偽數(shù)組。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript獲取元素的幾種方法 - 編程獅(w3cschool.cn)</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)容。更多 JavaScript 學(xué)習(xí)請前往 w3cschool。
