javascript - 심화편(1) - 수정중

자바스크립트 심화편!

window

• Global Object(전역 객체)
• 우리가 사용하는 내장 객체를 속성으로 가지고 있다 (ex. console, document 등..)
• 브라우저 창을 대변하면 가장 최상단 객체(전역 객체)이다.

console.log(window)
console.log(window.innerWidth);
console.log(window.innerHeight);

DOM(Document Object Model)

• 웹 페이지에 나타나는 HTML 태그들을 모두를 객체로 다룰 수 있다.
• dir 메소드는 문자열 표시 형식으로 콘솔에 출력
• log 메소드는 파라미터로 전달받은 값을 HTML 형태로 출력
• dir 메소드는 객체의 속성을 좀 더 자세하게 객체 형태로 출력

console.log(documnet) // HTML을 보여준다.
console.log(typeof document) // object
console.dir(document) // 객체로 보여준다.

DOM 트리

• 각 객체를 node 라고 부른다.
• 노드를 부모 노드/자식 및 같은 위치이면 형제노드
• 태그를 표현하는 노드를 요소 노드(Element Node), 문자를 표현하는 노드를 텍스트 노드(Text Node)
• 텍스트 노드는 요소 노드의 자식노드! / 자식 노드를 가질 수 없다!
• 총 12가지 노드 타입

자식 노드 선택

const myTag = document.querySelector('#content')

console.log(myTag);

//형제 요소 노드
console.log(myTag.previousElementSibling);
console.log(myTag.nextElementSibling);

//부모 요소 노드
console.log(myTag.parentElement);

// 자식 요소 노드
console.log(myTag.children(1));
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);

요소 노드 프로퍼티

• innerHTML은 HTML 코드를 문자열로 출력한다.
• innerHTML은 태그들끼리의 줄 바꿈이나, 들여쓰기, 띄어쓰기가 있을 때 그런 부분들도 모두 포함
• outerHTML은 요소 자체가 새로운 요소로 교체 된다.(수정x)
• textContent는 특수문자도 text로 취급한다.

const myTag = document.querySelector('#list-1')

myTag.innerHTML = '<li>Exotic</li>' // 값을 변경하기
myTag.innerHTML += '<li>Exotic</li>' // 값을 추가하기

myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul>' // 요소 자체가 변경

console.log(myTag.textContent) // 요소 안의 텍스트를 가져온다.
myTag.textContent = '<li>new text!</li>' //   <li>도 텍스트로 인식한다.

요소 노드 추가하기

• prepend, append: 메소드를 호출한 내부에서 앞쪽과 뒤쪽에 추가한다.
• before, after: 매소드를 호출한 앞쪽과 뒤쪽에 형제 노드로 추가

// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow')
// 요소 노드 만들기
const first = document.createElement('li')
// 요소 노드 꾸미기(innerHTML, textContent..)
first.textContent = '처음';

// 요소 노드 추가히가
const last = document.createElement('li')
last.textContent = '마지막'
first.prepend(first); // 제일 앞 부분 추가
tomorrow.append(first); // 제일 뒷 부분 추가

const prev = document.createElement('p');
prev.textContext= '이전';
tomorrow.before(prev);  // 이전(앞)부분에 형제 노드 추가
tomorrow.after(prev);  // 이후(뒷)부분에 형제 노드 추가

요소 노드 제거 및 이동

• 노드 삭제: remove;
• 노드 이동: prepend, append, before, after

const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// 노드 전체 제거
tomorrow.remove();
// 노드 자식 요소 제거
tomorrow.children[2].remove();

// 노드 이동하기
today.append(tomorrow.children[1]); // 내일 노드의 첫 번째 자식 노드를 오늘 노드로 이동
tomorrow.children[1].after(today.children[1]);