javascript DOM操纵和事件

Posted 2021-05-03

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


// Click
clearBtn.addEventListener('click', runEvent);

//DoubleClick
clearBtn.addEventListener('dblclick', runEvent);

//Mousedown & mouseup
clearBtn.addEventListener('mousedown', runEvent);

//Mouse Enter
card.addEventListener('mouseenter', runEvent);

//Mouse Leave
card.addEventListener('mouseleave', runEvent);

//Mouse Out
card.addEventListener('mouseout', runEvent);

// Mouse Move
card.addEventListener('mousemove', runEvent);

// Event Handler
function runEvent(e){
  e.preventDefault();
  console.log(`Event type: ${e.type}`);

  heading.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY}`;

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

//Keyboard & Input Events

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

taskInput.value = ' '; // clear the place holder

// form.addEventListener('submit', runEvent);

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

//Change
select.addEventListener('change', runEvent);


function runEvent(e){

  // console.log(e.target.value);


  heading.innerText = e.target.value;


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

let test;

test = document;
test = document.all[2];
test = document.body;
test = document.doctype;
test = document.domain;
test = document.URL;
test = document.characterSet;
test = document.contentType;

test = document.forms;
test = document.forms[0].id;
test = document.forms[0].method;
test = document.forms[0].action;

test = document.links;
test = document.links[0];
test = document.links[0].id;
test = document.links[0].className;
test = document.links[0].classList;

test = document.images;

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

let scripts = document.scripts;

let scriptsArr = Array.from(scripts);

scripts.forEach(function(script){
  console.log(script.getAttribute('src'));
})

console.log(test);

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



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

function onClick(e){
  e.preventDefault();
  // console.log('Clicked');
  let val;

  val = e;

  // Event Target Element
  val = e;
  val = e.target.id;
  val = e.target.className;
  val = e.target.classList;

  e.target.innerText = 'Hacked';


  // Even Type
  val = e.type;

  // Timestamp
  val = e.timeStamp;
  
  // Coords event relative to the window
  val = e.clientY;
  val = e.clientX;

  // Coords event relative to the window
  val = e.offsetY;
  val = e.offsetX;

  console.log(val);

};

//Event 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');
});


EVENT DELGATION
const delItem = document.querySelector('.delete-item');

delItem.addEventListener('click', deleteItem);

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

function deleteItem(e){
  e.preventDefault();

  if(e.target.parentElement.className === 'delete-item secondary-content'){
    console.log('delete item');
  }

  if(e.target.parentElement.classList.contains('delete-item')){
    console.log('You deleted a item');
    e.target.parentElement.parentElement.remove();
  }
}

// document.getElementById()

console.log(document.getElementById('task-title'));

// Get things from the the element
console.log(document.getElementById('task-title').id);
console.log(document.getElementById('task-title').className);

// Change styling
document.getElementById('task-title').style.background = '#333';
document.getElementById('task-title').style.color = '#fff';
document.getElementById('task-title').style.padding = '5px';
// document.getElementById('task-title').style.display = 'none';


// Change content
document.getElementById('task-title').textContent = 'Task List';
document.getElementById('task-title').innerText = '<span>My Task</span>'; // Cannot put span. Only Text
document.getElementById('task-title').innerHTML = '<span class="hello" style="color:red;">My Task</span>';



// -----DOCUMENT.QUERYSELECTOR----------

console.log(document.querySelector('#task-title'));
console.log(document.querySelector('.card-title'));
console.log(document.querySelector('h5'));

document.querySelector('li').style.color = 'red';
document.querySelector('ul li').style.color = 'blue';

document.querySelector('li:nth-child(3)').style.color = 'yellow';
document.querySelector('li:last-child').style.color = 'blue';
document.querySelector('li:nth-child(4)').textContent = 'Kodak Yellow';
document.querySelector('li:nth-child(odd)').style.background = '#ccc';
document.querySelector('li:nth-child(even)').style.background = '#f4f4f4';

//---------
const items = document.getElementsByClassName('collection-item');
//---------

// document.getElementsByClassName --------------

console.log(items);
console.log(items[0]);
items[0].style.color = 'red';
items[3].textContent = 'HELLO!!';

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

console.log(listItems);


//---------
let liElements = document.getElementsByTagName('li');
//---------
// document.getElementsByTagName

console.log(liElements);
console.log(liElements[0]);
liElements[0].style.color = 'red';
liElements[3].textContent = 'HELLO!!';

// Cover HTML Collection into Array
liElements = Array.from(liElements);

liElements.reverse();

liElements.forEach(function(li, index){
  console.log(li.className);
  li.textContent = '${index}: Hello';
});

console.log(liElements);






// Document.QuerySelectorAll --------------

const items = document.querySelectorAll('ul.collection li.collection-item');

items.forEach(function(item, index){
  item.textContent = `${index} : Hello`;
});

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';
});


for(let i=0; i< liEven.length; i++){
  liEven[i].style.background = '#f4f4f4';
}


console.log(items);

// Create Element
const li = document.createElement('li');


// Add Class
li.className = 'collection-item';

// Add ID
li.id = 'new-item'



// Add attribute
li.setAttribute('title', 'New Item');

// Create text node and append
li.appendChild(document.createTextNode('Hello World'));

// Create new Link element - Its fine to use const because you are adding things to it. Not changing it.
const link = document.createElement('a');

// Add Classes
link.className = 'delete-item secondary-content';

//Add icon html
link.innerHTML = '<i class="fa fa-remove"></i>';

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

// Traversing the DOM
let val;

const list = document.querySelector('ul.collection');
const listItem = document.querySelector('li.collection-item:first-child');

val = listItem;
val = list;

// Get child nodes => Node list
// Node is a tree of the whole DOM
val = list.childNodes;
val = list.childNodes[0];
val = list.childNodes[0].nodeName;
val = list.childNodes[3].nodeType;

// Get children element nodes => HTML list
// HTML is the elements of HTML
val = list.children;
val = list.children[1];
list.children[1].textContent = 'Hello';
// Children Of Children
val = list.children[1].className += ' test-id';
val = list.children[1];

//First child
val = list.firstChild;
val = list.firstElementChild;

//lastchild
val = list.lastChild;
val = list.lastElementChild;

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

// Get Next Sibling
val = listItem.nextSibling;
val = listItem.nextElementSibling.nextElementSibling;

// Get Previous Sibling
val = listItem.previousSibling;
val = listItem.reviousElementSibling;

console.log(val);

// REPLACE ELEMENT

// Create Element
const newHeading = document.createElement('h2');

// Add id
newHeading.id = 'h2-task-title';
// New Text Node
newHeading.appendChild(document.createTextNode('Task List'));

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

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

// Remove element
const lis = document.querySelectorAll('li');
const list = document.querySelector('ul');

// Removie List Item
lis[1].remove();

// Remove Child Element
list.removeChild(lis[3]);

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

let val;

// Classes
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');
val = link.setAttribute('href', 'http://google.com');
link.setAttribute('title', 'google');
val = link.hasAttribute('href'); // true
val = link.hasAttribute('differentname'); // false
val = link.hasAttribute('title'); // false
link.removeAttribute('title');



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