vue-ref、js获取dom子元素

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>

 

上一篇:DOM获取节点的API


下一篇:HTML添加断点