1、如何获取DOM

1、通过id获取 document.getElementById(“id”)

<div id="app">
</div>
<div class="one">one1</div>
<div class="one">one2</div>
<div class="one">one3</div>
<script>
var app = document.getElementById("app")
// console.log(app);
</script>

2、通过类名称获取 getElementsByClassName(“class”)

例子:点击某个div消失

<div class="one">hello 1</div>
<div class="one">hello 2</div>
<div class="one">hello 3</div>
<div class="one">hello 4</div>
<script>
  /* 
   this --> 在事件中，谁执行事件，this就指谁
  */
  var all = document.getElementsByClassName("one")
  for(var i=0;i<all.length;i++){
    // 不能对HTML Collection 执行点击事件，只能对具体元素执行事件
    all[i].onclick=function(){
      // console.log(this)
      this.style.display = "none";
    }
  }
  console.log(all)
</script>

3、通过元素名称获取 getElementsByTagName()

HTMLCollection(HTML合集),不是数组 是类数组对象，可以使用数组的属性，也可以进行for循环

<div class="app">
  hello world
</div>
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]);
}

4、通过选择器获取

document.querySelectorAll("")