23.04.14 자바스크립트 공부내용 정리-1

1. DOM 이란? 

 

DOM (*문서 객체 모델) = Document Object Model

 

 자바스크립트를 왜 배우나요?  화면을 동적으로 구현하기 위해 => 문서객체 모델에 접근해야한다.

 문서 객체 모델(DOM)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다.

 DOM은 문서를 논리 트리로 표현합니다. 트리의 각 브랜치는 노드에서 끝나며, 각 노드는 객체를 갖습니다. DOM 메서드를 사용하면 프로  그래밍적으로 트리에 접근할 수 있습니다. 이를 통해 문서의 구조, 스타일, 콘텐츠를 변경할 수 있습니다.

 문서객체 모델의 최상위 클래스는 : Document객체

 Document > body , h1, p, input = 객체는 : 속성(property) 과 기능(mathod) 를 가진다.

 객체 = "요소", "노드" 라고도 부른다.

 요소에 접근한다

 

2. 요소에 접근할 수 있는 함수들

 

요소에 접근할 수 있는 함수

 1. querySelector("") : 무조건 (단일)낱개 요소에 접근, 매개변수에 입력한 선택자 접근. 해당 선택자가 document 안에 다수 존재하는 경 우, 가장 첫번째로 선택된 요소에 접근.

 2. querySelectorAll("") : 매개변수에 입력한 선택자를 가진 요소에 접근한다. 배열객체로 가져온다. 인덱스값을 가진다.

 / <==> 차이 : element 가 들어가있는경우 요소 노드까지만 접근가능, query : 텍스트노드, 속성노드까지 접근 최근에는 쿼리를 더 많이 사용

 4. getElementById() :

 5. getElementsByClassName() :

 6. getElementsByTagName() :

 

 

  요소 데이터 가져오는 방법 및 수정

 1. 웹 요소.innertText = 수정내용

 2. 웹 요소.inneHTML = 수정내용

 3. 웹 요소.textContent = 수정내용

 

 1. document.querySelector("#desc").innerText //웹브라우저 화면에 있는 내용을 그대로

  => '이름 : 아이유'

 2. document.querySelector("#desc").innerHTML //태그 속성까지 가져온다

  => '\n <p class="user">이름 : 아이유</p>\n <p class="user" style="display:none;">주소 : 서울시</p>\n <p class="user" style="display:none;">연락처 : 010-1234-5678</p>\n '

 3. document.querySelector("#desc").textContent //inneHTML 보다는 덜 자세함 태그까지는 불러오지않음

  => '\n 이름 : 아이유\n 주소 : 서울시\n 연락처 : 010-1234-5678\n '

document.querySelector("#desc").innerText = "이름 : 홍길동 " 

  => '이름 : 홍길동'

 

3. 클릭이벤트

 

클릭이벤트 활용하기.

 

 const userName = document.querySelector("#desc p");

 const pfImg = document.querySelector("#profile img");

 userName.onclick = () => userName.innerHTML = `이름 : <b>아이돌</b>`;

 pfImg.onclick = () => pfImg.src = "/iu2.jpg";

 

4. CSS 스타일 적용시키기

 

CSS속성에 접근하고 스타일을 수정하는 방법

 수정하고 싶은 요소.style.속성명 = "바꾸고싶은 스타일";

 

 const title = document.querySelector("#title");

 title.onclick = () => { //이벤트 핸들러

 title.style.backgroundColor = "black";

 title.style.color = "white";

 }

 

5. classList 속성 사용하기

 

ClassList 속성(프로퍼티) 사용 하면 해당요소의 클래스값을 배열객체 형태로 칮아준다.

 별도로 가져올수 있다. 하나의 요소에 각각의 클래스를 부여해서 각각 다른 이벤트를 주고싶을때.

 

 document.querySelector("#desc p").classList; 

 DOMTokenList(2) ['user', 'clicked', value: 'user clicked']

 0 : "user"

 1 : "clicked"

 length : 2

 value : "user clicked"

 

 선택한요소.classList.add("클래스명") : 선택한요소에 클래스명을 추가할때 사용

 선택한요소.classList.remove("클래스명") : 선택한요소에 클래스명을 삭제할때 사용

 선택한요소.classList.contains("클래스명") : 선택한요소에 클래스명이 있는지 여부 확인하는 함수.

 

 

 classList.add / .remove 를 활용하여 클릭했을때 스타일 적용, 또 클릭했을때 지우기.

 

 const title = document.querySelector("#title");

 title.onclick = () => {

 if(!title.classList.contains("clicked")) {

 title.classList.add("clicked");

 } else {

 title.classList.remove("clicked");

 }

} 

 

  ==> 이 방법보다 더 간단하게 작성 할 수 있는 것이 classList.toggle 을 사용하는 것이다.

  선택한요소.classList.toggle("클래스명") : 선택한요소에 클래스명이 있는지 여부 확인하여 추가 및 삭제 반복

 

 const title = document.querySelector("#title");

 title.onclick = () => {

 title.classList.toggle("clicked");

 }