----------------------------
https://www.youtube.com/watch?v=y17RuWkWdn8
Learn DOM Manipulation In 18 Minutes
---
=> zac.
DOM Manipulation
---
=> vytvorenie elementu, vkladanie textu, pridanie elem. do DOM-u
script.js
const body = document.body
body.append("Hello World", "Bye")
body.appendChild(.)
const div = document.createElement('div')
//div.innerText = "Hello World"
div.textContent = "Hello World 2"
body.append(div) / body.appendChild(div)
---
=> zistenie obsahu
Hello
Bye
const div = document.querySelector('div')
console.log(div.textContent)
console.log(div.innerText)
Hello
Bye
Hello
---
=> vkladanie html obsahu
const body = document.body
const div = document.createElement('div')
//div.innerText = "Hello World 2" NEE!
div.innerHTML = "Hello World 2"
body.append(div)
const body = document.body
const div = document.createElement('div')
const strong = document.createElement('strong')
strong.innerText = "Hello World 2"
div.append(strong)
body.append(div)
---
=> odstranenie/pridanie elementu
Hello
Bye
const body = document.body
const div = document.querySelector("div")
const spanHi = document.querySelector("#hi")
const spanBye = document.querySelector("#bye")
spanBye.remove()
div.append(spanBye)
div.removeChild(spanHi)
spanHi.remove()
---
=> modif. atributy elementu
Hello
Bye
const body = document.body
const div = document.querySelector("div")
const spanHi = document.querySelector("#hi")
const spanBye = document.querySelector("#bye")
console.log(spanHi.getAttribute("id"))
console.log(spanHi.getAttribute("title"))
console.log(spanHi.id)
console.log(spanHi.title)
console.log(spanHi.setAttribute("id","blabla"))
console.log(spanHi.setAttribute("title","blablahoho"))
spanHi.id = "blabla"
spanHi.title = "blablahoho"
spanHi.removeAttribute("id")
spanHi.removeAttribute("title")
---
=> datove atributy
Hello
const spanHi = document.querySelector("#hi")
console.log(spanHi.dataset)
console.log(spanHi.dataset.test)
console.log(spanHi.dataset.longerName) //NOTE: Cammel style
spanHi.dataset.test = "bloblo1"
spanHi.dataset.longerName = "bloblo2"
spanHi.dataset.newName = "hi"
-> data-new-name="hi"
---
=> classes
Hello
const spanHi = document.querySelector("#hi")
spanHi.classList.add("new-class")
spanHi.classList.remove("new-class")
spanHi.classList.remove("hi1")
spanHi.classList.toggle("hi3")
spanHi.classList.toggle("hi3",true)
spanHi.classList.toggle("hi3",false)
---
=> manip. style property
spanHi.style.color = "red"
spanHi.style.backgroundColor = "red" //cammel case z: background-color
--------------------------
https://www.youtube.com/watch?v=v7rSSy8CaYE
Learn JavaScript DOM Traversal In 15 Minutes
const grandparent = document.getElementById("xx")
const parents = Array.from(document.getElementsByClassName("yy"))
parents.forEach(changeColor)
function changeColor(element) {...}
--------------------------
https://www.youtube.com/watch?v=0ik6X4DJKCc
JavaScript DOM Crash Course - Part 1