问题场景
在vue中使用ref获取节点后，想要进一步获取子节点DOM，使用getElementById获取到null，改用querySelector能够正常获取
原因探究
MDN的解释为：getElementById() 只有在作为 document 的方法时才能起作用。
不同于其他
Element查找方法（如Document.querySelector()以及Document.querySelectorAll()），getElementById()只有在作为document的方法时才能起作用，而在 DOM 中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的“局部”版本。
相关知识
返回值特性
getElementById系列获取的集合是动态的
querySelector获取的集合是静态的
返回值类型
getElement系列：
DOM.getElementById(id) 返回匹配到ID的
Element对象DOM.getElementsByClassName(name / names) 返回实时的
HTMLCollection[]DOM.getElementsByName(name) 返回实时的
NodeList []DOM.getElementsByTagName(name) 返回实时的
HTMLCollection []
querySelector系列：
document.querySelector(selectors) 返回第一个匹配到的
Element对象querySelectorAll(selectors) 返回静态的
NodeList[]
HTMLCollection 与 NodeList 的区别
NodeList 对象会包含文档中的所有节点，HTMLCollection 对象只会包含文档中的 Element 节点；
HTMLCollection 元素可以通过 name，id 或 index 索引来获取。NodeList 只能通过 index 索引来获取。
参考内容：
JavaScript系列：getElementById与querySelector的区别 - 掘金 (juejin.cn)
JavaScript中 querySelector 与 getElementById 方法的区别_queryselector和getelement_明天也要努力的博客-CSDN博客