Olá,
Pelo que eu havia entendido, no JS tanto faz utilizar o QuerySelectorAll como getElementsByClassName. Nos dois casos eu faço a mesma coisa, mas o QuerySelector como é mais abrangente, por conseguir pegar qualquer elemento, é mais prático de utilizar.
const el = document.querySelectorAll('.class-name')
// é a mesma coisa que
const el = document.getElementsByClassName('class-name')
Só que na hora de tipar essas variáveis o VSCode me informa que o getElement é um HTMLCollectionOf<Element>
e o QuerySelector é um NodeListOf<Element>
. Isso no final das contas acaba sendo muito similar e não tendo muito motivo para eu ficar entendendo melhor cada tipo ? Ou tem relevância entender essas diferenças ?
Ainda sobre os tipos, se eu continuo o código fazendo o seguinte:
const nextEl: ChildNode = <ChildNode>el[i].parentNode?.nextSibling;
if (nextEl.style.maxHeight) {
nextEl.style.maxHeight = null;
} else {
nextEl.style.maxHeight = nextEl.scrollHeight + 'px';
}
O VsCode dá um erro dizendo que a propriedade style
não pertence ao tipo ChildNode
. Porém o atributo parentNode
e nextSibling
pertencem ao tipo ChildNode
(por isso eu restringi o tipo para ChildNode).
Se eu não tipar, continua dando erro. Mas se eu tipar como any
compila normalmente e o código funciona como eu gostaria. Mas em tese eu não deveria usar o any, não é ?