案例

假设在ts中,如果我们需要一个HTMLElement类型的某个dom元素(比如只要第一个),共有如下方式:
(注意ts中需要明确的类型,所以使用as断言是有必要的,否则在ts识别不出类型时是会报错无法运行的)

// 一、返回值为单个元素的api

// 1.id相关
document.getElementById('idName') as HTMLElement    // 仅用于 Id, 无法用于class

document.querySelector('#idName') as HTMLElement   // Id 与class都可以用此api。注意,Id要使用`#`开头 ; class要使用`.`开头

// 2.class相关
document.querySelector('.className') as HTMLElement   // 注意,要使用`.className`   , 可以注意到, querySelector更好用

// 二、返回值为数组的api (只有class)

// 1. 先断言子元素类型,再取出
(document.getElementsByClassName('className') as HTMLCollectionOf<HTMLElement>)[0]  
(document.querySelectorAll('.className') as NodeListOf<HTMLElement>)[0] // 注意,要使用`.className`

// 2. 先取出默认类型的子元素, 再断言其具体类型
document.getElementsByClassName('className')[0] as HTMLElement
document.querySelectorAll('.className')[0] as HTMLElement // 注意要使用`.className`

结论

1、通过元素ID获取元素

querySelector('#idName')
- 注意: 传入类名时前面需要加一个.(如.className); 传入Id时前面需要加一个#(如#idName)
- 返回单个匹配到的Id的元素
- 既可以用于Id, 也可以用作class
document.getElementById('idName')
- 返回单个匹配到的Id的元素

2、通过类名字获取元素

querySelector('.className')
- 注意: 传入类名时前面需要加一个.(如.className); 传入Id时前面需要加一个#(如#idName)
- 返回指定 CSS 选择器(className)的第一个匹配元素
- 既可以用于Id, 也可以用作class
document.getElementsByClassName('className')
- 返回指定 CSS 选择器(className)的所有匹配元素, 返回值 HTMLCollectionOf<Element> 是一个集合(即数组),泛型所传参数代表了数组内的元素类型(默认为Element)。
- 例如需要第一个匹配元素时: document.getElementsByClassName('className')[0]
document.querySelectorAll('.className')
- 注意: 传入类名时前面需要加一个.(如.className); 传入Id时前面需要加一个#(如#idName)
- 返回指定 CSS 选择器(className)的所有匹配元素, 返回值 NodeListOf<E> 是一个集合(即数组),泛型所传参数代表了数组内的元素类型(默认为Element)。
- 例如需要第一个匹配元素时: document.querySelectorAll('.className')[0]

3、有时也会遇到通过标签名字获取元素的场景(不再本文主题范围内,不过多讨论,自行使用时可参考以上举一反三)

document.getElementsByTagName(tagName)

querySelector与getElementBy等的区别

^{本小节参考于此}

由于querySelector是按css规范来实现的，所以它传入的字符串要按照css标准, 而getElement系列只需要传入具体字符
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．
在使用的时候getElement这种方法性能比较好，query选择符则比较方便