1-1 getElementById() 通过id来获取

  1. <div id="app">
  2. </div>
  3. <div class="one">one1</div>
  4. <div class="one">one2</div>
  5. <div class="one">one3</div>
  6. <script>
  7. var app = document.getElementById("app")
  8. // console.log(app);
  9. </script>

1-2 getElementsByTagName() 返回带有指定标签名的对象的集合

  • HTMLCollection(HTML集合),不是数组 类数组对象,可以使用数组的属性,可以for循环 ```javascript
    hello world

var app = document.getElementsByTagName(“div”)

// app HTMLCollection(HTML集合),不是数组 类数组对象,可以使用数组的属性,可以for循环 console.log(Array.isArray(app)); // false console.log(app.length); for(var i = 0;i<app.length;i++){ console.log(app[i]); }

  1. <a name="Jz5OL"></a>
  2. ## 1-3 getElementsByClassName()通过class来获取
  3. - **实例 点击某个div消失**
  4. ```javascript
  5. <div class="one">hello 1</div>
  6. <div class="one">hello 2</div>
  7. <div class="one">hello 3</div>
  8. <div class="one">hello 4</div>
  9. <script>
  10. /*
  11. this --> 在事件中,谁执行事件,this就指谁
  12. */
  13. var all = document.getElementsByClassName("one")
  14. for(var i=0;i<all.length;i++){
  15. // 不能对HTML Collection 执行点击事件,只能对具体元素执行事件
  16. all[i].onclick=function(){
  17. // console.log(this)
  18. this.style.display = "none";
  19. }
  20. }
  21. console.log(all)
  22. </script>