InteractiveJavascript

태그 관련 메소드

const tag = document.createElement("li");// 태그 생성
tag.textContent = "leedongkyu"; //text 값 생성
tag.className = "name";// class 이름 바꾸기 띄어쓰기로 여러 클래스 사용가능

노드 추가하기 prepend(처음) , append(마지막) , after(후에) , before(이전)

노드 삭제하기 remove()

유사배열이란

1. 숫자형태의 인덱싱이 가능하다.

2. length 프로퍼티가 있다.

3. 배열의 기본 메소드를 사용할수 없다.

4. Array.isArray()은 false를 리턴한다.

5. 유사배열은 다양하다.

html 속성을 접근 표준 속성 및 비표준 속성에 모두 접근하는 방법

element.getAttribute("class");
element.setAttribute("class","class1 class2 class3");
element.removeAttribute('속성'); //속성 제거하기
// element.classList
// 클래스의 속성 값을 유사 배열로 다룬다.
// 쉼표로 구분해서 여러개 넣는다.
element.classList.add("done", "other");
element.classList.remove("done", "other");
// style 프로퍼티 Camel 표기법을 사용해야 한다. 스타일 우선순위가 높아진다.
element.style.textDecoration = "line-through";
element.style.backgroundColor = "#DDDDDD";

1. element.innerHTML

• 요소 노드 내부의 HTML 코드를 문자열로 리턴해 줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)
• 요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용됩니다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용해야해요!)

2. element.outerHTML

• 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴해줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)
• outerHTML은 새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의해야 합니다.

3. element.textContent

• 요소 안의 내용들 중에서 HTML 태그 부분은 제외하고 텍스트만 가져옵니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)

이벤트 핸들러 등록하기

이벤트 핸들러를 등록할때 이벤트 프로퍼티를 사용하면 이벤트를 삭제하지 못하고 덮어씌울수 밖에 없다. 즉 removeEventlistener를 사용 할 수 없다.그리고 이벤트를 여러개 등록 할 수 없다.

이벤트 핸들러를 등록할 때 권장되는 방법

add.EventListener(‘click’,event1);을 사용한다.독립적인 event handler를 등록 할수 있다.즉 여러게 이벤트를 등록 할 수 있다.이벤트 핸들러안에 함수로 전달하면 안된다. 그러면 함수를 호출해 버리며 이벤트를 등록을 하지 못한다.

이벤트 버블링(default 값)

이벤트 버블링은 이벤트가 발생한 요소에서부터 상위 요소로 전파되는 현상을 말합니다. 이 말은, 예를 들어, 사용자가 특정 버튼을 클릭했을 때, 이벤트 핸들러가 해당 버튼에 연결되어 있으면 해당 버튼에 이벤트가 전달되고, 그 다음에는 그 부모 요소에게 이벤트가 전달되고, 그 다음에는 더 상위 요소로 전달되는 것을 의미합니다.이벤트 위임이 가능하다.

같은 이벤트 타입에서만 이벤트가 실행된다.

이벤트 캡처링 순서

1. 캡처링단계:이벤트가 하위 요소로 전파되는 단계

2. 타깃 단계:이벤트가 실제 타깃 요소에 전달되는 단계

3. 버블링단계:이벤트가 상위요소로 전달되는 단계 event.stopPropagation();이벤트 버블링을 막는 요소

이벤트 버블링은 기본적으로 true이고, 이벤트 캡처링은 기본적으로 false입니다. 그러나 이 값을 명시적으로 설정할 수도 있습니다. 이벤트 핸들러를 등록할 때 세 번째 매개변수를 사용하여 캡처링을 활성화하거나 비활성화할 수 있습니다. 만약 true로 설정하면 이벤트 캡처링을 활성화시키고, false로 설정하면 이벤트 버블링이 활성화됩니다.

상위요소에 이벤트 핸들러가 할당되어 있지 않다면, 해당 이벤트에 대한 처리는 실행되지 않을 뿐입니다. 하지만 이벤트는 여전히 발생하고, 버블링 단계를 거쳐 상위 요소까지 전파됩니다.

마우스 이동 이벤트

이벤트 핸들러가 자식 요소에까지 영향을 끼치게 하고싶은 경우에는 mouseover/mouseout을, 자식 요소에는 영향을 끼치지 않고 해당 요소에만 이벤트 핸들러를 다루고자 한다면 mouseenter/mouseleave를 활용