js 기초5

"use strict"


"use strict"
function a(){
    console.log(a);

}

console.log(a);



// async, defer도 아닌 script태그 : 동기적. HTML문서에서 순서대로 차례대로 실행
//          JS파일 다운로드가 끝나면 순서대로 실행함
// async : 비동기적, script 태그 순서와 상관없이 로딩이 완료된 JS부터 실행됨
//      순서가 보장되지 않음. DOM요소와 상관없거나, 최대한 빨리 실행해야하는 JS파일에 설정
// defer : 비동기적, async와 같이 다운로드는 비동기적으로 진행하지만, DOM요소가 전부 로딩이 끝나면 실행
//      DOM요소를 제어해야하는 JS파일에 설정
// 1) 문서 노드(dovument node) : DOM 트리의 최상위에 존재하는 ROOT노드. document 객체를 가리킴
// 2) 요소 노드(element node) :
// 3) 속성 노드(attribute node) : HTML 요소의 속성(어트리뷰트)를 가리키는 객체
// 4) 텍스트 노드(text node) : HTML 요소의 텍스트를 가리키는 객체 (요소 노드의 자식노드)
// Node의 상속 관계
// OBJECT - Event - Node - (Document, Element, Attr, CharacterData)
// Document - HTMLDocument
// Element - HTMLElement - ~~~
// CharacterData - (Text, Comment)


// const element = document.getElementById('banana');
// console.log(element);
// element.style.color = 'blue';





// 스프레드 문법
// const elements = document.getElementsByTagName('li');
// let a, b, c = [...elements].forEach

// Array.from(elements).forEach(el => {
//     el.style.fontSize = '400px';
// });
// for(let el of elements){
//     el.style.fontSize = '400px';
// }
// for(let i = 0; i < elements.length; i++){
//     elements.item(i).style.fontSize = '400px';
// }

// elements.item(0).style.color = 'red';
// console.log('li들 : ', elements);
// console.log('li의 첫번째요소 : ', elements.item(0));

// [...document.getElementsByClassName('fruit2')].forEach(el => {
//     el.style.color = 'green';
// });

// const select = document.querySelectorAll('body > ul li');
// select.forEach(x => {
//     x.style.color = 'green';
// });





const apple = document.querySelector('.apple');
console.log(apple.matches('#fruit > li.apple'));
console.log(apple.matches('#fruit > li.banana'));


// 공백노드 포함. 텍스트 노드 포함해서 가져옴
const fruits = document.getElementById('fruit');
console.log('childNodes 자식들 >> ');
console.log(fruits.childNodes);
// 요소만 가져옴.  텍스트 노드 포함하지 않음
console.log('children 자식들 >> ');
console.log(fruits.children);

// firstChild: childNodes 의 첫번째 노드를 가져옴. 따라서 테그슽노드 포함
console.log('firstChild 자식들 >> ');
console.log(fruits.firstChild);

// firstElementChild: children 첫번째 노드를 가져옴. 따라서 텍스트 노드 포함안함
console.log('firstElementChild 자식들 >> ');
console.log(fruits.firstElementChild);

// 부모 노드 탐색

let lies = document.getElementsByTagName('li');
[...lies].forEach(li => {
    console.log('현재노드>> ', li);
    console.log('parentNode >> ', li.parentNode);
    console.log('parentElement >> ', li.parentElement);
});

console.log("형제 노드 탐색 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
// 형제 노드 탐색
let lies1 = document.getElementsByTagName('li');
[...lies1].forEach(li => {
    console.log('현재노드>> ', li);
    console.log('nextSibling >> ', li.nextSibling);
    console.log('nextElementSibling >> ', li.nextElementSibling);
    li.textContent = '안녕하세요.';
    console.log('현재 li태그의 텍스트: ', li.textContent);
});

// 크로스 사이트 스크립팅 공격(XSS)에 취약함...
// HTML 새니티제이션: XSS 공격 방어 DOMPurify 라이브러리 사용
// DOMPurify.sanitize(<script>alert("You hacked!")</script>)
// const welcome = document.getElementById('welcome');
// [...welcome.getElementsByTagName('span')].forEach(span => {
//     span.style.color = 'blue';
// });
// // welcome.textContent = '<span>test</span>';
// welcome.innerText = '<span>test</span>';
// welcome.innerHTML = '<script>alert("You hacked!")</script>';
// console.log(welcome.textContent); // Node에 존재하는 텍스트 부분
// console.log(welcome.innerText); // 요소에 존재하는 텍스트 부분
// console.log(welcome.innerHTML); // 노드 내부 HTML으로 작성된 텍스트

let fruit = document.getElementById('fruit');
fruit.innerHTML += '<li class="melon">Melon</li>';
document.getElementsByClassName('melon').item(0).style.color = 'green';

fruit.insertAdjacentHTML('afterbegin','<p>afterbegin</p>');
fruit.insertAdjacentHTML('beforebegin','<p>beforebegin</p>');
fruit.insertAdjacentHTML('afterend','<p>afterend</p>');
fruit.insertAdjacentHTML('beforeend','<p>beforeend</p>');

let newNode = document.createTextNode('새로 생성한 텍스트 노드');
fruit.appendChild(newNode);

fruit.replaceChild(newNode, fruit.firstElementChild);

// let welcome = document.getElementById('welcome');
// for(element of fruit.childNodes){
//     welcome.appendChild(element.childNode(true));
// }