可在 vue 中获取标签的方法有：使用 ref 属性（获取 dom 元素）、使用 queryselector（在根元素中查找）、使用 document.getelementbyid（依据 id 获取）、使用 element 库的 $ 方法（无需 id）以及遍历 dom 节点。
如何在 Vue 中获取标签
在 Vue 中获取标签有以下几种方法：
1. 使用 ref 属性
给标签添加一个 ref 属性，可以获取标签的 DOM 元素。
立即学习“前端免费学习笔记（深入）”；
<code class="html"><template>
<div ref="myDiv">
...
</div>
</template>
<script>
export default {
mounted() {
const myDiv = this.$refs.myDiv;
}
}
</script></code>2. 使用 querySelector
使用 querySelector 方法可以在组件的根元素中查找标签。
<code class="html"><template>
<div id="app">
...
</div>
</template>
<script>
export default {
mounted() {
const myDiv = document.querySelector('#app div');
}
}
</script></code>3. 使用 document.getElementById
使用 document.getElementById 方法可以基于 ID 获取标签。
<code class="html"><template>
<div id="myDiv">
...
</div>
</template>
<script>
export default {
mounted() {
const myDiv = document.getElementById('myDiv');
}
}
</script></code>4. 使用 Element 库的 $ 方法
如果不确定标签的 ID，可以使用 Element 库的 $ 方法获取标签。
<code class="html"><template>
<div class="my-div">
...
</div>
</template>
<script>
import { $ } from 'element-ui';
export default {
mounted() {
const myDiv = $('my-div');
}
}
</script></code>5. 遍历 DOM 节点
可以使用 document.documentElement.childNodes 和 Element.childNodes 属性遍历 DOM 节点，找到目标标签。
<code class="html"><template>
<div>
...
</div>
</template>
<script>
export default {
mounted() {
const myDiv = findElement((node) => node.tagName === 'DIV', document.documentElement);
}
}
function findElement(predicate, node) {
if (predicate(node)) {
return node;
}
for (let i = 0; i < node.childNodes.length; i++) {
const found = findElement(predicate, node.childNodes[i]);
if (found) {
return found;
}
}
return null;
}
</script></code> 
