내가 다시 볼 용도
2022.07.25
document.querySelector(selectors)
-
선택자와 일치하는 문서 내의 첫번째 요소(element)를 반환한다.
-
에러 -> SYNTAX_ERR
selectors의 구문이 유효하지 않음. -
var el = document.querySelector("div.user-panel.main input[name=login]");
요렇게 강력한 선택자도 사용할 수 있다.
클래스가 “user-panel main”인 div 즉, div class=”user-panel main” 안의, 이름이 “login”인 input 중 첫 번째 요소를 선택자로 한다. -
선택자를 만족하는 모든 요소의 목록을 얻으려면 document.querySelectorAll()
innerHTML / innerText / textContent
Element.innerHTML
- 해당 element의 HTML, XML을 읽어오거나 설정할 수 있다.
cosnt something= document.querySelector(~~);
something.innerHTML= '!!!';
-
element에 해당되는 HTML부분을 새로 설정할수있다(‘!!!’).
-
내가 이해하기 쉽게 말하면 특정 HTML 요소를 구현할 화면에 띄우고 싶거나 또는 그 요소에 어떤 변동을 줘서 띄우고싶을때 사용하면 될것같다.
-
예를 들어 만약 div요소로 설정해줬다면 해당 div안에 있는 모든 내용을 읽어온다.(안에 막 span 등 설정해줬으면 span 글자까지 읽어온다구…)
-
또는 설정해놓은 div영역에 내가 원하는 요소를 출력시킬 수도 있다.
Element.innerTextPermalink
-
선택한 요소의 렌더링된 콘텐츠를 화면에 나타내준다.
-
사용자에게 보여지는 텍스트 값을 읽어온다.
-
예를 들어 div요소로 설정해줬으면 div안에 사용자가 볼 수 있는 부분들만 화면에 보여준다.
즉, display:none 등으로 사용자가 화면에서 못보게 설정해놓은 부분은 출력되지 않는다.
Node.textContent
-
textContent는 ‘Node’의 속성으로, innetText와는 달리 script나 style 태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽는다.
-
노드가 document 또는 Doctype이면 null을 반환
innerText vs innerHTML
- innerText는 element안의 text값만 가져오는거고 innerHTML은 element안의 HTML을 가져오는거다.
element.innerText = "<div style='color:red'>A</div>";
element.innerHTML = "<div style='color:red'>A</div>";
이렇게 설정했다면
innerText로 출력하면 <div style='color:red'>A</div> 이 text가 전부 나오고,
innerHTML은 빨간색 A가 나온다!!textContent vs innerText
-
textContent는 script와 style 요소를 포함한 모든 요소의 콘텐츠를 가져오지만 innerText는 “사람이 읽을 수 있는” 요소만 처리한다.
-
textContent는 노드의 모든 요소를 반환하지만 innerText는 스타일링을 고려하며, “숨겨진” 요소의 텍스트는 반환하지 않는다.
innerHTML vs textContent
- Element.innerHTML은 이름 그대로 HTML을 반환한다.
- 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다고 한다.
EventTarget.addEventListener()
addEventListener(type, listener, options);
-
type: 수신할 이벤트 유형을 나타내는 대소문자 구분 문자열
(참고: https://developer.mozilla.org/ko/docs/Web/Events ) -
listener: 지정한 이벤트를 수신할 객체 // 실행할 함수 // 선언된 함수를 넣어도 되고 화살표함수로 이 안에서 직접 설정해도 됨
-
참고: 선언한 이벤트 리스너가 더 이상 필요없게되면 반드시 이미 선언된거는 삭제해줘야된다.
특정 페이지에서만 사용하는 이벤트 리스너라면 해당 페이지를 떠날 때 이벤트 리스너를 삭제한다.eventTarget.removeEventListener(type, listener)
setInterval / clearIntervalPermalink
setInterval (callbackfunc, delay)
-
기준 간격(ms단위)을 두고 주기적으로 콜백함수를 발생 시키고 싶을 때 사용한다.
-
웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 사용
-
setInterval함수는 ‘Interval ID’ 라고 불리는 값을 리턴해서 그 값을 반복작업을 종료하기 위해 호출하는
clearInterval()함수의 파라미터로 사용한다.
clearInterval()
-
setInterval() 함수에 의해 실행된 반복 작업을 종료하는 함수로 이 함수는 intervalID를 매개변수를 입력 받는다.
-
setInterval() 사용이후에는 clearInterval()함수를 사용해서 타이머를 정리해주는 습관을 들여야한대
const timer= setInterval(countstart, 1000);
clearInterval(timer);자꾸 콜백함수 넣어줄때 ()까지 넣지말기!!
필요할 때만 그래야지!! ()넣으면 반복 안돼
