DIV CSS 佈局教程網

js選擇器全面解析
編輯:JavaScript基礎知識     

原生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>
<div>我是通過標簽獲取</div>
<div id="box">我是通過id獲取</div>
<div class="box1">我是通過class獲取</div>
<form action="" name="box2">
  我是通過name獲取
</form>
</body>
<script type="text/javascript">
  var div = document.getElementsByTagName("div");
  var box = document.getElementById("box");
  var box1 = document.getElementsByClassName("box1");
  var box2 = document.getElementsByName("box2");
</script>
</html>

以上就是小編為大家帶來的js選擇器全面解析全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved