diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt index 71827c0522323ac..e801a8799086c2b 100644 --- a/.vscode/dictionaries/terms-abbreviations.txt +++ b/.vscode/dictionaries/terms-abbreviations.txt @@ -782,7 +782,6 @@ tileset timebox timecode timecodes -timerange timeslice timeslices timestep diff --git a/files/en-us/web/api/htmlformcontrolscollection/index.md b/files/en-us/web/api/htmlformcontrolscollection/index.md index 7efef5c007bb49a..2943639153ef3f4 100644 --- a/files/en-us/web/api/htmlformcontrolscollection/index.md +++ b/files/en-us/web/api/htmlformcontrolscollection/index.md @@ -9,6 +9,8 @@ browser-compat: api.HTMLFormControlsCollection The **`HTMLFormControlsCollection`** interface represents a _collection_ of HTML _form control elements_, returned by the {{domxref("HTMLFormElement")}} interface's {{domxref("HTMLFormElement.elements", "elements")}} property. +The collection returned by {{domxref("HTMLFormElement.elements")}} includes the form's associated listed form controls. See {{domxref("HTMLFormElement.elements")}} for the list of [listed form controls](/en-US/docs/Web/API/HTMLFormElement/elements#value) and an explanation of [form association](/en-US/docs/Web/API/HTMLFormElement/elements#associated_form_controls). + This interface replaces one method from {{domxref("HTMLCollection")}}, on which it is based. {{InheritanceDiagram}} diff --git a/files/en-us/web/api/htmlformelement/elements/index.md b/files/en-us/web/api/htmlformelement/elements/index.md index 7045477f9867ba8..5b365347e5d7d05 100644 --- a/files/en-us/web/api/htmlformelement/elements/index.md +++ b/files/en-us/web/api/htmlformelement/elements/index.md @@ -8,33 +8,23 @@ browser-compat: api.HTMLFormElement.elements {{APIRef("HTML DOM")}} -The {{domxref("HTMLFormElement")}} property -**`elements`** returns an -{{domxref("HTMLFormControlsCollection")}} listing all the form controls contained in -the {{HTMLElement("form")}} element. +The **`elements`** property of the {{domxref("HTMLFormElement")}} interface returns an {{domxref("HTMLFormControlsCollection")}} listing all the listed form controls associated with the {{HTMLElement("form")}} element. -Independently, you can obtain just the -number of form controls using the {{domxref("HTMLFormElement.length", "length")}} -property. +You can access a particular form control in the returned collection by using either an index or the element's `name` or `id` attributes. -You can access a particular form control in the returned collection by using either an -index or the element's `name` or `id` attributes. +Prior to HTML 5, the returned object was an {{domxref("HTMLCollection")}}, on which `HTMLFormControlsCollection` is based. -Prior to HTML 5, the returned object was an {{domxref("HTMLCollection")}}, on which -`HTMLFormControlsCollection` is based. - -> [!NOTE] -> Similarly, you can get a list of all of the forms contained within a given document using the document's {{domxref("Document.forms", "forms")}} property. +Independently, you can obtain just the number of associated form controls using the {{domxref("HTMLFormElement.length", "length")}} property. You can get a list of all of the forms contained within a given document using the document's {{domxref("Document.forms", "forms")}} property. ## Value -An {{domxref("HTMLFormControlsCollection")}} containing all non-image controls in the form. -This is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the change. +An {{domxref("HTMLFormControlsCollection")}} containing all non-image controls associated with the form. +This is a live collection; if form controls are associated with or disassociated from the form, this collection will update to reflect the change. -The form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. +The form controls in the returned collection are in the same order in which they appear in the document by following a preorder, depth-first traversal of the tree. This is called **tree order**. -Only the following elements are returned: +Only the following form controls are returned: - {{HTMLElement("button")}} - {{HTMLElement("fieldset")}} @@ -74,12 +64,52 @@ const inputByIndex = inputs[0]; const inputByName = inputs["username"]; ``` +### Associated form controls + +This example demonstrates how the {{domxref("HTMLFormControlsCollection")}} contains the form controls associated with the form, rather than the controls physically nested in the `
`. + +The first form is full, with four form controls: one {{htmlelement("fieldset")}} and three {{htmlelement("input")}} elements. The {{htmlelement("legend")}} and {{htmlelement("label")}} elements are not listed form controls. The second form is sparse, with only one nested form control: a single {{htmlelement("object")}} element. All the form controls in the full form are associated with the sparse form via their `form` attribute. + +```html + + This form looks full, but it has no associated form controls +
+ This is a legend + + + +
+
+ +
+ Lone form control +
+``` + +We use the `elements` property to get the `HTMLFormControlsCollection` for each form. + +```js +const sparse = document.getElementById("sparseForm").elements; +const full = document.getElementById("fullForm").elements; +``` + +The collection includes the form element's associated form controls, meaning all the {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, and form-associated custom elements associated with the form, even if those elements are nested in another form, or not nested in any form. + +```js +console.log(`sparse form: ${sparse.length}`); // sparse form: 5 +console.log(`full form: ${full.length}`); // full form: 0 +``` + +The collection's form controls are in the same order in which they appear in the document. + +```js +console.log(`first member: ${sparse[0].tagName}`); // first member: FIELDSET +console.log(`last member: ${sparse[sparse.length - 1].tagName}`); // last member: OBJECT +``` + ### Accessing form controls -This example gets the form's element list, then iterates over the list, looking for -{{HTMLElement("input")}} elements of type -[`"text"`](/en-US/docs/Web/HTML/Reference/Elements/input/text) so that some -form of processing can be performed on them. +This example gets the form's element list, then iterates over the list, looking for {{HTMLElement("input")}} elements of type [`"text"`](/en-US/docs/Web/HTML/Reference/Elements/input/text) so that some form of processing can be performed on them. ```js const inputs = document.getElementById("my-form").elements; diff --git a/files/en-us/web/api/web_components/using_custom_elements/index.md b/files/en-us/web/api/web_components/using_custom_elements/index.md index 0861b1b03d9e5ea..b999e20553f17c2 100644 --- a/files/en-us/web/api/web_components/using_custom_elements/index.md +++ b/files/en-us/web/api/web_components/using_custom_elements/index.md @@ -21,9 +21,15 @@ There are two types of custom element: > [!NOTE] > Safari does not plan to support customized built-in elements. See the [`is` attribute](/en-US/docs/Web/HTML/Reference/Global_attributes/is) for more information. +For both kinds of custom element, the basic steps to create and use them are the same: + +- You first [implement its behavior](#implementing_a_custom_element) by defining a JavaScript class. +- You then [register the custom element](#registering_a_custom_element) to the current page. +- Finally, you can [use the custom element](#using_a_custom_element) in your HTML or JavaScript code. + ## Implementing a custom element -A custom element is implemented as a [class](/en-US/docs/Web/JavaScript/Reference/Classes) which extends {{domxref("HTMLElement")}} (in the case of autonomous elements) or the interface you want to customize (in the case of customized built-in elements). +A custom element is implemented as a [class](/en-US/docs/Web/JavaScript/Reference/Classes) which extends {{domxref("HTMLElement")}} (in the case of autonomous elements) or the interface you want to customize (in the case of customized built-in elements). This class will not be called by you, but will be called by the browser. Immediately after defining the class, you should [register](#registering_a_custom_element) the custom element, so you can create instances of it using standard DOM practices, such as writing the element in HTML markup, calling {{domxref("document.createElement()")}}, etc. Here's the implementation of a minimal custom element that customizes the {{HTMLElement("p")}} element: diff --git a/files/en-us/web/http/guides/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md b/files/en-us/web/http/guides/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md index b6a781294340715..d060f4b436fb3c8 100644 --- a/files/en-us/web/http/guides/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md +++ b/files/en-us/web/http/guides/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.md @@ -498,12 +498,12 @@ If only a single value is specified (from each category: hour, minute, second), #### Examples ```js-nolint -timerange(12); // returns true from noon to 1pm -timerange(12, 13) // returns true from noon to 1pm -timerange(12, "GMT") // returns true from noon to 1pm, in the GMT timezone -timerange(9, 17) // returns true from 9am to 5pm -timerange(8, 30, 17, 0) // returns true from 8:30am to 5:00pm -timerange(0, 0, 0, 0, 0, 30) // returns true between midnight and 30 seconds past midnight +timeRange(12); // returns true from noon to 1pm +timeRange(12, 13) // returns true from noon to 1pm +timeRange(12, "GMT") // returns true from noon to 1pm, in the GMT timezone +timeRange(9, 17) // returns true from 9am to 5pm +timeRange(8, 30, 17, 0) // returns true from 8:30am to 5:00pm +timeRange(0, 0, 0, 0, 0, 30) // returns true between midnight and 30 seconds past midnight ``` ### alert() diff --git a/files/en-us/web/javascript/reference/global_objects/map/map/index.md b/files/en-us/web/javascript/reference/global_objects/map/map/index.md index 33ac2ec8386cc3b..8cf27e6756d5382 100644 --- a/files/en-us/web/javascript/reference/global_objects/map/map/index.md +++ b/files/en-us/web/javascript/reference/global_objects/map/map/index.md @@ -22,11 +22,7 @@ new Map(iterable) ### Parameters - `iterable` {{optional_inline}} - - : An {{jsxref("Array")}} or other - [iterable](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) object - whose elements are key-value pairs. (For example, arrays with two elements, - such as `[[ 1, 'one' ],[ 2, 'two' ]]`.) Each key-value pair is added to the - new `Map`. + - : If an [iterable object](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) (such as an array) is passed, all of its elements will be added to the new `Map`. Each element must be an object with two properties: `0` and `1`, which correspond to the key and value (for example, `[[1, "one"],[2, "two"]]`). If you don't specify this parameter, or its value is `null` or `undefined`, the new `Map` is empty. ## Examples diff --git a/files/en-us/web/javascript/reference/global_objects/set/set/index.md b/files/en-us/web/javascript/reference/global_objects/set/set/index.md index 10d1e5f95d44db6..ef97e9c43a883df 100644 --- a/files/en-us/web/javascript/reference/global_objects/set/set/index.md +++ b/files/en-us/web/javascript/reference/global_objects/set/set/index.md @@ -37,11 +37,7 @@ new Set(iterable) ### Parameters - `iterable` {{optional_inline}} - - : If an [iterable object](/en-US/docs/Web/JavaScript/Reference/Statements/for...of) is passed, all of its elements will be added to the new - `Set`. - - If you don't specify this parameter, or its value is `null`, the new - `Set` is empty. + - : If an [iterable object](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) (such as an array) is passed, all of its elements will be added to the new `Set`. If you don't specify this parameter, or its value is `null` or `undefined`, the new `Set` is empty. ### Return value