Introduce `getHtmlElement` function (#4123)

Inspired by discussion #4087, this PR adds a JavaScript function
`getHtmlElement` which always returns an HTML element. This is in
contrast to `getElement` which returns Vue components _or_ HTML
elements.

nicegui/elements/code.py

@@ -36,7 +36,7 @@ class Code(ContentElement, default_classes='nicegui-code'):
         timer(0.1, self._update_copy_button)
 
         self.client.on_connect(lambda: self.client.run_javascript(f'''
-            if (!navigator.clipboard) getElement({self.copy_button.id}).$el.style.display = 'none';
+            if (!navigator.clipboard) getHtmlElement({self.copy_button.id}).style.display = 'none';
         '''))
 
     async def show_checkmark(self) -> None:

nicegui/functions/javascript.py

@@ -7,7 +7,8 @@ def run_javascript(code: str, *, timeout: float = 1.0) -> AwaitableResponse:
 
     This function runs arbitrary JavaScript code on a page that is executed in the browser.
     The client must be connected before this function is called.
-    To access a client-side object by ID, use the JavaScript function `getElement()`.
+    To access a client-side Vue component or HTML element by ID,
+    use the JavaScript functions `getElement()` or `getHtmlElement()`.
 
     If the function is awaited, the result of the JavaScript code is returned.
     Otherwise, the JavaScript code is executed without waiting for a response.

nicegui/page_layout.py

@@ -62,7 +62,7 @@ class Header(ValueElement, default_classes='nicegui-header'):
             add_body_html(f'''
                 <script>
                     window.onload = () => {{
-                        const header = getElement({self.id}).$el;
+                        const header = getHtmlElement({self.id});
                         new ResizeObserver(() => {{
                             document.documentElement.style.scrollPaddingTop = `${{header.offsetHeight}}px`;
                         }}).observe(header);

nicegui/static/nicegui.js

@@ -43,6 +43,10 @@ function getElement(id) {
   return mounted_app.$refs["r" + _id];
 }
 
+function getHtmlElement(id) {
+  return document.getElementById(`c${id}`);
+}
+
 function runMethod(target, method_name, args) {
   if (typeof target === "object") {
     if (method_name in target) {

website/documentation/content/run_javascript_documentation.py

@@ -15,7 +15,7 @@ def main_demo() -> None:
             ui.notify(f'Browser time: {time}')
 
         def access_elements():
-            ui.run_javascript(f'getElement({label.id}).innerText += " Hello!"')
+            ui.run_javascript(f'getHtmlElement({label.id}).innerText += " Hello!"')
 
         ui.button('fire and forget', on_click=alert)
         ui.button('receive result', on_click=get_date)