DAY 8 - TIL

HTML 요소를 선택하는 법

메소드	설명	리턴Type
document.querySelector()	해당 선택자로 선택되는 요소를 1개 선택	요소
document.querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택	배열
document.getElementsByClassName()	해당 클래스에 속한 요소를 모두 선택	배열
document.getElementsByName()	해당 name 속성값을 가지는 요소를 모두 선택	배열
document.getElementsByTagName()	해당 tag의 요소를 모두 선택	배열
document.getElementById()	해당 id의 요소를 선택	요소

 

classList

선택된 Element(요소)의 클래스명들을 반환

.add(클래스명)	선택된 Element에 클래스명 추가
.remove(클래스명)	선택된 Element에 클래스명 삭제
.toggle(클래스명)	선택된 Element에 클래스명이 존재하면 삭제하고, 없으면 추가

 

AddEventListener("event",function(){})

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

document.getElementById("lol").addEventListener("click", function(){
	//lol을 클릭될 때
	//호출 될 함수
	alert("button clicked")
});

사용 가능한 이벤트

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

mouseover VS mouseenter 

The mouseover event triggers when the mouse pointer enters the element, and its child elements.

The mouseenter event is only triggered when the mouse pointer enters the element.

 

window 객체

window 객체는 웹 브라우저의 창을 가르키며, window 객체를 이용하여 브라우저를 조작 할 수 있으며 생략 가능하다.

window.document.~~~ ----> document.~~~~~

메서드 설명

close()	현재 창을 닫습니다
open(링크, 새 탭 or 현재 탭 (optional), 설정 (optional))	새 창을 엽니다
setTimeout(함수, 밀리초)	지정한 초 뒤에 함수 실행
alert(메시지)	팝업 창 생성
scrollTo(옵션)	옵션에 있는 좌표 값으로 스크롤

 

innerHTML VS innerText VS textContent

<div id='my_div'>
  안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>
<input type='button'
       value='innerHTML'
       onclick='getInnerHTML()'/>
<input type='button'
       value='innerText'
       onclick='getInnerText()'/>
<input type='button'
       value='textContent'
       onclick='getTextContent()'/>

function getInnerHTML() {
  const element = document.getElementById('my_div');
  alert(element.innerHTML);
} 

function getInnerText() {
  const element = document.getElementById('my_div');
  alert(element.innerText);
} 

function getTextContent() {
  const element = document.getElementById('my_div');
  alert(element.textContent);
}

 

innerHTML 

innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있다.

• HTML 요소를 반환하거나 변경할 수 있다
• XSS 공격에 취약하니 주의

안녕하세요?     만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>

 

innerText 

innerText는 'Element'의 속성으로, 해당Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어온다.

• 마크업 언어가 적용된 상태로 읽어온다
• 스타일 또한 적용된 상태로 읽기 때문에 display: none; 한 값은 가져오지 못한다

안녕하세요? 만나서 반가워요.
//연속되는 공백은 무시하고 하나의 공백만 처리

 

textContent

textContent는 'Node'의 속성으로, innetText와는 달리 <script>나 <style> 태그와 상관없이

해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다.

• 텍스트만 가져온다
• 스타일은 무시한다

안녕하세요?     만나서 반가워요.
숨겨진 텍스트