02-获取元素

获取元素

1.通过id获取

• document.getElementById(字符串参数)

  <div id='time'>
      2020-01-01
  </div>
  

  let timeElement = document.getElementById('time')
  //如果找到，就返回该元素对象，如果没有找到就返回null
  console.dir(timeElement)//这个方法可以打印出一个对象所有的属性和方法
  

2.根据标签名获取

• document.getElementsByTagName(标签名字符串)

  <ol>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
      <li>5555</li>
  </ol>
  

  let lis = document.getElementsByTagName('li')
  //返回的是找到的元素对象的集合，以伪数组的形式呈现
  //就算没有找到，也会返回一个伪数组，只不过为空
  

  let ols = document.getElementsByTagName('ol')
  let olsLis =ols[0].getElementsByTagName('li')//这里之所以要取下标0，是因为需要元素对象.getElementsByTagName()
  											//才能获取到它内部对应标签名的元素对象集合（伪数组）。
  

3.通过HTML5新增的方法获取

• document.getElementsByClassName(类名字符串) —>根据类名来获取

  let tips = document.getElementsByClassName('tips')
  //返回的是找到的元素对象的集合，以伪数组的形式呈现
  //就算没有找到，也会返回一个伪数组，只不过为空
  

• document.querySelector('选择器') —>根据选择器来获取，但是如果获取到，即使有多个，也是只返回第一个

  let tip = document.querySelector('li')
  console.log(tip)//返回了第一个li元素对象
  //如果没有找到，就返回null
  

• document.querySelectorAll('选择器')

  let tips = document.querySelectorAll('li')
  console.log(tips)
  //返回的是找到的元素对象的集合，以伪数组的形式呈现
  //就算没有找到，也会返回一个伪数组，只不过为空
  

4.特殊元素获取

• 获取body元素对象

  let myBody = document.body
  

• 获取html元素对象

  let myHtml = document.documentElement