簡(jiǎn)介
本文主要介紹通過JS獲取DOM元素的五種方法:
1.根據(jù)id名獲取元素:getElementById;
2.根據(jù)標(biāo)簽名獲取元素:getElementsByTagName,返回一個(gè)數(shù)組;
3.根據(jù)類名獲取元素:getElementsBClassName,返回一個(gè)數(shù)組;
4.根據(jù)name屬性獲取元素:getElementsByName,返回一個(gè)數(shù)組;
5.根據(jù)選擇器獲取元素:
? ? 1.querySelector:獲取一個(gè)元素,推薦使用,用法類似寫css;
? ? ?2.querySelectorAll:返回一個(gè)元素?cái)?shù)組.
一、根據(jù)id名獲取元素:getElementById
語法:document.getElementById(“id屬性的值”);
返回值：是一個(gè)元素對(duì)象，即當(dāng)前id的對(duì)象（獲取到元素則返回該元素，如果頁(yè)面上沒有你所獲取的id，則返回null）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1"></div>
</body>
<script type="text/javascript">
console.log(document.getElementById("d1"));
console.log(document.getElementById("d2"));
</script>
</html>
運(yùn)行結(jié)果如下：
<div id="d1"></div>
null二、根據(jù)標(biāo)簽名獲取元素:getElementsByTagName
語法：document.getElementsByTagName(“標(biāo)簽的名字”);
返回值：是一個(gè)偽數(shù)組，所以頁(yè)面上沒有對(duì)應(yīng)標(biāo)簽的時(shí)候返回空數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div name="d1"></div>
<div name="d2"></div>
</body>
<script type="text/javascript">
console.log(document.getElementsByTagName("div"));
console.log(document.getElementsByTagName("p"));
</script>
</html>
運(yùn)行結(jié)果如下:
HTMLCollection(2) [div, div, d1:div, d2:div]
HTMLCollection []三、根據(jù)類名獲取元素:getElementsByClassName
語法：document.getElementsByClassName(“類樣式的名字”);
返回值：是一個(gè)偽數(shù)組，所以頁(yè)面上沒有對(duì)應(yīng)標(biāo)簽的時(shí)候返回空數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c2"></div>
</body>
<script type="text/javascript">
console.log(document.getElementsByClassName("c1"));
console.log(document.getElementsByClassName("c2"));
</script>
</html>
運(yùn)行結(jié)果如下:
HTMLCollection(2) [div.c1, div.c1]
HTMLCollection [div.c2]四、根據(jù)name屬性的值獲取元素:getElementsByName
語法：document.getElementsByName(“name屬性的值”);
返回值：是一個(gè)偽數(shù)組，所以頁(yè)面上沒有對(duì)應(yīng)標(biāo)簽的時(shí)候返回空數(shù)組
這個(gè)方法不推薦使用，因?yàn)樵贗E和歐朋瀏覽器中，通過這個(gè)方式會(huì)獲取到相同的id的元素
五、根據(jù)選擇器獲取元素
1.1 document.querySelector();
語法：document.querySelector(“選擇器”);
返回文檔中匹配指定的選擇器組的第一個(gè)元素
1.2 document.querySelectorAll();
語法：document.querySelectorAll(“選擇器”)；
返回文檔中匹配指定的選擇器組的所有元素
?文章來源：http://www.zghlxwxcb.cn/news/detail-598532.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
</body>
<script type="text/javascript">
console.log(document.querySelector(".c1"));
console.log(document.querySelectorAll(".c1"));
</script>
</html>
運(yùn)行結(jié)果如下:文章來源地址http://www.zghlxwxcb.cn/news/detail-598532.html
<div class="c1"></div>
NodeList(2) [div.c1, div.c1]到了這里，關(guān)于Javascript-獲取DOM元素的五種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
