全面為你分析js選擇器（基礎教學）
- 亚连原創
- 2018-05-21 09:25:591350瀏覽
下面我要為大家帶來一篇js選擇器全面解析。現在就分享給大家，也給大家做個參考。
原生JS選擇器有getElementById、getElementsByName、getElementsByTagName和getElementsByClassName這四個,下面我就一個一個介紹這四個選擇器的用法。
1.getElementById(透過ID取得元素)
#用法:document.getElementById("Id");Id為要取得的元素的id屬性值。
2.getElementsByName(透過name屬性取得元素)
用法:document.getElementsByName("Name");Name為要取得元素的name屬性值,這個方法一般適用於提交表單資料,當元素為form、img、iframe、applet、embed、object的時候設定name屬性時,會自動在Document物件中建立以該name屬性值命名的屬性。所以可以透過document.domName引用對應的dom物件
##3.getElementsByTagName(透過元素名稱取得元素)
用法:document.getElementsByTagName(TagName);TagName為要取得元素的標籤名稱,當TagName為*的時候表示取得所有的元素,document也可以換成DOM元素,但是這樣就只能取得到該DOM元素後面的子集元素。4.getElementsByClassName(透過CSS類別來取得元素)
用法：document.getElementsByClassName(ClassName); ClassName為要取得元素的CSS類別名稱,如果要同時取得多個的話,在每個CSS類別後面用空格隔開。如document.getElementsByClassName("class2 class1")就會取得到class1和class2樣式的元素,document也可以換成DOM元素,這樣也是只能取得到該DOM元素後面的子集元素。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<p>我是通过标签获取</p>
<p id="box">我是通过id获取</p>
<p class="box1">我是通过class获取</p>
<form action="" name="box2">
我是通过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>
上面是我整理給大家的，希望今後對大家有幫助。 相關文章：
以上是全面為你分析js選擇器（基礎教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！