uni.getElementById(id) @getelementbyid

# uni.getElementById(id)

返回一个匹配特定 ID 的元素，如果不存在，返回 null。
如果需要获取指定的节点类型，需要使用 as 进行类型转换。
ID 区分大小写，且应该是唯一的。如果存在多个匹配的元素，则返回第一个匹配的元素。

# # Parameters

name	type	required	default	description
id	string.IDString \| string	YES	-	-

3.93+ 支持泛型，可通过 uni.getElementById<ElementType>(id) 获取指定类型的元素。对于组件有自带方法的情况，通过泛型指定具体的元素类型，就可以调用该类型组件的专用方法，比如unicloud-db组件。
具体的组件元素类型，可查阅组件文档/组件类型获取。

# # Return value

Type	optinal
Element	NO

# # Example

hello uni-app x

<template>
 <view>
   <page-head id="page-head" title="getElementById"></page-head>
   <view class="uni-padding-wrap">
     <text id="text">this is text</text>
     <view id="view" class="uni-common-mt" style="border: 1px solid red"
       >this is view</view
     >
     <button class="uni-btn" @click="changePageHeadBackgroundColor">
       修改 page-head 背景色
     </button>
     <button class="uni-btn" @click="changeTextColor">
       修改 text 字体颜色
     </button>
     <button class="uni-btn" @click="changeViewStyle">
       修改 view 宽高及背景色
     </button>
     <button class="uni-btn" @click="goMultipleRootNode">
       跳转多根节点示例
     </button>
   </view>
 </view>
</template>

<script lang="uts">
export default {
 data() {
   return {
     checked: false,
     homePagePath: '/pages/tabBar/component',
     launchOptionsPath: '',
   }
 },
 methods: {
   getElementByNotExistId() : Element | null {
     return uni.getElementById('not-exist-id')
   },
   changePageHeadBackgroundColor() {
     const pageHead = uni.getElementById('page-head')!
     pageHead.style.setProperty('backgroundColor', 'red')
   },
   changeTextColor() {
     const text = uni.getElementById('text')!
     text.style.setProperty('color', 'red')
   },
   changeViewStyle() {
     const view = uni.getElementById<UniViewElement>('view')
     if (view !== null) {
       view.style.setProperty('width', '90%')
       view.style.setProperty('height', '50px')
       view.style.setProperty('backgroundColor', '#007AFF')
     }
   },
   goMultipleRootNode() {
     uni.navigateTo({ url: '/pages/API/get-element-by-id/get-element-by-id-multiple-root-node' })
   }
 }
}
</script>