forked from mdn/content
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Demix Parentnode.children to Element, Document, DocumentFragment pages (
mdn#4065) * yarn content move Web/API/ParentNode/children Web/API/Element/children * Update Element.children * Add children to Element interface listing * Update Document and DocumentFragment interface pages * Add docs for DocumentFragment.children * Add docs for Document.children * Add a usage note on Element.children vs Node.childNodes * Update links * Remove redirects for now existing pages
- Loading branch information
Showing
10 changed files
with
263 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| --- | ||
| title: Document.children | ||
| slug: Web/API/Document/children | ||
| tags: | ||
| - API | ||
| - DOM | ||
| - Element | ||
| - HTMLCollection | ||
| - Property | ||
| - children | ||
| --- | ||
| <div>{{ APIRef("DOM") }}</div> | ||
|
|
||
| <p>The read-only <code><strong>children</strong></code> property returns a live {{domxref("HTMLCollection")}} | ||
| which contains all of the child {{domxref("Element", "elements")}} of the document upon which it was called.</p> | ||
|
|
||
| <p>For HTML documents, this is usually only the root <code><html></code> element.</p> | ||
|
|
||
| <p>See {{domxref("Element.children")}} for child elements of specific HTML elements within the document.</p> | ||
|
|
||
| <h2 id="Syntax">Syntax</h2> | ||
|
|
||
| <pre class="brush: js"> | ||
| // Getter | ||
| collection = document.children; | ||
|
|
||
| // No setter; read-only property | ||
| </pre> | ||
|
|
||
| <h3 id="Return_value">Return value</h3> | ||
|
|
||
| <p>An {{ domxref("HTMLCollection") }} which is a live, ordered collection of the DOM | ||
| elements which are children of the current document. You can access the | ||
| individual child nodes in the collection by using either the | ||
| {{domxref("HTMLCollection.item()", "item()")}} method on the collection, or by using | ||
| JavaScript array-style notation.</p> | ||
|
|
||
| <p>If the document has no element children, then <code>children</code> is an empty list with a | ||
| <code>length</code> of <code>0</code>.</p> | ||
|
|
||
| <h2 id="Example">Example</h2> | ||
|
|
||
| <pre class="brush: js"> | ||
| document.children; | ||
| // HTMLCollection [<html>] | ||
| // Usually only contains the root <html> element, the document's only direct child | ||
| </pre> | ||
|
|
||
| <p>See {{domxref("Element.children")}} for child elements of specific HTML elements within the document.</p> | ||
|
|
||
|
|
||
| <h2 id="Specifications">Specifications</h2> | ||
|
|
||
| <table class="standard-table"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Specification</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <p>{{Compat("api.Document.children")}}</p> | ||
|
|
||
| <h2 id="See_also">See also</h2> | ||
|
|
||
| <ul> | ||
| <li>{{domxref("Element.children")}}</li> | ||
| <li>{{domxref("Node.childNodes")}}</li> | ||
| </ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| --- | ||
| title: DocumentFragment.children | ||
| slug: Web/API/DocumentFragment/children | ||
| tags: | ||
| - API | ||
| - DOM | ||
| - Element | ||
| - HTMLCollection | ||
| - Property | ||
| - children | ||
| --- | ||
| <div>{{ APIRef("DOM") }}</div> | ||
|
|
||
| <p>The read-only <code><strong>children</strong></code> property returns a live {{domxref("HTMLCollection")}} | ||
| which contains all of the child {{domxref("Element", "elements")}} of the document fragment upon which it was called.</p> | ||
|
|
||
| <h2 id="Syntax">Syntax</h2> | ||
|
|
||
| <pre class="brush: js"> | ||
| // Getter | ||
| collection = myFragment.children; | ||
|
|
||
| // No setter; read-only property | ||
| </pre> | ||
|
|
||
| <h3 id="Return_value">Return value</h3> | ||
|
|
||
| <p>An {{ domxref("HTMLCollection") }} which is a live, ordered collection of the DOM | ||
| elements which are children of the document fragment. You can access the | ||
| individual child nodes in the collection by using either the | ||
| {{domxref("HTMLCollection.item()", "item()")}} method on the collection, or by using | ||
| JavaScript array-style notation.</p> | ||
|
|
||
| <p>If the document fragment has no element children, then <code>children</code> is an empty list with a | ||
| <code>length</code> of <code>0</code>.</p> | ||
|
|
||
| <h2 id="Example">Example</h2> | ||
|
|
||
| <pre class="brush: js"> | ||
| let fragment = new DocumentFragment() | ||
| fragment.children; // HTMLCollection [] | ||
|
|
||
| let paragraph = document.createElement('p') | ||
| fragment.appendChild(paragraph) | ||
|
|
||
| fragment.children; // HTMLCollection [<p>] | ||
| </pre> | ||
|
|
||
| <h2 id="Specifications">Specifications</h2> | ||
|
|
||
| <table class="standard-table"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Specification</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <p>{{Compat("api.DocumentFragment.children")}}</p> | ||
|
|
||
| <h2 id="See_also">See also</h2> | ||
|
|
||
| <ul> | ||
| <li> | ||
| {{domxref("Node.childNodes")}} | ||
| </li> | ||
| </ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| --- | ||
| title: Element.children | ||
| slug: Web/API/Element/children | ||
| tags: | ||
| - API | ||
| - DOM | ||
| - Element | ||
| - HTMLCollection | ||
| - Property | ||
| - children | ||
| --- | ||
| <div>{{ APIRef("DOM") }}</div> | ||
|
|
||
| <p>The read-only <code><strong>children</strong></code> property returns a live {{domxref("HTMLCollection")}} | ||
| which contains all of the child {{domxref("Element", "elements")}} of the element upon which it was called.</p> | ||
|
|
||
| <p><code>Element.children</code> includes only element nodes. To get all child nodes, including non-element nodes like text and comment nodes, use {{domxref("Node.childNodes")}}.</p> | ||
|
|
||
| <h2 id="Syntax">Syntax</h2> | ||
|
|
||
| <pre class="brush: js"> | ||
| // Getter | ||
| collection = myElement.children; | ||
|
|
||
| // No setter; read-only property | ||
| </pre> | ||
|
|
||
| <h3 id="Return_value">Return value</h3> | ||
|
|
||
| <p>An {{ domxref("HTMLCollection") }} which is a live, ordered collection of the DOM | ||
| elements which are children of <code><var>node</var></code>. You can access the | ||
| individual child nodes in the collection by using either the | ||
| {{domxref("HTMLCollection.item()", "item()")}} method on the collection, or by using | ||
| JavaScript array-style notation.</p> | ||
|
|
||
| <p>If the element has no element children, then <code>children</code> is an empty list with a | ||
| <code>length</code> of <code>0</code>.</p> | ||
|
|
||
| <h2 id="Example">Example</h2> | ||
|
|
||
| <pre class="brush: js">const myElement = document.getElementById('foo'); | ||
| for (let i = 0; i < myElement.children.length; i++) { | ||
| console.log(myElement.children[i].tagName); | ||
| } | ||
| </pre> | ||
|
|
||
| <h2 id="Specifications">Specifications</h2> | ||
|
|
||
| <table class="standard-table"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Specification</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h2 id="Browser_compatibility">Browser compatibility</h2> | ||
|
|
||
| <p>{{Compat("api.Element.children")}}</p> | ||
|
|
||
| <h2 id="See_also">See also</h2> | ||
|
|
||
| <ul> | ||
| <li> | ||
| {{domxref("Node.childNodes")}} | ||
| </li> | ||
| </ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.