querySelector的参数是css选择器，任何选择器都可以作为它的参数，这样就使得它非常方便灵活：

比如获取class=‘test’的标签下的第一个子元素，可以这样写querySelector('.test  > * ')，也可以指定子元素的类型querySelector('.test  > span ')，或者是：classquerySelector('.test  > #f_div')

还可以使用querySelectorAll方法，这样会获取所有满足条件的元素，而不只是获取第一个元素。

<div class="first">
    <span>张三</span>
</div>
<div id="second">
    <div id=f_div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    //通过类选择器获取节点
    doucument.querySelector('.first');
    //通过id选择器获取节点
    doucument.querySelector('#second');
    //通过伪类选择器获取子节点
    document.querySelector('.first>span');
    //确认selectAll批量获取节点
    document.querySelectorAll('#second>div');


  \\vue 同理this.$refs.formBg.querySelector('.sysIn')

</script>