🔥 [UIUX] 0201 JAVASCRIPT Coding, 코딩 초급~고급 17

✏️ 2025. 2월 01일 / javascript 초급~고급 17

👻 DOM으로 태그 가져오기
1. getElementById()메서드
html에서 id는 태그의 고유한 이름을 지정할 때 사용합니다.
getElementById()메서드를 사용하면 해당 이름을 가지고 있는 태그를 선택해서 가져옵니다.
즉, 태그를 하나만 가져오는 것 입니다.
이미 매서드에 id를 가져온다는 사실이 명시되어 있으므로 #은 쓰지 않고 불러옵니다.

      [기본형]
      document.getElementById('아이디명')

2. getElementByClassName()메서드
getElementByClassName()메서드는 지정한 class선택자 이름이 들어있는
html요소에 접근한다. 메서드 이름에 클래스 이름을 가지고 오겠다고 명시
되어 있으므로 .은 붙이지 않는다. 또한 반드시 문자열의 형태로 가져온다.
getElementByClassName()메서드로 태그를 불러오면 클래스 이름이 같은
DOM요소들을 HTMLCollection객체에 저장한다.
HTMLCollection객체는 배열과
비슷한 형태로 저장하고, 배열처럼 인덱스 번호도 부여된다. 그리고 배열처럼
사용할 수 있다. 하지만 배열은 아니다. 만약 배열로 사용하려면 배열로 변환해 주어야 한다.

      [기본형]
      document.getElementByClassName('클래스명')

3. getElementByTagName()메서드
class나 id로 이름이 지정되지 않는 일반 태그들을 불러올때 사용하는 메서드이다.
특정 태그들을 한꺼번에 불러올때 주로 사용하며 HTMLCollection객체에 저장된다.

      [기본형]
      document.getElementByTagName('태그명')

4.querySelector()메서드 , querySelectorAll()메서드
위에 있는 getElementBy~메서드의 반환값(저장장소)는 HTMLCollection객체이다.
여기에는 HTML요소('p'나 'a'같은 형태)만 저장된다.
DOM트리의 텍스트나 속성노드까지 자유롭게 접근하고 제어하려면
querySelector()메서드, querySelectorAll()메서드를 사용해야 한다.
id선택자처럼 반환값이 1개라면 querySelector()메서드를 사용하고,
class선택자나 태그명 선택자처럼 반환값이 여러 개라면 querySelectorAll()메서드를 사용한다.
querySelector()메서드 또는 querySelectorAll()메서드로 선택자를 표현할때에는
#또는 .을 붙여서 사용해야 하고 반드시 문자열로 표현해야 한다. 태그는 기호없이 불러오면
된다. querySelector, querySelectorAll로 데려오는 모든 반환값(=태그)는 NodeList
라는 공간에 저장되고 노드 리스트는 노드를 한꺼번에 저장한 것으로 배열과 비슷한 형태로
생겼다. 하지만 마찬가지로 배열은 아니다.

      [기본형]
      - querySelector는 제일 먼저 등장하는 태그 1개를 가져온다.
      document.querySelector('#아이디명');
      document.querySelector('.클래스명');
      document.querySelector('태그명');
      - 해당 클래스명이나 태그를 모두 가져올때
      document.querySelectorAll('.클래스명');
      document.querySelectorAll('태그명');

👻 웹요소의 내용 수정하기
html태그안에 들어있는 src나 alt와 같은 속성들은 attribute(node)라고 표현하고
자바스크립트의 객체에서 사용하는 속성들은 property라고 한다.
자바스크립트에서는 웹 요소의 내용을 수정할 수 있다. 가장 쉬운 방법은
innerText나 innerHTML프로퍼티를 이용하는 것이다. 이름만 봐도 알 수 있듯이
innerText는 텍스트 내용을 수정하고 innerHTML은 태그까지 반영하여 내용을 수정한다.

      1. innerText
      ------------------------------
      요소.innerText = 내용;
      2. innerHTML
      -----------------------------
      요소.innerHTML = 내용;

👻 태그의 속성 수정하기
웹 요소를 문서에 삽입할때 태그 속성을 함께 사용하면 DOM트리에 속성
노드가 추가되면서 속성값이 저장된다. 이때 속성에 접근하려면
getAttribute()메서드를 사용하고, 속성을 수정하려면 setAttribute()메서드를 사용한다.

      [기본형]
      요소.getAttribute('속성명'); 
      : 해당 요소의 속성에 접근하여 지정된 값을 가져온다.
      요소.setAttribute('속성명','바꿀 값');
      : 해당 요소의 속성에 접근하여 지정된 값을 새 값으로 바꾼다.

👻 이벤트 객체
이벤트 객체는 이벤트 핸들러 안에 포함된 객체로 이벤트가 발생하면 생성된다.
event객체에는 이벤트에 대한 다양한 정보를 가지고 있다.
예를 들어 이벤트가 발생된 대상(태그)에 접근할때 this라는 키워드를 사용할 수 있다.

      [이벤트 객체의 프로퍼티]
      - altKey : 이벤트가 발생했을때 alt가 눌렸는지에 대한 여부를 boolean값으로 반환한다.
      - ctrlKey : 이벤트가 발생했을때 ctrl이 눌렸는지에 대한 여부를 boolean값으로 반환한다.
      - shiftKey : 이벤트가 발생했을때 shiftKey가 눌렸는지에 대한 여부를 boolean값으로 반환한다.
      - button : 마우스에서 누른 키 값을 반환한다.(왼쪽 :0, 휠 :1, 오른쪽 :2)
      - charCode : keypress이벤트가 발생했을때 어떤 키를 눌렀는지 유니코드값으로 키의 정보를 반환한다.
      - clientX, clientY : 이벤트가 발생한 요소의 X좌표 위치와 Y좌표 위치를 반환한다.
      - pageX, pageY : 현재 문서를 기준으로 이벤트가 발생한 X좌표 위치와 Y좌표 위치를 반환한다.
      - screenX, screenY : 현재 화면을 기준으로 이벤트가 발생한 X좌표 위치와 Y좌표 위치를 반환한다.
      - target : 이벤트가 최초로 발생한 대상을 반환한다.
      - timeStamp : 이벤트가 발생한 시간을 반환한다.
      - type : 발생한 이벤트의 이름을 반환한다.
      - which : 키보드와 관련된 이벤트가 발생했을때 키의 유니코드 값을 반환한다.

      [메서드]
      - preventDefault() : 기본이벤트를 취소할때 사용한다.
      - stopPropergation() : 기본이벤트를 취소할때 사용한다.