queryselector选择器注意事项

1、选择器命名有要求

今天在vue项目中使用queryselector时报错，因为是根据数据直接生成的复选框，所以就用的数据id作为html标签的id，结果到了取值的时候却报错了。
"SyntaxError: Failed to execute ‘querySelector’ on ‘Document’: ‘#03b52b804a5943a2ada8d010238d38c9’ is not a valid selector."

<el-checkbox :id="item.id" v-if="item.pid===data.id" :label="item.id" :checked="treeNodeBtnMenuObj[item.id]"
      @change="changeTreeCustomNodeAfterCheckbox(item.id)">{{item.name}}</el-checkbox>
</span>

document.querySelector(btnMenuItem.id);

这就奇怪了，然后我看了看html元素，这个id也存在啊，为什么会说无法解析呢？

我刚开始以为是vue的原因，后来才发现是因为querySelector选择器不识别开头为数字的选择器，解决方案如下：在绑定id时前面加一个字母或者字符串就行了，获取的时候也注意加上这个就可以了。

<el-checkbox :id="'a'+item.id" v-if="item.pid===data.id" :label="item.id" :checked="treeNodeBtnMenuObj[item.id]"
      @change="changeTreeCustomNodeAfterCheckbox(item.id)">{{item.name}}</el-checkbox>
</span>

document.querySelector('#a' + btnMenuItem.id);

2、vue里使用时注意生命周期

要在mounted以后的钩子里面使用，如果在created里面调用的话这时候还没有页面元素被加载，所以获取的话会直接报错。