Untitled

// Inline JS in HTML Tag:
<button onclick="console.log('Hello, DOM!')">Click Me</button>

// Write in the end of the <body></body>
// HTML: <script> JS Here </script>

// DOM Methods:

// Getting the element by Tag Name.
// Using [0] because returned result is array with all 'h1' tags and we get the first element.
let h1Element = document.getElementsByTagName('h1')[0]

// Getting the second element from array by Tag Name.
let secondLi = document.getElementsByTagName('li') [1]

//Getting element by Class Name selector:
let otherElement = document.getElementsByClassName('class-name')
// This all selectors returns HTMLCollection

// Getting element by ID selector:
let element = document.getElementById('ID')
// This selector returns an element

// Getting first element by CSS selector:
let elementByCssSelector = document.querySelector('.class-name')

// Getting all elements by CSS selector/selectors:
let elementsByCssSelector = document.querySelectorAll('.class-name')
// This two selectors returns NodeList

// Getting all elements by attribute 'name' usually in input tag.
let el = document.getElementsByName('fname')
let num = document.getElementsByName('animal').length

// To convert NodeList or HTMLCollection to Array may using Array.from()

// DOM properties:

// Getting the value of input field:
const textInput = document.getElementById('text-input')
// Changing value:
textInput.value = "Changed value"
// If value is digit as string. We can change it:
let number = Number(textInput.value)
// Changing content of NON self closing tag:
h1Element.textContent = "Changed content"
// Add nested tag to HTML and remove all existing nested tags:
h1Element.innerHTML = '<p>Nested paragraph</p>'
// Changing inline (in tag) style.
h1Element.style.backgroundColor = 'red'
// Getting attribute from element:
someElement.getAttribute('attributeName')
// Setting attribute to the element:
newAnchor.setAttribute('href', '#')

// DOM hierarchy manipulation

// Getting parent element (Node):
let h1Parent = h1Element.parentElement
// We can get multilevel parent element (Node):
let grandparent = h1Element.parentElement.parentElement
// Getting childNodes elements:
let child = h1Element.children
// All methods return collection !

// Getting next brother:
let nextBrother = h1Element.nextSibling
// Getting previous brother:
let previousBrother = h1Element.previousSibling
// All methods return single element

// Child manipulation:

// Add child. It adds child as a last child:
// It must created first and is necessary to attach "text" to it.
h1Element.appendChild(paragraph)
// Add child as a first child:
h1Element.prepend(paragraph)
// Remove child:
// Is necessary to insert reference which we want to remove!
h1Element.removeChild(paragraph)
// Replace child:
h1Element.replaceChild(newElement, oldElement)


// Creating a new DOM element:
let paragraph = document.createElement("p")
// Attach text to the paragraph:
paragraph.textContent = "New Paragraph"

// Remove DOM element:
h1Element.remove()

// Add event listener:
btnElement.addEventListener("click", functionReferences)

// Current target definition:
// It always refers to the element to which the event handler has been attached
function deleteHandler(e) {
    e.currentTarget
}

// Parent element of event:
function deleteHandler(e) {
    e.currentTarget.parentElement
}

// Target definition:
// Identifies the element on which the event occurred and which may be its descendant.
function getTarget(e) {
    e.getTarget
}