7/18 TIL

요소 추가하기

append()
- Node와 String을 전부 추가할 수 있음
- 여러가지 값을 한번에 붙일 수 있음
- 반환 값이 없음

appendChild()
- Node만 추가할 수 있음
- 한번에 하나만 추가할 수 있음
- 추가한 Node를 반환함

 

** 공통점: 붙여 넣는 공간(부모 노드의 제일 마지막 자식 요소로 추가)은 동일함

prepend()
- 부모 노드의 첫번째 요소로 추가함

Event 객체

e.target

- this와 같은 효과

- .tagName

jQuery: 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

프레임 워크:  특정 프로그램 개발의 시작부터 끝까지 필요한 모든 기능을 제공하는 도구 및 자원들의 묶음
라이브러리: 자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수 있도록 한 자원들의 묶음

 

$(선택자).동작함수();

 

$("선택자").val(); 값 가져오기
$("선택자").val("설정할 값"); 값 설정하기

$("선택자").text("글자"); text 변경하기

 

$("선택자").on("동작", 실행); addeventlistener

 

$("선택자").attr("속성", "속성값"); 속성 변경하기

 

$("선택자").css("속성", "속성값"); css 변경하기

 

$("선택자").html("html코드"); html 요소내용 변경하기(안쪽에 추가)

 

요소 추가
- $("선택자").append(요소); 선택된 요소의 자식 요소 중 제일 마지막 요소로 추가
- $("선택자").prepend(요소); 첫번째로 추가
- $("선택자").before(요소); 선택된 요소의 이전 형제 요소로 추가
- $("선택자").after(요소); 선택된 요소의 다음 형제 요소로 추가

 

요소 삭제
- $("선택자").remove(); 선택한 요소를 DOM 트리에서 삭제, 인자로 선택자를 넘겨주면 선택한 요소 중 조건을 만족하는 요소만 삭제
- $("선택자").empty(); 선택한 요소의 자식 요소를 모두 삭제, (요소).innerHTML = "" / (요소).textContent = ""; 동일하게 처리 가능

 

요소 탐색
- $("선택자").parent(); 바로 위에 존재하는 하나의 부모요소 선택(js: .parentNode)
- $("선택자").parents(); 모든 조상을 선택
- $("선택자").children(); 선택된 요소의 자식 요소 모두 선택(js: .childNodes 비노드요소 포함, .children 비노드요소 제외)
- $("선택자").next(); 선택된 요소 바로 다음에 위치한 형제 요소 선택(js: .nextSibling)
- $("선택자").prev(); 선택된 요소 바로 이전에 위치한 형제 요소 선택(js: .previousSibling)

 

$("선택자").addClass("클래스명"); 클래스 추가
$("선택자").removeClass("클래스명); 클래스 삭제
$("선택자").hasClass("클래스명); 클래스 확인. 리턴은 true/false