Blazor JS互操作场景下如何遍历IJSObjectReference类型的类数组对象

你遇到的报错本质是因为：Blazor JS互操作的返回值序列化仅支持JSON可序列化的基础类型，IJSObjectReference只是.NET侧对浏览器端JS对象的代理引用，本身不实现IEnumerable接口，也无法直接枚举。而document.getElementsByClassName返回的是HTMLCollection类数组对象，不是标准JS数组，默认无法被序列化器自动转换为.NET的集合类型。

如果不需要后续在.NET侧操作DOM元素的JS对象引用，可以直接在JS侧把类数组转成标准数组，提取需要的字段后返回可序列化的集合，无需处理对象引用：

@inject IJSRuntime _js

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 示例：直接返回所有class为foo的元素的textContent
            var elementTexts = await _js.InvokeAsync<IEnumerable<string>>(@"
                () => Array.from(document.getElementsByClassName('foo')).map(el => el.textContent)
            ");
            foreach (var text in elementTexts)
            {
                Console.WriteLine(text);
            }
        }
    }
}

如果需要保留每个元素的IJSObjectReference用于后续调用JS方法，可以先读取类数组的length属性，再循环按索引获取单个元素：

@inject IJSRuntime _js

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var elements = await _js.InvokeAsync<IJSObjectReference>("document.getElementsByClassName", "foo");
            // 获取类数组长度
            var length = await _js.InvokeAsync<int>("(arr) => arr.length", elements);
            
            for (int i = 0; i < length; i++)
            {
                // 按索引获取单个元素的JS对象引用
                var element = await _js.InvokeAsync<IJSObjectReference>("(arr, idx) => arr[idx]", elements, i);
                // 示例：给元素添加title属性
                await element.InvokeVoidAsync("setAttribute", "title", "Blazor动态设置");
                // 用完释放对象引用避免内存泄漏
                await element.DisposeAsync();
            }
            // 释放类数组本身的引用
            await elements.DisposeAsync();
        }
    }
}

如果经常需要处理JS类数组，可以提前在页面JS中注册通用转换方法，简化C#侧调用：

1. 页面全局JS代码：

window.BlazorInteropHelpers = {
    toJsArray: (arrayLike) => Array.from(arrayLike)
};

2. C#侧调用：

var elements = await _js.InvokeAsync<IJSObjectReference>("document.getElementsByClassName", "foo");
// 直接转成IJSObjectReference集合
var elementList = await _js.InvokeAsync<IEnumerable<IJSObjectReference>>("BlazorInteropHelpers.toJsArray", elements);

foreach (var element in elementList)
{
    // 处理元素逻辑
    await element.InvokeVoidAsync("classList.add", "highlight");
    await element.DisposeAsync();
}
await elements.DisposeAsync();

• 注意：所有IJSObjectReference实例使用完成后必须手动调用DisposeAsync释放，避免浏览器端内存泄漏。

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