js獲取Element元素的四種常用方法
更新時(shí)間：2023年08月17日 11:42:09 作者：何中應(yīng)
本文主要介紹了js獲取Element元素的四種常用方法,通過(guò)介紹getElementById、getElementsByClassName、getElementsByTagName和querySelector等方法,幫助讀者了解如何通過(guò)不同的方式獲取頁(yè)面中的元素,感興趣的可以了解一下
js中獲取Element元素的常用方法有以下四種：
- 【方法一】根據(jù)元素ID：document.getElementById()
- 【方法二】根據(jù)元素標(biāo)簽：document.getElementsByTagName()
- 【方法三】根據(jù)元素class名：document.getElementsByClassName()
- 【方法四】根據(jù)元素name名：document.getElementsByName()
需要注意的是，方法中Element后面加“s”的，返回的是數(shù)組，即便只有一個(gè)對(duì)象，也是長(zhǎng)度為1的數(shù)組。
所以后面調(diào)用時(shí)，記得加上索引（變量名[0]）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js獲取Element元素的常用方法</title>
<img id="m1" src="./img.jpg" width="200px"> <br />
<div class="cls"></div> <br />
<div class="cls"></div> <br />
<input type="checkbox" name="hobby">運(yùn)動(dòng)
<input type="checkbox" name="hobby">閱讀
<input type="checkbox" name="hobby">游戲
</head>
<body>
<script>
// 1 根據(jù)元素ID
let img = document.getElementById("m1");
console.log(img);
// 2 根據(jù)元素標(biāo)簽
let div = document.getElementsByTagName("div");
console.log(div);
// 3 根據(jù)元素class名
let cls = document.getElementsByClassName("cls");
console.log(cls);
// 4 根據(jù)元素的name名
let hobby = document.getElementsByName("hobby");
console.log(hobby);
</script>
</body>
</html>
到此這篇關(guān)于js獲取Element元素的四種常用方法的文章就介紹到這了,更多相關(guān)js獲取Element元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了canvas的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
10 種最常見的 Javascript 錯(cuò)誤(頻率最高)
本文是小編給大家收藏的JavaScript 中頻度最高的 10 種錯(cuò)誤，我們會(huì)告訴你什么原因?qū)е铝诉@些錯(cuò)誤，以及如何防止這些錯(cuò)誤發(fā)生。需要的朋友參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了Openlayers繪制地圖標(biāo)注，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
詳解bootstrap導(dǎo)航欄.nav與.navbar區(qū)別
本篇文章主要介紹了詳解bootstrap導(dǎo)航欄.nav與.navbar區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
js實(shí)現(xiàn)字符全排列算法的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)字符全排列算法的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05![用xhtml+css寫的相冊(cè)自適應(yīng) - 類似九宮格[兼容 ff ie6 ie7 opear ]](http://img.jbzj.com/images/xgimg/bcimg5.png)
用xhtml+css寫的相冊(cè)自適應(yīng) - 類似九宮格[兼容 ff ie6 ie7 opear ]
用xhtml+css寫的相冊(cè)自適應(yīng) - 類似九宮格[兼容 ff ie6 ie7 opear ]...2007-05-05
解決layui富文本編輯器圖片上傳無(wú)法回顯的問(wèn)題
今天小編就為大家分享一篇解決layui富文本編輯器圖片上傳無(wú)法回顯的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
webpack構(gòu)建打包的性能優(yōu)化實(shí)戰(zhàn)指南
webpack是前端開發(fā)中比較常用的打包工具之一,另外還有g(shù)ulp,grunt,下面這篇文章主要給大家介紹了關(guān)于webpack構(gòu)建打包的性能優(yōu)化的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
json對(duì)象轉(zhuǎn)為字符串,當(dāng)做參數(shù)傳遞時(shí)加密解密的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇json對(duì)象轉(zhuǎn)為字符串,當(dāng)做參數(shù)傳遞時(shí)加密解密的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
webpack-cli在webpack打包中的作用小結(jié)
webpack?是打包代碼時(shí)依賴的核心內(nèi)容，而?webpack-cli?是一個(gè)用來(lái)在命令行中運(yùn)行?webpack?的工具，那么webpack-cli在webpack打包中的作用是什么，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2022-04-04