[JS] DOM 관련

1. window객체

전역객체
window 객체 안에 console, document 등이 있다.
window. 을 전부 생략하고 사용하는 것이다.



2. DOM(Document Object Model)
문서 객체 모델

console.log(document);
문서의 모든 html 내용이 나온다.
console.dir(document);
문서의 객체를 확인할 수 있다.

const title = document.querySelector('#title');
title.style.color = 'red';


3. DOM 트리
document 객체를 최상위로 해서
밑으로 DOM 트리가 형성되어있다.
각 객체를 NODE라고 부른다.

부모 노드, 자식 노드, 형제 노드

태그를 표현하는 노드를 요소 노드
문자열을 표현하는 노드를 문자열 노드

문자열 노드는 요소 노드의 자식 요소가 된다.
또 자식노드를 가질 수 없으니 잎 노드라고 한다.

다른 요소도 있지만 대부분 요소노드와 텍스트노드로 이루어져있다.


4. DOM 트리 여행하기

const myTag = document.querySelector('#content');
의 myTag의 자식 요소 노드 선택하기

// 자식 '요소' 노드
myTag.children
myTag의 자식 노드가 HTMLCollection으로 유사배열이 된다.
인덱스로도 접근할 수 있다.

ex)myTag.children[0] 등등

firstElementChild
lastElementChild
다이렉트로 첫번째와 마지막 자식 노드에 접근한다.


//부모 '요소' 노드 접근하기
myTag.parentElement


//형제 '요소' 노드 접근한기
myTag.previousElementSibling 이전 형제
myTag.nextElementSibling 다음 형제
없을 경우 null 값이 반환됩니다.

모든노드에 접근하는 방법도 있지만 들여쓰기 등도 노드가 텍스트 노드가 되기 때문에 잘 사용하지 않는다.


5. 요소 노드 프로퍼티 알아보기

myTag.innerHTML
요소 안에 있는 HTML 자체 문자열에 접근
안의 줄바꿈 들여쓰기 모두 포함

요소안에 HTML을 수정할때 자주 사용됨
덧셈 할당 연산자를 통해서 마지막에 원하는 내용만을 추가할 수도 있다.
ex)myTag.innerHTML += <li>내용</li>;

myTag.outerHTML
'해당 요소의 태그'까지 포함한 HTML 문자열에 접근
outerHTML의 경우 수정을 하게 되면 완전히 새로운 요소가 되기 때문에 더이상 myTag의 사용을 할 수가 없다.

myTag.textContent
innerHTML과 비슷하다.
안에 있는 태그를 제외한 text내용만 가지고온다.
특수문자도 텍스트 처리를 하기 때문에 태그처럼 작성해도 단순 문자열이 된다.


6. 필요한 곳에 요소 노드 추가하기

// 1. 요소 노드 만들기
const newElement = document.createElement('li');

// 2 . 요소 노드 꾸미기: textContent, innerHTML 등등
newElement.textContent = '원하는 내용';

// 3. 요소 노드 추가하기: NODE.prepend, append, after, before
myTag.prepend(newElement);

prepend() 첫번째 자식 노드 위치로 이동시킨다.
append()  마지막 자식 노드 위치로 이동시킨다.
before() 바로 위 형제 위치로 이동시킨다.
after()  바로 아래 형제 위치로 이동시킨다.

인수 위치에 요소를 담은 변수가 아닌 그냥 '문자열'을 전달해도 그대로 텍스트노드가 생성된다.
인수 두 개 이상이면 그 순서대로 추가된다.

노드 삭제하기
myTag.remove();
해당 노드가 삭제된다.

노드 이동하기
prepend append before after 사용하기
원하는위치.원하는메소드(이동할요소);
이동한 후에는 기존 위치의 요소는 없어진다.



7. HTML 속성 다루기
HTML 태그들이 가지고있는 속성들은 요소 노드의 프로퍼티가 된다.

ex) myTag.className
* class 속성은 className을 사용한다.

직접접근
비표준 속성에는 접근할 수 없다. ex)ol태그의 href 속성에 접근

myTag.getAttribute('속성');
해당 속성의 속성값을 반환
표준, 비표준 전부 접근 가능하다.
* getAttribute 메소드를 사용할 때 class 는 class 그대로다.


속성 추가(수정)하기 .setAttribute('속성', '속성값');
myTag.setAttribute('class', 'myClass');


속성 삭제하기  .removeAttribute('속성');
myTag.removeAttribute('class');


비표준 속성을 안전하게
만약에 field라는 비표준속성을 사용한 파일이 있는데
field가 표준 속성으로 지정되면 충돌이 생긴다.

그래서 사용하는데 dataset 프로퍼티이다.
data-*
data-시작하는 속성은 dataset이라는 프로퍼티에 저장되게된다.
data-field라는 속성은 
myTag.dataset.filed 로 접근할수 있다.

 

8. 스타일 다루기

style 프로퍼티 활용
myTage.style.textDecoration = 'line-through';

style 프로퍼티에 두단어 이상 -가 있는 속성을 접근할 때는
카멜표기법을 사용한다.

문제점
인라인 css로 추가된다.
중복처리가 힘들다.

권장사항
클래스를 변경해서 스타일 적용하기
myTag.classList
클래스 목록의 유사 배열이다.
add() remove() toggle() 메소드를 사용할 수 있다.

add('클래스이름', ...) 클래스 추가
remove('클래스이름', ...) 클래스 제거
toggle('클래스이름', true(false)) 있으면 추가, 없으면 제거
* true는 추가만, false는 제거 자주 사용하지는 않는다
* toggle은 클래스 추가/제거를 하나씩만 한다