JavaScript drag-drop

https://flaviocopes.com/drag-and-drop/


https://flaviocopes.com/keyboard-events/


https://flaviocopes.com/form-events/

• 📒 JS Handbook
• 📗 Vue.js Handbook
• 📘 Node.js Handbook
• 📙 Express.js Handbook
• 📕 React Handbook
• 📖 ES5 to ESNext
• 📔 CSS Handbook
• 📓 HTML Handbook

MORE TIPS>

TCC SUPER TUTORIAL:

http://mclaveau.com/grimoire/tcc.htm

http://mclaveau.com/grimoire/tcc2.htm


|[]|

:

<section id="mysection">
  <div id=”mydiv” class = “myclass”>
    <h1 id=”mytitle”> A nice title </h1>
    <p id=”mytext”> Some intersting text </p>
  </div>
  <div id=”anotherdiv” class = “myclass”>
    <img scr="myimage.png" alt=""/>
  </div>
</section>

The div has to child nodes: 1 and p.

It also have a parent node: section.

Let’s see how to work with this small HTML DOM…

1. How to find our div ?

//By its id (retun an unique element)
var myDiv = document.getElementById("mydiv")
 
//By class name (return an array of elements)
var myarray = document.getElementsByClassName("myclass")
var myDiv = myarray[0] 
 
//By tag name (return an array of elements)
var myarray = document.getElementsByTagName("div")
var myDiv = myarray[0] 

2. How to find my div’s relatives ?

// child nodes (array)
myDiv.childNodes
 
// first child node
myDiv.firstChild
 
// last child node
myDiv.lastChild
 
// check is the div has childs (true of false)
myDiv.hasChildNodes
 
// next node at the same level
myDiv.nextSibling
 
// previous node at the same level
myDiv.previousSibling
 
// parent node
myDiv.parentNode

3. Change my div’s attributes

myDiv.class = "anotherclass"
myDiv.style.color = "red"

4. Create and insert an new element

Just clone our initial paragraph:

// Clone an existing HTML element
var myP = document.getElementsByTagName("p")[0]
var myParagraph = myP.cloneNode()

Or create a brand new paragraph element:

// Create an element node
var myP = document.createElement("p")
 
// Create a text node
var myText = document.createTextNode("Some new text")
 
// Combine the element and text node to create a new HTML element
var myParagraph = myP.appendChild(myText)

Append the paragraph at the end of the div childs.

This will make the paragraph appear on the page.

 myDiv.appendChild(myParagraph)

5. If you made an error, let’s replace this element…

Of course it would be faster to replace the text inside but we are a little blunt so…

var newP = document.createElement("p");
var newText = document.createTextNode("This is new text");
newP.appendChild(newText);
 
myDiv.replaceChild(newP, myParagraph);

6. Ok, this was fun, now remove this second P element…

This remove the parapher from the div:

myDiv.removeChild(newP);

It is not mandatory to know the parent:

newP.parentNode.removeChild(newP);

7. Or do we need it ? Let’s make an animation that add it and remove it after 5s.

Ok, this is just a terrible idea but who mind…

setTimeout(myDiv.appendChild(newP), 5);
setTimeout(myDiv.removeChild(newP), 10);