DOM-2

0. traversing the dom

traversing: 대상을 바꿔서 체인을 계속하는것.

- childNodes -> nodelist 출력
- children -> HTML collection 출력

let val;

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

val = listitem;
val = list;

//get child nodes
val = list.childNodes; // </li>뒤의 띄어쓰기를 text로 지정해 갯수를 셈         
					   //childNodes -> returns nodelists.


//get children element nodes
val = list.children;       //children -> returns HTML collection.
console.log(val);

 

#type of nodes

1 - Element
2 - Attribute (deprecated)
3 - Text node
8 - Comment
9 - Document itself
10 - Doctype

val = list.childNodes[0];
val = list.childNodes[0].nodeName;      // #text
val = list.childNodes[1].nodeType;     // 1

- children

//get children element nodes
val = list.children;  
val = list.children[0]; 
list.children[1].textContent= 'hello';

//children of children
list.children[3].children[0].id='test - link';
val = list.children[3].children[0];

console.log(val);

- count // FirstChild , LastChild

// count child elements
val = list.childElementCount;

//FirstChild, LastChild
val = list.firstChild;
val = list.firstElementChild;

val = list.lastChild;
val = list.lastElementChild;
console.log(val);

- parent, sibling

//get parent node
val = listitem.parentNode;  // ul
val = listitem.parentElement; //ul
val = listitem.parentElement.parentElement;   // parent of ul출력됨

// get next sibling
val = listitem.nextSibling;
val = listitem.nextElementSibling;

// get previous sibling
val = listitem.previousSibling;
val = listitem.previousElementSibling;  // null : 시작값이 첫번째니까 그 앞은 없으므로

---

1. event listeners & the event object

document.querySelector('.clear-tasks').addEventListener('click', function(e){
  console.log('hello world');

  // e.preventDefault();  대신 href="#" 쓰면된다.

});

- creatElement( )

//creating 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 next node and append
li.appendChild(document.createTextNode('hello world'));

- 끝에 엑스 아이콘 추가하기

// create new link element 

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 link into li
li.appendChild(link);          //콘솔창에 뜨도록 추가하기

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

---

2. replaceChild(새 노드, 교체될 노드)

////REPLACE ELEMENT

//creat element
const newHeading = document.createElement('h2');
//add id
newHeading.id = 'task-title';
newHeading.appendChild(document.createTextNode('task list'));

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

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

console.log(newHeading);

---

3. removeChild( )

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

//remove list item
lis[0].remove();

//remove child element
list.removeChild(lis[2]);