121 lines
No EOL
3.4 KiB
Markdown
121 lines
No EOL
3.4 KiB
Markdown
Basics
|
|
https://www.w3schools.com/js/js_htmldom_document.asp
|
|
- DOM manipulation
|
|
- To remove a node
|
|
use `formElement.remove()`
|
|
- To append at last
|
|
`formElement.appendChild()`
|
|
- `remove` only needs a reference to the child. `removeChild` needs a reference both to the parent and the child. The result is identical.
|
|
document.body.removeChild(formElement). here body is upper section where formElement is lower one
|
|
- replaceChild(new, old)
|
|
- finding through collections : instead of finding though css selectors we can find through collections like body,head,forms,images,links. So to find form element through id use
|
|
`const x = document.forms["frm1"];`
|
|
here `frm1` is id
|
|
- `insertBefore(newNode,referenceNode)` : insert new node before refernce node
|
|
```js
|
|
// Get a reference to the parent node
|
|
const parentDiv = document.getElementById("childElement").parentNode;
|
|
|
|
// Begin test case [ 1 ] : Existing childElement (all works correctly)
|
|
let sp2 = document.getElementById("childElement");
|
|
parentDiv.insertBefore(newNode, sp2);
|
|
```
|
|
- `insertAfter(newnode,referenceNode)` : insert new node after refernce node
|
|
we can create it by
|
|
```js
|
|
function insertAfter(newNode, existingNode) {
|
|
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
|
|
}
|
|
```
|
|
- Insert at first position
|
|
`document.body.insertBefore(formElement,document.body.children[0])`
|
|
- access child and parent element
|
|
formElement.children => array of nodes
|
|
formElement.parentElement => node
|
|
- write vs appendChild
|
|
https://stackoverflow.com/questions/22172589/document-write-vs-appendchild
|
|
There is a difference between sequence. appendChild will execute on last but write during the stream
|
|
eg:
|
|
index1.html
|
|
```html
|
|
<script>
|
|
console.log('1');
|
|
var script = document.createElement('script');
|
|
script.src = 'someScript.js';
|
|
document.write(script.outerHTML);
|
|
</script>
|
|
<script>
|
|
console.log('3');
|
|
</script>
|
|
```
|
|
|
|
index2.html
|
|
```html
|
|
<script>
|
|
console.log('1');
|
|
var script = document.createElement('script');
|
|
script.src = 'someScript.js';
|
|
document.body.appendChild(script);
|
|
</script>
|
|
<script>
|
|
console.log('3');
|
|
</script>
|
|
```
|
|
Output in 1st case will be `1,2,3` and in second case will be `1,3,2`.
|
|
|
|
- html
|
|
innerHTML, innerText, textContent,outerHTML
|
|
unlike innerHTML, outerHTML also include the outer structure too
|
|
eg
|
|
```js
|
|
const div = document.createElement('div')
|
|
div.innerHTML= `<p> Hello </p>`
|
|
console.log(div.outerHTML) // outputs div and its innerHTML both
|
|
```
|
|
|
|
|
|
js maps
|
|
```js
|
|
const map = new Map();
|
|
|
|
map.set("a", 1);
|
|
map.set("b", 2);
|
|
map.set("c", 3);
|
|
|
|
console.log(map.get("a"));
|
|
// Expected output: 1
|
|
|
|
map.set("a", 97);
|
|
|
|
console.log(map.get("a"));
|
|
// Expected output: 97
|
|
|
|
console.log(map.size);
|
|
// Expected output: 3
|
|
|
|
map.delete("b");
|
|
|
|
console.log(map.size);
|
|
// Expected output: 2
|
|
```
|
|
|
|
forEach is also supported in maps in latest version of js, in old versions they may not be supported so use
|
|
`[...mapVariable].forEach` instead of `mapVariable.forEach`
|
|
|
|
|
|
|
|
collect all arrays from something and also being unique
|
|
```js
|
|
|
|
|
|
const VIDEOS = [
|
|
{
|
|
folder: "Nature Docs",
|
|
title: "Coral Reef at Dawn",
|
|
tags: ["ocean", "wildlife", "4k"],
|
|
url: "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
|
},
|
|
]
|
|
|
|
const allTags = [...new Set(VIDEOS.flatMap((v) => v.tags))].sort();
|
|
``` |