[JS] 자바스크립트 DOM 스크립트 기본 문법 중 꼭 기억해야 하는 부분!

DOM(Document Object Model)

- HTML 페이지 문서 내에 있는

모든 요소를 객체(object)로 만드는

트리 구조의 모델.

 

 

1.HTML 문서 내에서 원하는 요소 선택 방법

document.querySelector(' 선택자 ')
document.querySelectorAll(' 선택자 ')

- 괄호 안 선택자에는

클래스나 아이디 모두 들어갈 수 있음.

클래스인 경우에는 . 추가하고,

아이디인 경우에는 # 추가해야함.

 

즉, CSS 선택자에 사용하는

후손 선택자, 자손 선택자, 동위 선택자 등등

모든 선택자 요소에 접근 가능.

 

- 매번 위와 같이 나열하는 것 보다는,

해당 부분을 변수로 저장해서

재사용하는 것이 훨씬 편리함.

 

- .querySelectorAll(' ')의 경우 

해당 선택자를 가진 모든 요소가

배열과 비슷한 NodeList라는 

형태의 객체가 리턴된다.

 

length 속성을 가지고 있어서,

원하는 요소에 접근하려면,

[index]를 추가해주면 된다.

(index는 0부터 시작함 주의)

 

- JQuery에서 $는

document.querySelector와 비슷한 역할.

 

---

 

2. HTML에 없는 요소 생성 방법

const elem = document.createElement( ' 태그 이름 ')
elem.innerHTML = ' HTML 구조 적기 '

- .creatElement( ) 괄호 안에는

원하는 태그의 이름만 적어주면 됨

(여기서 추가 원하는 요소를 elem 변수로 표기)

 

- elem 뒤에 붙은 .innerHTML 에는 

태그 내에 들어갈 단순한 문자

혹은 HTML 구조 까지 들어갈 수 있음.

 

- 다만 createElement를 통해서

생성을 해도 메모리에는 올라가지만,

문서 내에 추가하기 전까지는

브라우저에 표시되지 않음.

 

---

 

3. 2에서 만든 요소 추가 및 제거 방법

const parentElem = document.querySelector(' 부모 선택자 ');
parentElem.appendChild(' elem ')
parentElem.removeChild(' elem ')

- 우선 원하는 위치의 부모 요소를 정하고

해당 요소를 미리 변수에 저장

(여기에서는 parentElem으로 표기)

 

- 말 그대로,

선택한 부모 태그(parentElem) 아래에

제일 마지막 자식 요소로

elem을 추가하는 방법.

 

- .appendChild( ) 혹은 .removeChild( ) 괄호 에

직접 document.querySelector(' 선택자 ')를 적어서

추가 혹은 제거해줄 수 있음.

 

다만, .appendChild() 내부에서 직접 

코드를 적어 추가하는 경우에는 

내용물 없는 태그만 생성됨

 

---

 

4. 원하는 요소에 속성 추가 및 제거 방법

document.querySelector(' 선택자 ').setAttribute(' 속성 이름 ', ' 문자 ')
document.querySelector(' 선택자 ').setAttribute(' 속성 이름 ', 숫자)
document.querySelector(' 선택자 ').getAttribute(' 속성 이름 ')

- 원하는 속성을 추가할 수도

속성에 대한 값을 알 수도 있는 명령문.

 

---

 

5. 요소에 원하는 클래스 추가 및 제거 방법.

document.querySelector(' 선택자 ').classList.add(' 추가할 클래스 이름 ')
document.querySelector(' 선택자 ').classList.remove(' 제거할 클래스 이름 ')
document.querySelector(' 선택자 ').classList.toggle(' 추가 혹은 제거할 클래스 이름 ')
document.querySelector(' 선택자 ').className = ' 추가할 클래스 이름 '

- .classList.add(' ')

기존에 있는 클래스를 건들지 않고,

적어준 클래스만 추가해줌.

 

- .classList.remove(' ')

기존에 있는 클래스를 건들지 않고,

적어준 클래스만 제거해줌.

 

- .classList.toggle(' ')

적어준 클래스가

있으면 해당 클래스 제거하고 false 리턴

없으면 해당 클래스 추가하고 true 리턴.

 

- .className

원래 있던 클래스를 모두 지우고

추가한 클래스만 남게 됨.

어찌보면 불편할 수 있음.

 

 

다시 코딩 공부를 시작하면서

DOM SCRIPT에서 

제일 중요하면서도 기본적인 내용을

필기해보았음!

 

다시 맘잡고 공부하자,

까먹으면 시간만 아깝고 낭비하는 것 뿐 ㅜㅜ