Blazor Telerik Razor页面中document.getElementById()返回null的原因

问题场景 #

在Razor组件的OnAfterRenderAsync方法（仅首次渲染时）调用自定义JS函数，尝试通过设置的ID获取TelerikDatePicker对应的DOM元素，但document.getElementById()始终返回null。相关代码结构如下：

Razor模板代码 #

<TelerikDatePicker Id="EFFT_DT" Format="MM/dd/yyyy" @bind-Value="@pro"
                    Width="150px"></TelerikDatePicker>
<span class="required">*</span>

JS函数代码 #

<script suppress-error="BL9992">
     function attachFocusHandler(id, componentClass) {
         var element = document.getElementById(id); // 返回NULL
         if (element) {             
             // 无法进入此分支
         }
     }
</script>

C#代码 #

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await js.InvokeVoidAsync("attachFocusHandler", "EFFT_DT", ".k-datepicker");
    }
    await base.OnAfterRenderAsync(firstRender);       
}

核心原因 #

1. Telerik组件的DOM封装特性：你设置的Id="EFFT_DT"并非直接绑定到最终可交互的<input>元素上，而是作为组件外层容器的ID。Telerik Blazor组件会生成嵌套的DOM结构，实际的输入元素是容器内部的子元素，其ID和你设置的不一致。
2. 组件内部异步渲染：即使OnAfterRenderAsync触发时组件已完成初始渲染，Telerik组件内部可能仍在通过JS Interop完成DOM的最终初始化，此时目标元素尚未被创建。

解决办法 #

方法1：使用Telerik组件的官方API获取元素 #

Telerik Blazor组件提供了GetElementAsync()方法，可以直接获取组件对应的底层DOM元素引用，无需依赖ID：

<TelerikDatePicker @ref="DatePickerRef" Id="EFFT_DT" Format="MM/dd/yyyy" @bind-Value="@pro" Width="150px"></TelerikDatePicker>

@code {
    private TelerikDatePicker DatePickerRef { get; set; }
    [Inject] private IJSRuntime js { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var targetElement = await DatePickerRef.GetElementAsync();
            await js.InvokeVoidAsync("attachFocusHandler", targetElement, ".k-datepicker");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

对应的JS函数修改为接收元素引用：

function attachFocusHandler(element, componentClass) {
    if (element) {
        // 直接使用传入的元素绑定事件或执行逻辑
        element.addEventListener('focus', function() {
            // 你的业务逻辑
        });
    }
}

方法2：通过类选择器定位内部元素 #

Telerik组件会给内部输入元素添加k-datepicker-input类，可以结合容器ID来定位目标元素：

function attachFocusHandler(id, componentClass) {
    var container = document.getElementById(id);
    if (container) {
        var targetElement = container.querySelector('.k-datepicker-input');
        if (targetElement) {
            // 执行你的逻辑
        }
    }
}

方法3：延迟执行JS代码 #

如果是组件内部异步渲染导致的元素未就绪，可以给JS调用添加短暂延迟，确保DOM完全生成：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await Task.Delay(100); // 延迟100ms，时间可根据实际调整
        await js.InvokeVoidAsync("attachFocusHandler", "EFFT_DT", ".k-datepicker");
    }
    await base.OnAfterRenderAsync(firstRender);       
}

内容的提问来源于stack exchange，提问作者Deepika