在C#中使用WebAssembly處理DOM操作時，需要借助JavaScript和HTML DOM。以下是一個簡單的示例，說明如何在C#中使用WebAssembly處理DOM操作。
<div>元素和一個按鈕。同時，引入WebAssembly的JavaScript庫（如Emscripten生成的wasm_exec.js）和C# WebAssembly模塊（如MyLibrary.dll）。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>C# WebAssembly DOM Example</title>
<script src="wasm_exec.js"></script>
<script src="C#WebAssemblyExample.js"></script>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<button onclick="changeText()">Click me</button>
<script src="MyLibrary.js"></script>
</body>
</html>
MyLibrary.cs），并編寫處理DOM操作的代碼。這里我們使用JavaScriptInterop屬性來調用JavaScript函數。using System;
using System.Runtime.InteropServices;
using WebAssembly;
public class MyLibrary
{
[DllImport("__wasm_env", CallingConvention = CallingConvention.Cdecl)]
private static extern void alert(string message);
[JavaScriptInterop]
public static void ChangeText()
{
alert("Text changed!");
// 在這里調用JavaScript函數來操作DOM
InvokeJavaScriptFunction("changeTextInDom");
}
[JavaScriptInterop]
public static void InvokeJavaScriptFunction(string functionName)
{
var js = new JSRuntime();
js.InvokeVoidAsync(functionName);
}
}
C#WebAssemblyExample.js），用于處理DOM操作。在這個例子中，我們將在點擊按鈕時更改<div>元素的文本內容。function changeTextInDom() {
document.getElementById("myDiv").innerText = "Text changed by JavaScript!";
}
使用Emscripten將C#代碼編譯為WebAssembly模塊（如MyLibrary.js和MyLibrary.wasm）。確保在編譯時包含-s ALLOW_MEMORY_GROWTH=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' --pre-js myLibrary.js參數。
最后，將生成的WebAssembly模塊（如MyLibrary.wasm）和JavaScript文件（如C#WebAssemblyExample.js）放在與HTML文件相同的目錄中。現在，當用戶點擊按鈕時，C# WebAssembly模塊將通過JavaScript調用DOM操作函數，從而更改<div>元素的文本內容。
