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>
		```
		&nbsp;
		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
	 ```
	  &nbsp;

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`

&nbsp;

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();
```