클래스부분
class Circle { constructor(radius) {
console.log(this)
this.radius = radius; // 반지름
console.log(this)
}
// 원의 넓이 getArea() { return Math.PI * Math.pow(this.radius, 2); } }
// 자식 클래스 class Cylinder extends Circle { //extend가 있으면 자바스크립트느 상속받는 엔진이라고 생각 constructor(radius, height) {
super(radius); // 빈객체를 만들지 않고 super를 호출해서 super가 만든 this를 받는다 그후 암묵적으로 자신의 this에 할당 this.height = height; //super를 호출하지 않으면 this가 참조가 되지 않는다. }
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡDOM
DOM TREE: HTML 문서를 파싱해서 만들어지는 결과
DOM API로 제어할 수 있다
텍스트노드는 요소노드의 자식이여야함
어트리뷰트 노드도 객체화됨
조작하고 싶을떄 (접근,선택)
1.요소를 선택한다 (QuerySelector(문자열로 css 셀렉터문법) - 1개, 여러개있을땐 맨앞에 1개
QuerySelectorAll 걸리는거 전부다
쿼리셀렉터는 1개 요소 (htmlelement)를 반환, all은 여러개기 떄문에 NodeList라는 객체에 담아서 준다
쿼리셀렉터 vs 겟엘리먼트바이아이디
css문법 , 아이디라서 #안넣어도됨
Non-live 안바뀜 그러니까 이걸쓰자
<->
HtmlCollection(live) 바뀜
ID의 문제 를주면 중복되지 않아야되고 전역변수로 선언된다
가급적 클래스를 주는게 바람직해 보인다 절대적은 아님
const elem = document.getElementById('one'); // 클래스 어트리뷰트의 값을 변경한다. elem.className = 'blue'; 싹다 바꿀땐 애가편하고
elem.classList.add (메소드를 제공) 하나지우거나 하나 더할는등에는 애가편함
const elem = document.querySelector('li.red'); li이고 클래스가 red이면
li~red 형제 내뒤 싹다
li+red 그다음 형제를 찾는다
여러개를 선택할때,getElementsByClassName();
htmlcollection은 유사배열이다 for문가능
htmlcollection객체는 live해서 , 클래스이름이 중간에 바뀌면 객체의 내용도 따라서바뀜
ㅡ> 여러개 쓸때는 QueryselectorAll을 쓰자
htmlcoletion 같이 여러개를 반환하는것은 null이된다 (부합되는 조건이없으면)
하나를 반환하는것은 null이된다 (부합되는 조건이 없으면)
선택 : 딱 찍어서 선택
탐색 - 기준점을 정해놓고(선택해놓고) 그 근처에서 탐색
부모찾기 parentNode 반드시하나
자식은 여럿일 수 있음 (지정해줘야함 몇번째 자식이냐)
firstChild,lastChild
hasChildNodes()메소드 자식 노드가 있냐? 있다면
childNodes,children 활용
조작(선택한 다음에 그 컨텐츠를 고친다)
텍스트노드 접근 (요소 접근 - 자식 )
어트리뷰트 노드 접근 (메소드 활용)
hasAtrribute,getAttribute,setAttribute,removeAttribute
어트리뷰트검사, 값 최득, 값설정
컨텐츠 조작
innerHTML (보안,퍼포먼스문제가 있지만) -> 실무에선 쓰지않는다
createElement(요소 자체생성)
dom 조작방식
읽어보기
style 조작
'값은 항상 문자열' 카멜 케이스로
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
이벤트(대부분의 이벤트가 비동기로)
동기식 - 순서가 보장된다 (가독성 보장) 비동기식 - 순서가 보장되지 않는다 (순서대로 동작x 가독성↓)
비동기함수들은 동기함수들이 끝났을때 실행된다
함수를 작은단위로 만들면 스코프가 좁아지고, 실행이 금방끝나고, 변수들도 금방죽는다
<button class="btn" onclick="foo">click me </button>
버튼이 눌러지면,(요소)
const $button = document.querySelecot('.btn');
이벤트를 다는방식 세가지
1.마크업에 직접넣기 (바닐라로 쓸때 금지) 코드혼재, 인라인 핸들러
function foo(){
console.log('clicked')
}
2선택된 요소 메소드방식 - 이벤트 프로퍼티 방식
$button.onclick = function() {
console.log('clicked') ;
}
3.요소선택한후 .addEventListener(문자열(이벤트종류),함수() function(){console.log('clicked')};)인수세개 2개는 필수1개옵션 -에드이벤트리스너 메소드방식
2,3의 차이 : 이벤트 핸들러 하나밖에 안된다(2번에다가 2개달면 덮어써진다) 3번은 캡처링 버블링 대응 가능
2번은 버블링만대응가능 (IE V9이상)
앞에 WINDOW하면 WINDOW어디든되니 DOCUMENT를 붙여주자.
1번방식 - this 어려움
2번방식 -메소드 부른 것
3번방식 - 특별히 ' 바인드를 내부에서 해줘서' btn을 가리킴
기본이 버블링을 잡는데, 3번째 인자에 true주면 캡처링을 잡는다.
-기본적으로 올라가는것을 잡는다.
캡처링- 부모에서 발생한 이벤트를 잡겠다(많지않음) 버블링:자식에서 발생한 이벤트를 잡겠다
--이벤트객체--
Event.target(이벤트를 발생시킨 요소에 참조)
Event.currentTaget(this와 동일 addeventlister 바로 앞에)
Event.type (.keyCode) - 키보드의 번호 (엔터키만 눌려졌을떄 ==13?)
Event Delegation
실제로 이벤트를 발생한 녀석이 아니고, 다른녀석에에게 이벤트를 발생하게 만든것
const ul = document.querySelector('#post-lish');
ul.addEventListerner('click', function(e){
if(e.target.nodeName == 'LI'){
console.log(e.target.id);
}
})