全面為你分析js選擇器（基礎(chǔ)教程）

來(lái)源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 19:48:33

全面為你分析js選擇器（基礎(chǔ)教程）

原生JS選擇器有g(shù)etElementById、getElementsByName、getElementsByTagName和getElementsByClassName這四個(gè)，下面我就一個(gè)一個(gè)介紹這四個(gè)選擇器的用法。1.getElementById(通過(guò)ID獲取元素)。用法：document.getElementById("；Id"；)；Id為要獲取的元素的id屬性值。2.getElementsByName(通過(guò)name屬性獲取元素)。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀原生JS選擇器有g(shù)etElementById、getElementsByName、getElementsByTagName和getElementsByClassName這四個(gè)，下面我就一個(gè)一個(gè)介紹這四個(gè)選擇器的用法。1.getElementById(通過(guò)ID獲取元素)。用法：document.getElementById("；Id"；)；Id為要獲取的元素的id屬性值。2.getElementsByName(通過(guò)name屬性獲取元素)。

下面我就為大家?guī)?lái)一篇js選擇器全面解析。現(xiàn)在就分享給大家，也給大家做個(gè)參考。

原生JS選擇器有g(shù)etElementById、getElementsByName、getElementsByTagName和getElementsByClassName這四個(gè),下面我就一個(gè)一個(gè)介紹這四個(gè)選擇器的用法。

1.getElementById(通過(guò)ID獲取元素)

用法:document.getElementById("Id");Id為要獲取的元素的id屬性值。

2.getElementsByName(通過(guò)name屬性獲取元素)

用法:document.getElementsByName("Name");Name為要獲取元素的name屬性值,這個(gè)方法一般適用于提交表單數(shù)據(jù),當(dāng)元素為form、img、iframe、applet、embed、object的時(shí)候設(shè)置name屬性時(shí),會(huì)自動(dòng)在Document對(duì)象中創(chuàng)建以該name屬性值命名的屬性。所以可以通過(guò)document.domName引用相應(yīng)的dom對(duì)象

3.getElementsByTagName(通過(guò)元素名稱獲取元素)

用法:document.getElementsByTagName(TagName);TagName為要獲取元素的標(biāo)簽名稱,當(dāng)TagName為*的時(shí)候表示獲取所有的元素,document也可以換成DOM元素,但是這樣就只能獲取到該DOM元素后面的子集元素。

4.getElementsByClassName(通過(guò)CSS類來(lái)獲取元素)

用法：document.getElementsByClassName(ClassName);ClassName為要獲取元素的CSS類名稱,如果要同時(shí)獲取多個(gè)的話,在每個(gè)CSS類后面用空格隔開(kāi)。如document.getElementsByClassName("class2 class1")就會(huì)獲取到class1和class2樣式的元素,document也可以換成DOM元素,這樣也是只能獲取到該DOM元素后面的子集元素。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>demo</title>
</head>
<body>
<p>我是通過(guò)標(biāo)簽獲取</p>
<p id="box">我是通過(guò)id獲取</p>
<p class="box1">我是通過(guò)class獲取</p>
<form action="" name="box2">
 我是通過(guò)name獲取
</form>
</body>
<script type="text/javascript">
 var p = document.getElementsByTagName("p");
 var box = document.getElementById("box");
 var box1 = document.getElementsByClassName("box1");
 var box2 = document.getElementsByName("box2");
</script>
</html>

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

詳細(xì)為你解析JS抽象工廠模式

詳細(xì)分析JS函數(shù)去抖和節(jié)流（圖文教程）

如何才能讓你的JS代碼更好看易讀（請(qǐng)看詳細(xì)介紹）

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com