How to manipulate the DOM in Rust Webassembly?

Example 1

This example demonstrates the get_element_by_id method of the document element. The method retrieves the "paragraphId" element and then log its inner text to the console.

	pub fn document_get_element_by_id()
	{
		let window = web_sys::window().expect("global window does not exists");    
		let document = window.document().expect("expecting a document on window");
		//let body = document.body().expect("document expect to have have a body");
		let val = document.get_element_by_id("paragraphId")
		.unwrap()
		.dyn_into::<web_sys::HtmlElement>()
		.unwrap();
		web_sys::console::log_2(&"URL: %s".into(),&JsValue::from_str(&val.inner_text()));
	}

Example 2

Create an Element node by tagName (e.g. "p", "div").

	pub fn document_create_element()
	{
		let window = web_sys::window().expect("global window does not exists");    
		let document = window.document().expect("expecting a document on window");
		let body = document.body().expect("document expect to have have a body");
		let val = document.create_element("p").unwrap();
		val.set_inner_html("Hello World from WebAssemblyMan!");
		body.append_child(&val).unwrap();
	}	

Example 3

This example demonstrates the use of document.query_selector to select a <p> element. If there are multiple <p> element, the first one gets selected.

The method returns a Result<Option<Element>, JsValue>, thus requiring multiple unwrap in the code below. After getting the HtmlElement, the set_inner_text method is called to set a "Hello..." message.

    pub fn document_query_selector()
    {
        let window = web_sys::window().expect("global window does not exists");    
        let document = window.document().expect("expecting a document on window");
        let val = document.query_selector("p")
                    .unwrap()
                    .unwrap()
                    .dyn_into::<web_sys::HtmlElement>()
                    .unwrap();
        val.set_inner_text(&"Hello from querySelector");
    }

Source Code for Example 1, 2 & 3

• GitHub - web_sys_document

Example 4

This example gets the HTML canvas element, set the width/height, get the 2d rendering context, use the context to draw a rectangle and fill it with color.

    pub fn htmlcanvaselement_set_width_height()
    {
        let document = web_sys::window().unwrap().document().unwrap();
        let canvas = document.get_element_by_id("canvas").unwrap();
        let canvas: web_sys::HtmlCanvasElement = canvas
            .dyn_into::<web_sys::HtmlCanvasElement>()
            .map_err(|_| ())
            .unwrap();
    
        canvas.set_width(500);
        canvas.set_height(500);
        
        let context = canvas
            .get_context("2d")
            .unwrap()
            .unwrap()
            .dyn_into::<web_sys::CanvasRenderingContext2d>()
            .unwrap();
    
        context.begin_path();
    
        context
            .rect(75.0, 75.0, 50.0, 50.0);
    
        context.fill();
    
    }    

Source Code

• GitHub - web_sys_canvasrenderingcontext2d