-
-
Save yogain123/9e30a0be7b7c7520e0866000e11db5be to your computer and use it in GitHub Desktop.
| hola |
DOM Tree
The backbone of an HTML document are tags.
According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called “children” of the enclosing one.
The text inside a tag it is an object as well.
All these objects are accessible using JavaScript.
Walking the DOM
Searching element
inner and outer html
$_ will store the last printed value of console
Event Listener
Event Delegation
Instead of putting event handler to all child , we delegate that task and put one event handler to its parent and , and in callback we get its child events and work using it ...
Walking The DOM
= document.documentElement = document.body = document.head
innerHTML and outerHTML
let p = document.body.innerHTML;
let p = document.getElementById("id").innerHTML;
querySelector
The call to document.querySelector(css) returns the first element for the given CSS selector.
In other words, the result is the same as elem.querySelectorAll(css)[0]
Attributes and properties
- elem.hasAttribute(name) – checks for existence.
- elem.getAttribute(name) – gets the value.
- elem.setAttribute(name, value) – sets the value.
- elem.removeAttribute(name) – removes the attribute.
<body>
<div id="elem" about="Elephant"></div>
<script>
alert( document.getElementById('elem').getAttribute('about') ); // (1) 'Elephant', reading
document.getElementById('elem').setAttribute('test', 123); // (2), writing
alert( document.getElementById('elem').outerHTML ); // (3), see it's there
for (let attr of document.getElementById('elem').attributes) { // (4) list all
alert( `${attr.name} = ${attr.value}` );
}
</script>
</body>
Introductions To Events
Mouse events:
- click – when the mouse clicks on an element (touchscreen devices generate it on a tap).
- contextmenu – when the mouse right-clicks on an element.
- mouseover / mouseout – when the mouse cursor comes over / leaves an element.
- mousedown / mouseup – when the mouse button is pressed / released over an element.
- mousemove – when the mouse is moved.
Form element events:
- submit – when the visitor submits a .
- focus – when the visitor focuses on an element, e.g. on an .
Keyboard events:
- keydown and keyup – when the visitor presses and then releases the button.
Bubbling and capturing
The bubbling principle is simple.
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
http://plnkr.co/edit/ZcEbAiqTzywtFxoHdF2Z?p=info
event.target
A handler on a parent element can always get the details about where it actually happened.
<form id="form">FORM
<div>DIV
<p>P</p>
</div>
</form>
document.getElementById("form").onclick = function(event) {
event.target.style.backgroundColor = 'yellow';
// chrome needs some time to paint yellow
setTimeout(() => {
alert("target = " + event.target.tagName + ", this=" + this.tagName);
event.target.style.backgroundColor = ''
}, 0);
};
Stopping bubbling
A bubbling event goes from the target element straight up. Normally it goes upwards till , and then to document object, and some events even reach window, calling all handlers on the path.
event.stopPropagation()
Capturing
There’s another phase of event processing called “capturing”. It is rarely used in real code, but sometimes can be useful.
The standard DOM Events describes 3 phases of event propagation:
- Capturing phase – the event goes down to the element.
- Target phase – the event reached the target element.
- Bubbling phase – the event bubbles up from the element.
Prevent Browser default actions
event.preventDefault();
=======
<html>
<p id="check">Hello India</p>
</html>
document.querySelector("#check").addEventListener("click", function(){
document.getElementById("check").innerHTML = "Hello World";
//or something
});
Resource loading
Let’s say we need to call a function that resides in an external script.
…But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it.
script.onload
let script = document.createElement('script');
// can load any script, from any domain
script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
document.head.append(script);
script.onload = function() {
// the script creates a helper function "_"
alert(_); // the function is available
script.onerror = function() {
alert("Error loading " + this.src); // Error loading https://example.com/404.js
};
};
Forms
input and textarea
input.value = "New value";
textarea.value = "New text";
input.checked = true; // for a checkbox or radio button
select and option
So the ways to set the value of a select is :
<select id="select">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="banana">Banana</option>
</select>
<script>
select.value = 'banana';
</script>
onfocus and onblur
onchange and oninput
Event: submit
Browser environment, specs
There’s a “root” object called window
function sayHi() {
alert("Hello");
}
window.sayHi();
alert(window.innerHeight); // inner window height
The document object gives access to the page content
/ change the background color to red
document.body.style.background = "red";
// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id="parent">
<li class="child">one</li>
<li class="child">two</li>
<li class="child">three</li>
<li class="child">four</li>
<li class="child">five</li>
<li class="child">six</li>
<li class="child">seven</li>
</ul>
<ul id="parent1">
<li class="child1">one</li>
<li class="child1">two</li>
<li class="child1">three</li>
<li class="child1">four</li>
<li class="child1">five</li>
<li class="child1">six</li>
<li class="child1">seven</li>
</ul>
<ul onClick=parent2click(event) id="parent2">
<li onClick=child2clickk(event) class="child2">one</li>
<li onClick=child2click(event) class="child2">two</li>
<li onClick=child2click(event) class="child2">three</li>
<li onClick=child2click(event) class="child2">four</li>
<li onClick=child2click(event) class="child2">five</li>
<li onClick=child2click(event) class="child2">six</li>
<li onClick=child2click(event) class="child2">seven</li>
</ul>
<script type="text/javascript">
//========== Event In a most obvisous way ===================
let children = Array.from(document.getElementsByClassName("child"));
for (const child of children) {
child.addEventListener('click',()=>{
console.log("clicked child", child.innerHTML, "from Obvious Way");
})
}
//========== Event In a most obvisous way ===================
//========== Event Delegation ===============================
let parent = document.getElementById('parent1');
parent.addEventListener('click',(event)=>{
console.log("clicked child", event.target.innerHTML,"from Event delegation");
})
//========== Event Delegation ===============================
//================ BUBBLING ===================
function parent2click(event){
alert("parent");
}
function child2click(event){
alert("child :Stop Propagation");
event.stopPropagation();
}
function child2clickk(event){
alert("child : DO NOT Stop Propagation");
}
//================ BUBBLING ====22===============
</script>
</body>
</html>
Quick View
document.body.firstChild.nodeName
document.body.childNodes
document.body.previousElementSibling
document.body.nextElementSibling
document.body.lastElementChild
document.body.firstElementChild
importing bootstrap
Importing in js file
import "bootstrap/dist/css/bootstrap.min.css"
importing in css/scss file to override default
body-bf:#12332
@import "~bootstrap/dist/css/bootstrap.min.css"
<style>
ul > li:nth-child(3n + 1) {
background-color: red; /* 1,4,7,10 */
}
ul > li:nth-child(3n + 2) {
background-color: green; /* 2,5,8,11 */
}
ul > li:nth-child(3n + 3) {
background-color: blue; /* 3,6,9 */
}
</style>
Different types of observers supported by modern browsers
Subtle, yet Beautiful Scroll Animations: Intersection observer
https://www.youtube.com/watch?v=T33NN_pPeNI&list=WL&index=58&t=131s
Resize Observer:
https://www.youtube.com/watch?v=M2c37drnnOA
Mutate Observer:
https://www.youtube.com/watch?v=Mi4EF9K87aM
DOM Elements
Node VS Elements
Insert Adjacent Elem
flexbox props
handle image content
object-fit: "cover"
CSS layers
by default user agent define some css rule to eaach html elem, we override it by owr own style
similary we can also define layers to css style to tell what is more important to handle specificity
the way our stack wrks is that broswr stylesheet at bottom is least speicifc, then we have layer called utilities is more specific and then we have all the code not in layer which is going to be the next most specific after utilities
specificity increases frm left to right
we can change speicifcty of vendr css imports
imports in css is not a good practise because first it downloads the entire styles.css and then looks for all the css import and then it downloads them, so thigs are not parelley
so its good to put @imports in html file
Note::
Unlike normal CSS with the layer, everything dealing with important goes in backward order (right to left)
======
whne we gicve id to element, it gets attached to windw objetct so we can use direct , window.hola , or hola to get it
<div id="hola">Hellooooo</div>
picture Elem
From Chatgpt
html attribute data-something -> https://chat.openai.com/share/9c200155-bdf4-47df-b62e-09114726115d
z-index -> For z-index to work, the element (or pseudo-element) must be positioned—meaning it should have position: relative, position: absolute, position: fixed, or position: sticky. By default, ::before and ::after are inline, so you will need to set their position.
Browser environment, specs
DOM
BOM (Browser Object Model)