JavaScript DOM manipulation & events

dom.js

let val;

val = document;

// val = document.all;
// val = document.all[2];

val = document.head;
val = document.body;
val = document.doctype;
val = document.domain;
val = document.URL;
val = document.characterSet;
val = document.contentType;

val = document.forms;
val = document.forms[0].action;

val = document.links;
val = document.links[0].className;
val = document.links[0].classList;

val = document.images;

val = document.scripts;
val = document.scripts[2].getAttribute('src');

// --------------------------------------------------------------------------

// HTML collection to array (for usage)
let scripts = document.scripts;
let scriptsArr = Array.from(scripts);

scriptsArr.forEach(function (script) {
	// console.log(script);
});

// textContent(semi rendered - spacing, line break X), innerText(all rendered), innerHTML(same as html)
const taskTitle = document.getElementById('task-title');
let content;
content = taskTitle.textContent;
content = taskTitle.innerText;
content = taskTitle.innerHTML;

// --------------------------------------------------------------------------

// querySelector()
document.querySelector('ul li').style.color = 'green';
document.querySelector('li:last-child').style.color = 'red';
document.querySelector('li:nth-child(3)').style.color = 'orange';

// HTMLcollection([], .length) - getElementsByTagNmae, getElementsByclassName
const items = document.getElementsByClassName('collection-item');

const listItems = document
	.querySelector('ul')
	.getElementsByClassName('collection-item');

// HTMLcollection -> nodelist(array)
let lis = document.getElementsByTagName('li');
lis = Array.from(lis);
console.log(lis);
lis.reverse();
lis.forEach(function (li, index) {
	li.textContent = `${index}: Hello`;
});

// nodelist(as array) - querySelectorAll
const liOdd = document.querySelectorAll('li:nth-child(odd)');
const liEven = document.querySelectorAll('li:nth-child(even)');

liOdd.forEach(function (li, index) {
	li.style.background = '#ccc';
});

// --------------------------------------------------------------------------

// Traverse nodes/elements
let val;
const list = document.querySelector('ul.collection');
const listItem = document.querySelector('li.collection-item:first-child');
val = list;

// childNodes
val = list.childNodes;
val = list.childNodes[0].nodeType;

// nodeType
// 1 - Element
// 2 - Attribute (deprecated)
// 3 - Text node
// 8 - Comment
// 9 - Document itself
// 10 - Doctype
val = list.firstChild;
val = list.lastChild;

// children
val = list.children;
val = list.children[0];
val = list.children[0].textContent = 'Hello';
val = list.children[3].children[0];

val = list.firstElementChild;
val = list.lastElementChild;

val = list.childElementCount;

// parent
val = listItem.parentNode;
val = listItem.parentElement;

// next/prev sibling
val = listItem.nextSibling;
val = listItem.nextElementSibling;
val = listItem.previousSibling;
val = listItem.previousElementSibling;

// --------------------------------------------------------------------------

// Create element
const li = document.createElement('li');
// Add className
li.className = 'collection-item';
// Add id
li.id = 'new-item';
// Add attribute
li.setAttribute('title', 'New Item');
// Create text node and append
let text = document.createTextNode('new list item');
li.appendChild(text);

// Create new link element
const link = document.createElement('a');
// Add classes
link.className = 'delete-item secondary-content';
link.innerHTML = '<i class="fa fa-remove"></i>';

// Append link as child to li
li.appendChild(link);
// Append li as child to ul
document.querySelector('ul.collection').appendChild(li);
console.log(li);

// --------------------------------------------------------------------------

// Replace element

// 1. create new element
const newHeading = document.createElement('h2');
newHeading.id = 'task-title';
newHeading.appendChild(document.createTextNode('Task List'));

// 2. get the old heading
const oldHeading = document.getElementById('task-title');
// get the parent heading
const cardAction = document.querySelector('.card-action');

// 3. Replace!
cardAction.replaceChild(newHeading, oldHeading);

// --------------------------------------------------------------------------

// Remove element
const lis = document.querySelectorAll('li');
const list = document.querySelector('ul');
lis[0].remove();
list.removeChild(lis[3]);

// --------------------------------------------------------------------------

// Classes & Attributes

// classes
const firstLi = document.querySelector('li:first-child');
const link = firstLi.children[0];

let val;

val = link.className;
val = link.classList;
val = link.classList[0];
link.classList.add('test');
link.classList.remove('test');
val = link;

// Attributes
val = link.getAttribute('href');
link.setAttribute('href', 'http://google.com');
val = link.hasAttribute('href');
link.setAttribute('title', 'Google');
link.removeAttribute('title');

// --------------------------------------------------------------------------

// Event listener

document.querySelector('.clear-tasks').addEventListener('click', function (e) {
	console.log('Hello World');
	e.preventDefault();
});

document.querySelector('.clear-tasks').addEventListener('click', onClick);

function onClick(e) {
	let val;
	val = e.target;
	val = e.target.className;
	val = e.target.classList;

	e.target.innerText = 'Hello';

	val = e.type;
	val = e.timeStamp;

	val = e.clientY;
	val = e.clientX;
	val = e.offsetY;
	val = e.offsetX;

	console.log(val);
}

// --------------------------------------------------------------------------

// Mouse event

const clearBtn = document.querySelector('.clear-tasks');
const card = document.querySelector('.card');
const heading = document.querySelector('h5');

clearBtn.addEventListener('click', runEvent);
clearBtn.addEventListener('dblclick', runEvent);
clearBtn.addEventListener('mousedown', runEvent);
clearBtn.addEventListener('mouseup', runEvent);

card.addEventListener('mouseenter', runEvent);
card.addEventListener('mouseleave', runEvent);
card.addEventListener('mouseover', runEvent);
card.addEventListener('mouseout', runEvent);
card.addEventListener('mousemove', runEvent);

function runEvent(e) {
	console.log(`Event Type: ${e.type}`);
	heading.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY}`;

	document.body.style.backgroundColor = `rgb(${e.offsetX}, ${e.offsetY}, 40)`;
}

// --------------------------------------------------------------------------

// Input events

const form = document.querySelector('form');
const taskInput = document.getElementById('task');
const heading = document.querySelector('h5');
const select = document.querySelector('select');

form.addEventListener('submit', runEvent);

taskInput.addEventListener('keydown', runEvent2);
// taskInput.addEventListener('keyup', runEvent2);
// taskInput.addEventListener('keypress', runEvent2);
// taskInput.addEventListener('focus', runEvent2);
// taskInput.addEventListener('blur', runEvent2);
// taskInput.addEventListener('cut', runEvent2);
// taskInput.addEventListener('paste', runEvent2);
// taskInput.addEventListener('input', runEvent2);

// comment out html link tag to see change below!
select.addEventListener('change', runEvent);

function runEvent(e) {
	console.log(`Event Type: ${e.type}`);
	console.log(taskInput.value);

	// clear input
	taskInput.value = '';

	e.preventDefault();
}

function runEvent2(e) {
	console.log(`Event Type: ${e.type}`);
	heading.innerText = e.target.value;
}

// --------------------------------------------------------------------------

// Event Bubbling / Delegation

// Bubbling
document.querySelector('.card-title').addEventListener('click', function () {
	console.log('card title');
});
document.querySelector('.card-content').addEventListener('click', function () {
	console.log('card content');
});
document.querySelector('.card').addEventListener('click', function () {
	console.log('card');
});
document.querySelector('.col').addEventListener('click', function () {
	console.log('col');
});

// Delegation

document.body.addEventListener('click', deleteItem);

function deleteItem(e) {
	if (e.target.parentElement.classList.contains('delete-item')) {
		e.target.parentElement.parentElement.remove();
	}
}