(JS) 获取DOM元素方法

175 阅读1分钟
  1. 通过ID获取,返回一个元素对象(document.getElementById)
document.getElementById('ID属性值')
document.getElementById('table')
  1. 通过标签名称获取,返回一个伪数组,里面包含多个DOM对象 (document.getElementsByTagName)
document.getElementsByTagName('标签名称')
document.getElementsByTagName('li')
  1. 通过name属性的值获取元素,返回一个伪数组,里面包含多个DOM对象 (document.getElementsByName)
document.getElementsByName('name属性')
document.getElementsByName('name')
  1. 通过类样式名称获取元素,返回一个伪数组,里面包含多个DOM对象(document.getElementsByClassName)
document.getElementsByClassName('类样式名称')
document.getElementsByClassName('cls')
  1. 通过选择器获取元素,返回一个元素对象(document.querySelector)
document.querySelector('选择器名字')
document.querySelector('#table') //id,类,标签等选择器
  1. 通过选择器获取多个元素,返回一个伪数组,里面保存了多个DOM对象(document.querySelectorAll)
document.querySelectorAll('选择器名字')

注意事项

  1. querySelector()方法仅仅返回匹配指定选择器的第一个元素,如果你需要返回多个请使用querySelectorAll代替。
  2. 选择器获取dom元素和传统获取dom元素方法的区别
    • getElementById() 获取的是动态集合,通过函数获取元素后,元素之后的改变还是会动态添加到已经获取的这个元素中。也可以理解为通过这个方法获取到的元素存储到变量的时候,以后每一次在js函数中使用这个变量的时候都会再去访问一下这个变量对应的html元素
    • querySelector()获取的是静态集合,通过这个函数获取元素之后,元素之后的改变并不会影响之前获取后存储到的变量。也就是获取到元素之后就和html中的这个元素没有关系了。