diff --git a/.nvmrc b/.nvmrc index 53d1c14db376ead..54c65116f15a683 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v22 +v24 diff --git a/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md b/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md index 2039ecffc20a61c..540c6a5fa02f02d 100644 --- a/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md +++ b/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md @@ -78,9 +78,7 @@ To begin with, let's put together a basic function. closeBtn.textContent = "x"; panel.appendChild(closeBtn); - closeBtn.addEventListener("click", () => - panel.parentNode.removeChild(panel), - ); + closeBtn.addEventListener("click", () => body.removeChild(panel)); ``` This is quite a lot of code to go through, so we'll walk you through it bit by bit. @@ -117,10 +115,10 @@ panel.appendChild(closeBtn); Finally, we call {{domxref("EventTarget/addEventListener", "addEventListener()")}} to add a function that will be called when the user clicks the "close" button. The code will delete the whole panel from the page — to close the message box. -Briefly, the `addEventListener()` method is provided by the button (or in fact, any element on the page) that can be passed a function and the name of an event. In this case, the name of the event is 'click', meaning that when the user clicks the button, the function will run. You'll learn a lot more about events in our [events article](/en-US/docs/Learn_web_development/Core/Scripting/Events). The line inside the function uses the {{domxref("Node.removeChild()")}} DOM API function to specify that we want to remove a specific child element of the HTML element — in this case, the panel `
`. +Briefly, the `addEventListener()` method can be called on any element on the page, and is usually passed two arguments: the name of an event and a function to run when the event occurs. In this case, the event name is `click`, meaning that when the user clicks the button, the function will run. You'll learn a lot more about events in our [events article](/en-US/docs/Learn_web_development/Core/Scripting/Events). The line inside the function uses the {{domxref("Node.removeChild()", "removeChild()")}} method to specify that we want to remove a specific child element of the `` element: in this case, the panel `
`. ```js -closeBtn.addEventListener("click", () => panel.parentNode.removeChild(panel)); +closeBtn.addEventListener("click", () => body.removeChild(panel)); ``` Basically, this whole block of code is generating a block of HTML that looks like so, and inserting it into the page: diff --git a/files/en-us/mozilla/firefox/releases/144/index.md b/files/en-us/mozilla/firefox/releases/144/index.md index c1f4cff6f57c132..d439daf0e0c203a 100644 --- a/files/en-us/mozilla/firefox/releases/144/index.md +++ b/files/en-us/mozilla/firefox/releases/144/index.md @@ -45,6 +45,7 @@ Firefox 144 was released on [October 14, 2025](https://whattrainisitnow.com/rele - The [View Transition API](/en-US/docs/Web/API/View_Transition_API) is now supported for [SPAs (single-page applications)](/en-US/docs/Glossary/SPA). This provides a mechanism for easily creating animated transitions between different website views. ([Firefox bug 1985809](https://bugzil.la/1985809)). - The {{domxref("CSSStyleProperties")}} interface of the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) is now implemented (this was renamed from a non-standard interface `CSS2Properties`). The new interface is present but not yet used. ([Firefox bug 1919582](https://bugzil.la/1919582)). - The {{domxref("PerformanceEventTiming.interactionId", "interactionId")}} property of the {{domxref("PerformanceEventTiming")}} interface is a unique identifier that associates related events belonging to a single user interaction. This can be used to calculate the {{glossary("Interaction to next paint")}} metric, which helps analyze responsiveness to user interaction over the lifetime of a page. ([Firefox bug 1956809](https://bugzil.la/1956809)). +- The {{domxref("Navigation.navigate()")}} method of the {{domxref("Navigation API", "Navigation API", "", "nocode")}} no longer accepts URLs with a scheme of `javascript`. Calling `navigate()` with a `javascript:` URL now throws a `NotSupportedError` exception. ([Firefox bug 1981104](https://bugzil.la/1981104)). #### DOM diff --git a/files/en-us/web/api/customelementregistry/get/index.md b/files/en-us/web/api/customelementregistry/get/index.md index 78f0ae9b89a1f04..cadd9bb0f04c8a7 100644 --- a/files/en-us/web/api/customelementregistry/get/index.md +++ b/files/en-us/web/api/customelementregistry/get/index.md @@ -34,16 +34,16 @@ customElements.define( "my-paragraph", class extends HTMLElement { constructor() { - let templateContent = document.getElementById("custom-paragraph").content; + const template = document.getElementById("custom-paragraph"); super() // returns element this scope .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot - .append(templateContent.cloneNode(true)); + .append(document.importNode(template.content, true)); } }, ); // Return a reference to the my-paragraph constructor -let ctor = customElements.get("my-paragraph"); +const ctor = customElements.get("my-paragraph"); ``` ## Specifications diff --git a/files/en-us/web/api/customelementregistry/getname/index.md b/files/en-us/web/api/customelementregistry/getname/index.md index 723608cb9856103..95406aade6a9839 100644 --- a/files/en-us/web/api/customelementregistry/getname/index.md +++ b/files/en-us/web/api/customelementregistry/getname/index.md @@ -32,10 +32,10 @@ The name for the previously defined custom element, or `null` if there is no cus ```js class MyParagraph extends HTMLElement { constructor() { - let templateContent = document.getElementById("custom-paragraph").content; + const template = document.getElementById("custom-paragraph"); super() // returns element this scope .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot - .append(templateContent.cloneNode(true)); + .append(document.importNode(template.content, true)); } } diff --git a/files/en-us/web/api/document/importnode/index.md b/files/en-us/web/api/document/importnode/index.md index c7c9cca89378a97..d3126bc8ea05384 100644 --- a/files/en-us/web/api/document/importnode/index.md +++ b/files/en-us/web/api/document/importnode/index.md @@ -8,17 +8,13 @@ browser-compat: api.Document.importNode {{APIRef("DOM")}} -The {{domxref("Document")}} object's **`importNode()`** method creates a copy of a -{{domxref("Node")}} or {{domxref("DocumentFragment")}} from another document, to be -inserted into the current document later. +The **`importNode()`** method of the {{domxref("Document")}} interface creates a copy of a {{domxref("Node")}} or {{domxref("DocumentFragment")}} from another document, to be inserted into the current document later. -The imported node is not yet included in the document tree. To include it, you need to -call an insertion method such as {{domxref("Node.appendChild", "appendChild()")}} or -{{domxref("Node.insertBefore", "insertBefore()")}} with a node that _is_ -currently in the document tree. +The imported node is not yet included in the document tree. To include it, you need to call an insertion method such as {{domxref("Node.appendChild", "appendChild()")}} or {{domxref("Node.insertBefore", "insertBefore()")}} with a node that _is_ currently in the document tree. -Unlike {{domxref("document.adoptNode()")}}, the original node is not removed from its -original document. The imported node is a clone of the original. +Unlike {{domxref("document.adoptNode()")}}, the original node is not removed from its original document. The imported node is a clone of the original. + +The {{domxref("Node.cloneNode()")}} method also creates a copy of a node. The difference is that `importNode()` clones the node in the context of the calling document, whereas `cloneNode()` uses the document of the node being cloned. The document context determines the {{domxref("CustomElementRegistry")}} for constructing any custom elements. For this reason, to clone nodes to be used in another document, use `importNode()` on the target document. The {{domxref("HTMLTemplateElement.content")}} is owned by a separate document, so it should also be cloned using `document.importNode()` so that custom element descendants are constructed using the definitions in the current document. See the {{domxref("Node.cloneNode()")}} page's examples for more details. ## Syntax @@ -50,6 +46,8 @@ The copied `importedNode` in the scope of the importing document. ## Examples +### Using importNode() + ```js const iframe = document.querySelector("iframe"); const oldNode = iframe.contentWindow.document.getElementById("myNode"); diff --git a/files/en-us/web/api/documentfragment/getelementbyid/index.md b/files/en-us/web/api/documentfragment/getelementbyid/index.md index 56155f048ac231f..52aff4b716116f8 100644 --- a/files/en-us/web/api/documentfragment/getelementbyid/index.md +++ b/files/en-us/web/api/documentfragment/getelementbyid/index.md @@ -102,7 +102,7 @@ function displayStatus() { while (fragmentViewer.hasChildNodes()) { fragmentViewer.removeChild(fragmentViewer.lastChild); } - for (entry of fragment.children) { + for (const entry of fragment.children) { fragmentViewer.appendChild(entry.cloneNode(true)); } } diff --git a/files/en-us/web/api/htmltemplateelement/content/index.md b/files/en-us/web/api/htmltemplateelement/content/index.md index 0ad4c38a622126c..bf376c92eb8f23e 100644 --- a/files/en-us/web/api/htmltemplateelement/content/index.md +++ b/files/en-us/web/api/htmltemplateelement/content/index.md @@ -8,9 +8,9 @@ browser-compat: api.HTMLTemplateElement.content {{APIRef("Web Components")}} -The **`HTMLTemplateElement.content`** property returns a -`