JS获取DOM元素的方法

JS获取DOM元素的方法

1、getElementById() 根据ID名获取标签元素
2、getElementsByTagName();根据标签名获取标签列
3、getElementsByClassName();根据className获取标签列表
4、querySelector( ) 根据标签名获取第一个元素
5、querySelectoAll( ) 根据标签名获取所有元素
6、获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的
7、获取body的方法（document.body）
document.body是专门获取body这个标签的

1、getElementById() 根据ID名获取标签元素

返回值只获取到一个元素，没有找到返回null。
console.log(document.getElementById(“div0”));

2、getElementsByClassName();根据className获取标签列表

console.log(document.getElementsByClassName(“div1”))；
3、getElementsByClassName();根据className获取标签列表

  console.log(document.getElementsByTagName("div"))；
  参数是是获取元素的标签名属性，不区分大小写。
  返回值是一个类数组，没有找到返回空数组


  打印结果：
  HTMLCollection(5) [div#div0, div.div1, div, div, div, div0: div#div0]
  0: div#div0
  1: div.div1
  2: div
  3: div
  4: div
  5: div#goog-gt-tt.skiptranslate
  6: div
  7: div
  8: div.logo
  9: div.top
  10: div.middle
  11: div.original-text
  12: div.bottom
  13: div.activity-links
  14: div.started-activity-container
  15: div.activity-root
  16: div.status-message
  17: div.goog-te-spinner-pos
  18: div.goog-te-spinner-animation
  19: div#qds
  length: 20
  div0: div#div0goog-gt-tt: div#goog-gt-tt.skiptranslate
  qds: div#qds
  __proto__: HTMLCollection

4、querySelector( ) 根据标签名获取第一个元素
console.log(document.querySelector(“span”))；
参数是选择器，只返回找到的第一个元素，没有找到null

5、querySelectoAll( ) 根据标签名获取所有元素

console.log(document.querySelectorAll(“div”))；
参数是选择器，返回值是NodeList列表，找不到返回一个NodeList空数组
NodeList(5) [div#div0, div.div1, div, div, div]
0: div#div0
1: div.div1
2: div
3: div
4: div
length: 5
proto: NodeList

6、获取html的方法（document.documentElement）
返回的是html内的标签

7、获取body的方法（document.body）
返回的是body内的标签