[TIL] Javascript(Html요소 선택, 이벤트,클래스 리스트...)

HTML 요소 선택하는 법

<div class="divClass" id="divId">Hello</div>

.querySelector('css식')

document.querySelector('div')
document.querySelector('.divClss')
document.querySelector('#divId')

• 태그에서 첫번째만 선택된다.

.querySelectorAll('css식')

document.querySelectorAll('div')
document.querySelectorAll('.divClss')
document.querySelector('#divId')

• 태그 전체가 배열로 선택된다.

.getElementByid()

document.getElementById('divId')

.getElementsByClassName()

document.getElementsByClassName('divClass')

• 해당 클래스 태그 전체가 선택됨. 하나만 선택할려면

document.getElementsByClassName('divClass')[index] //이런식으로

.getElementsByName('name')

document.getElementsByName('name')

name속성이 name인 요소 선택

클래스 리스트

선택한 Element 에 클래스명 반환

• Element.add('클래스명') : 선택한 Element에 클래스 명 추가
• Element.remove('클래스명') : 선택한 Element에 클래스 명 삭제
• Element.toggle('클래스명') : 선택한 Element에 클래스 명이 없으면 추가, 있으면 삭제

이벤트

선택된 Element가 어떠한 이벤트를 가질 때 뒤의 함수가 호출

.addEventListener('event',function(){})

document.querySelector('button').addEventListener('click',()=>{
	//버튼 클릭시
    console.log('clicked')
})

주요 사용 이벤트

• click : 클릭시 (마우스 버튼에서 손가락을 땐 순간)
• mouseenter : 마우스를 요소위에 올리는순간
• mouseover : 마우스를 요소위에 올리는 순간(자식 Element위에 올라와도 영향)
• mousedown :클릭하고 버튼에서 손가락을 때기 전
• mouseout : 마우스가 요소 밖으로 벗어날 때
• focus : 포커스가 갔을때
• keypress : 마우스를 요소위에 올리는 순간(자식 Element위에 올라와도 영향)
• keydown : 키를 누를 때
• keyup : 키를 눌렀다가 떼는 순간
• load : 웹 페이지 소스가 다운로드 되었을 때
• resize : 창 크기를 조절 할 때
• scroll : 스크롤바, 마우스 휠, up down버튼으로 스크롤 할 시
• unload : 링크를 클릭해서 다른 페이지로 이동하거나 브라우저나 브라우저 탭을 닫았을 때
• change : form 필드의 상태가 변경 되었을 때
• submit : form태그에서 submit버튼이 눌렸을때
  addEventLitener 공식문서

window 객체

웹브라우저 창을 가르키며 window 객체를 이용해 브라우저 조작 가능(window는 생략 가능)

• close : 현재창을 닫는다
• open(링크, 새탭 or 현재탭(optional), 설정(optional)) : 새 창 오픈
• setTimeout(함수,밀리초) : 지정한 초 뒤에 함수 실행
• alert(메세지) : 팝업 창 생성
• scrollTo({top : x , left : y , behavior : smooth(부드럽게) }) : 해당 좌표로 스크롤
  window 공식문서>

innerHtml, textContent, innerText

• innerHtml : html요소를 반환 or 변경한다. XSS공격에 취약하니 주의
• innerText : 마크업 언어, 스타일 등이 적용된 텍스트 상태를 읽어온다.
• textContent : 텍스트만 가져온다.(스타일 무시)

innerText, textContent 차이점

html 예제

  <div class="text">
    <span>abcd</span>
    <span  style="display:none">efgh</span>
  </div>

• innerText

let innerT = document.querySelector('.text');
document.write(innerT.innerText)

> abcd (efgh는 display none속성으로 인해 불러오지 않음 줄바꿈,연속적인 공백도 미포함)

• textContent

let innerT = document.querySelector('.text');
document.write(innerT.textContent)

> abcd efgh (style 속성은 무시하고 불러옴, 줄바꿈, 연속적인 공백도 포함)

event.preventDefault();

a 태그 또는 submit 태그는 눌렀을 때 고유의 동작으로 페이지를 이동시키거나, 리로드 되거나, form 안에 input 값을 전송하는 동작을 하는데 이걸 중지시키는 역할을 합니다.

form.addEventListener('submit',function(event){
	event.preventDefault();
	// 동작
}