mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
48 lines
2.5 KiB
Plaintext
48 lines
2.5 KiB
Plaintext
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: Get DOM element
|
|
---
|
|
|
|
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
|
|
|
|
# Get DOM element
|
|
|
|
<div class="ndl-image-with-background xl">
|
|
<CopyToClipboardButton json={{"nodes":[{"id":"da9a319e-46ae-0bba-f9f0-64115fd8326a","type":"Group","x":-26,"y":-78.00000000000003,"parameters":{},"ports":[],"children":[]},{"id":"432255e5-cf33-ab78-5dfc-c468fa2d35f0","type":"Javascript2","label":"Get DOM Element","x":-266,"y":-87,"parameters":{"code":"Script.Inputs = {\n group:\"reference\"\n}\n\nScript.Signals = {\n didMount() {\n const domElement = Script.Inputs.group.getDOMElement();\n //domElement.addEventListener(...)\n },\n willUnmount() {\n // const domElement = Script.Inputs.group.getDOMElement();\n // domElement.removeEventListener(...)\n }\n}\n","scriptInputs":[]},"ports":[],"children":[]}],"connections":[{"fromId":"da9a319e-46ae-0bba-f9f0-64115fd8326a","fromProperty":"didMount","toId":"432255e5-cf33-ab78-5dfc-c468fa2d35f0","toProperty":"didMount"},{"fromId":"da9a319e-46ae-0bba-f9f0-64115fd8326a","fromProperty":"willUnmount","toId":"432255e5-cf33-ab78-5dfc-c468fa2d35f0","toProperty":"willUnmount"},{"fromId":"da9a319e-46ae-0bba-f9f0-64115fd8326a","fromProperty":"this","toId":"432255e5-cf33-ab78-5dfc-c468fa2d35f0","toProperty":"group"}]}} />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
Sometimes you need to get access to the underlying DOM element and use the browser APIs directly.
|
|
|
|
To get from a visual Noodl node to a DOM element we'll connect a visual node to a Script node. The input type should be `"reference"` (or `"*"` to accept all types). This example uses a Group, but any visual node will work.
|
|
|
|
```js
|
|
Script.Inputs = {
|
|
group: 'reference',
|
|
}
|
|
```
|
|
|
|
Once we have the reference to a Noodl node we can get the DOM element reference with `getDOMElement()` on the Noodl node.
|
|
|
|
A visual node might be unmonted, or haven't had a chance to render yet. To make sure there's a DOM element we'll use the **Did Mount** output from the Noodl node. This makes sure we'll get the latest DOM reference, and that our code won't run until the visual node is actually rendered.
|
|
|
|
```js
|
|
Script.Inputs = {
|
|
group: 'reference',
|
|
}
|
|
|
|
Script.Signals = {
|
|
didMount() {
|
|
const domElement = Script.Inputs.group.getDOMElement()
|
|
//domElement.addEventListener(...)
|
|
},
|
|
willUnmount() {
|
|
// const domElement = Script.Inputs.group.getDOMElement();
|
|
// domElement.removeEventListener(...)
|
|
},
|
|
}
|
|
```
|