[자바스크립트 문법] DOM Method

DOM 요소 추출, HTML element 가져오기

document.getElementById("id 명칭");

document.getElementByClass("class 명칭");

document.querySelector("css 선택자");

document.querySelectotrAll("css 선택자");

getElementById와 querySelector 차이점은?
- 모두 element를 반환하는 메소드이다. 사용방법, 반환 요소, 성능면에서 차이가 있다.
- getElementById는 DOM 방식으로 html에서 'id명'과 일치하는 element를 반환한다. 따라서 document 객체에서만 가져올 수 있다. (예: document.getElementById)
- querySelector는 css 선택자와 일치하는 '첫번째 element'를 반환한다. 같은 html 요소 여러개가 있어도 첫번째만 선택된다. 따라서 선언된 요소에서도 가져올 수 있다. (예: modal.querySelector(".time"))
- getElementById를 사용했을 때, 성능, 브라우저 지원 범위는 querySelector 보다 빠르고 지원이 잘된다.
- querySelector는 css에서 사용하듯이 html 속성(input\[name=""\]) 자체를 선택할 수 있기 때문에 편의성 측면에서 좋다.

 

element 추가, 생성 관련

document.createElement("tag 명");

document.appendChild("tag 명");

부모객체.appendChild("tag 명"); 부모 객체의 아래에 자식 객체를 추가할 수 있다.

append()와 appendChild() 차이점
- 두 메소드의 차이는 크게 1) 문자열, 2) 추가할 수 있는 요소 갯수, 3) return값으로 나눌 수 있다.
- append()는 문자열도 추가할 수 있다. 한번에 2개 이상의 자식 노드 추가가 가능하다. return값은 반환하지 않는다.
- appendChild()는 문자열을 추가할 수 없고 한번에 2개 이상의 자식 노드 추가가 불가능하다. return값을 반환해준다.

document객체와 window객체 차이

window 객체는 지금 현재의 DOM이 있는 브라우저 탭의 최상위 객체이다. window 객체 안에 document가 있고, 기본적으로 함수, 변수, event 등이 존재한다. document 객체와 다른 이벤트가 있으므로 addEventListener() 사용시 각 객체에 맞는 이벤트를 사용해야 한다. 물론 최상위 객체인 window의 이벤트가 훨씬 많다. 브라우저를 제어할 수 있는 권한이 있어서 window.open등이 가능하다.

속성 조작하기

DOM 객체의 속성을 조작할 수 있는데, setAttribute()와 getAttribute()를 사용한다.

객체.setAttribute(속성명, 값) : 속성명에 값을 지정한다.

객체.getAttribute(속성명) : 속성명을 추출한다.

Class 읽기 / 설정 / 추가 및 수정 / 삭제 / 토글 / 포함 여부 확인

1) 클래스 읽기

- HTML요소.className; html 특정 요소의 클래스명을 가져올 수 있다.

- 요소.classList; className처럼 클래스명을 읽을 수 있다.

- 요소.classList.length; 클래수 갯수를 확인할 수 있다.

2) 클래스 이름 설정(지정)

- 요소.className = '클래스명 설정'; 클래스명을 설정 및 변경할 수 있다.

- 요소.classList = '클래스명 설정'; 클래스명을 설정한다. classList는 readonly 속성이기 때문에 값 지정이 불가하다.

3) 클래스 추가 및 수정

- 요소.className += ' 클래스명 추가'; 기존 클래스명에 새로 추가할 수 있다. 이때, space(공백)도 같이 넣어줘야 한다. 중복되는 클래스명도 추가된다.

- 요소.classList.add('클래스명'); 기존의 클래스명에 새로 추가한다. className과의 차이점은 중복되는 클래스명은 추가되지 않는다.

- 요소.classList.add('클래스명1', '클래스명2', ...); 한번에 여러개의 클래스 추가 가능

- 요소.classList.replace('변경 전 클래스명', '변경 후 새로운 클래스명'); 기존 클래스명을 새로운 클래스명으로 변경 가능하다.

4) 클래스 삭제

- 요소.classList.remove('삭제할 클래스명1', '삭제할 클래스명2', ...);

5) 클래스 토글

- 요소.classList.toggle('클래스명', 조건문); 조건에 따라 클래스를 넣었다 뺏다 하는 토글 메소드

6) 클래스 포함여부 확인

- 요소.classList.contains(); 해당 클래스가 있으면 true <-> 없으면 false

 

< 출처 >

- https://seokzin.tistory.com/entry/JavaScript-getElementById와-querySelector-차이점

- https://hianna.tistory.com/469