Vue3如何获取和操作DOM元素

环境：vue3+ts+vite
目标：
1.修改DOM的文本值和样式
2.获取后代子DOM元素,操作修改

<template><div class="content"><h1>演示h1><p ref="pText1">这是ref为pText1的一段文本p>div>
template>
<script lang="ts" setup>
import {ref} from 'vue'
const pText1=ref()
console.log(pText1.value)script>

发现此时定义的pText1打印的值是undefined，这个情况发生原因是未真正获取到DOM元素，并不是我们定义的const pText1=ref()里面是空的问题。于是在生命钩子里面执行看看是什么？

<template><div class="content" style="padding: 0 30px;"><h1>演示h1><p ref="pText1">这是ref为pText1的一段文本p>div>
template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
console.log(pText1.value)
onMounted(()=>{console.log(pText1.value)
})
script>

看到了吧。那接下来就知道怎么操作了,加一下颜色

onMounted(()=>{console.log(pText1.value)pText1.value.style.color='red'
})

再改个文本值看看

onMounted(()=>{console.log(pText1.value)pText1.value.style.color='red'pText1.value.innerText='我是修改后的文本值'
})

当然，我们不一定要页面加载就执行，我们可以定义一个方法来执行DOM修改操作：

<template><div class="content" style="padding: 0 30px;"><h1>演示h1><p ref="pText1">这是ref为pText1的一段文本p><el-button @click="changeText" type="primary">点我修改el-button>div>
template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
const changeText=()=>{console.log(pText1.value)pText1.value.style.color='red'pText1.value.innerText='我是点击后修改的文本值'
}
/*onMounted(()=>{console.log(pText1.value)pText1.value.style.color='red'pText1.value.innerText='我是修改后的文本值'
})*/
script>

点击按钮前：

点击按钮后：

获取后代子DOM元素,操作修改

<template><div class="content" style="padding: 0 30px;"><h1>演示h1><p ref="pText1">这是ref为pText1的一段文本 <span>aaaaaaaspan>p>div>
template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
onMounted(()=>{//console.log(pText1)console.log(pText1.value.children[0].innerHTML)pText1.value.children[0].style.color='red';pText1.value.children[0].innerText='我是修改后的span的文本';
})
script>

总之，想要获取DOM元素属性，可以先打印出来，按需取值即可：

<template><div class="content" style="padding: 0 30px;"><h1>演示h1><p ref="pText1">这是ref为pText1的一段文本 <span>aaaaaaaspan>p>div>
template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
onMounted(()=>{console.log(pText1)
})
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！