bendtherules/UiQuestions
1
0
Fork 0
mirror of https://github.com/bendtherules/UiQuestions.git synced 2026-08-18 22:02:42 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Added DocWrapper and Link component to address link issues

Browse Source
This commit is contained in:
Lakshya Thakur
2020-10-24 18:32:45 +05:30
parent ebb35a0833
commit 8298755373
5 changed files with 60 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/create-modify-element.mdx
+11 -5
View File
@@ -7,7 +7,11 @@ slug: /
import Admonition from "../components/Admonition"
import Accordion from "../components/Accordion"
import Link from "../components/Link"
import MDN from "../components/MDNBadge"
import DocWrapper from "../components/DocWrapper"
<DocWrapper>
:::note DOM interfaces
Every kind of **DOM** node is represented by an interface based on **Node** interface.
@@ -29,7 +33,7 @@ document.querySelector(".not-found"); // null
```
<Accordion>
<Admonition type="note" title="Also available on Element and fragment" id="element-has-qs">
<Admonition type="note" title="Also available on Element and fragment" id="link-element-has-qs">
Besides <b>Document</b>, this method is also available on <b>Element</b> and <b>DocumentFragment</b>.<br/>
If you want to look within a specific element, just use <code>ele.querySelector()</code> on the parent element.<br/>
If you want to look within a specific fragment, just use <code>df.querySelector()</code> on the parent fragment.
@@ -65,7 +69,7 @@ for (let p of paras) {
}
```
`querySelectorAll` is also available on <b>Element</b> and <b>DocumentFragment</b>, in the [same way as querySelector](#element-has-qs).
`querySelectorAll` is also available on <b>Element</b> and <b>DocumentFragment</b>, in the <Link title = "same way as querySelector" hash = "link-element-has-qs"/>.
<MDN title="querySelectorAll" url="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll" />
@@ -137,7 +141,7 @@ eleDiv.appendChild(eleH1)
then it is removed from its existing parent and then added to the new parent.
</Admonition>
<Admonition type="note" title="If it is DocumentFragment" id="appendChild-documentFragment">
<Admonition type="note" title="If it is DocumentFragment" id="link-appendChild-documentFragment">
If newNode is a DocumentFragment, then - instead of adding the fragment itself as a child,
the entire content of the fragment is added as children of the parent node.
</Admonition>
@@ -222,7 +226,7 @@ This method is used to create a new empty document fragment.
DocumentFragment can be considered to be a off-screen lightweight `document` object.
It is generally used for batching multiple operations - by doing them in the fragment over time and then rendering the whole content to the visible DOM in one shot .
Because fragment is not rendered, making changes to it doesn't cause any performance impact (no reflow). To **actually "render" the fragment** in the visible document, [use appendChild](#appendChild-documentFragment) or `insertBefore`.
Because fragment is not rendered, making changes to it doesn't cause any performance impact (no reflow). To **actually "render" the fragment** in the visible document, <Link title = "use appendChild" hash = "link-appendChild-documentFragment"/> or `insertBefore`.
```js
let fragment = document.createDocumentFragment()
@@ -243,4 +247,6 @@ outerEle.appendChild(fragment)
--------
In the next section, we'll see how to read information from a DOM element.
In the next section, we'll see how to read information from a DOM element.
</DocWrapper>