溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JavaScript如何獲取元素，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
根據 id 獲取元素是使用getElementById去獲取標簽的 id 名。如下：
document.getElementById("id名");document.getElementsByTagName("標簽的名字");這里用一個例子來說明以上兩個獲取元素的用法。
<!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 元素時則使用了標簽獲取的方式。上述代碼實現的功能是點擊按鈕時將原本的“這是一段文字”換成“已改變”。
根據 class 獲取元素是使用getElementByClassName去獲取標簽的 class 名。如下：
document.getElementByClassName("類名");使用 class 獲取元素的用法與 id 的一致，同學們可以參考上述例子自己編寫代碼進行獲取，可以加深印象。
document.getElementsByName("name的屬性值");使用該方法獲取的元素返回的是一個偽數組。具體使用方式如下：
<!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="請填入內容">
<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="已填入內容";
}
}
</script>
</body>
</html>上述實現的效果是：未點擊按鈕時，文本輸入框中顯示的內容為“請填入內容”，點擊按鈕后文本框中的內容顯示為“已填入內容”。
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("選擇器");使用該方法返回的是一個偽數組。
<!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如何獲取元素”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
