jQuery 노드 함수 — length, text, remove, console.log 완전 정리

 

 

Web Development · jQuery

jQuery 노드 함수 —
length · text · remove · console.log

DOM 노드를 세고, 읽고, 지우는 핵심 메서드

시작 오늘 분석할 코드

div 한 개를 클릭하면 "이전/이후" 노드 개수와 텍스트를 콘솔에 비교 출력한 뒤 div를 제거한다. 잠깐 동안 콘솔에 노드의 변화가 한눈에 찍힌다.

jQuery(document).ready(function() { console.log("#1# 문서준비 이벤트 핸들러가 동작했습니다."); jQuery('div').click(function() { console.log("#2# div 노드 개수 :" + $('div').length); console.log("#3# h1 노드 개수 :" + $('h1').length); console.log("#4# h1 텍스트 노드 내용 :" + $('h1').text()); console.log("#5# h1 속성 노드 개수 :" + $('*[id]').length); jQuery(this).remove(); jQuery('#id2').text('jQuery 실행결과입니다.'); console.log("#6# div 노드 개수 :" + $('div').length); console.log("#7# h1 노드 개수 :" + $('h1').length); console.log("#8# h1 텍스트 노드 내용 :" + $('h1').text()); console.log("#9# h1 속성 노드 개수 :" + $('*[id]').length); }); });

실제 출력 미리보기

jQuery 클릭하세요

jQuery 실행결과입니다. (클릭 후 모습)

ConsoleNetworkSources

— 페이지 로드 시 —

▶#1# 문서준비 이벤트 핸들러가 동작했습니다.

— div 클릭 직후 (제거 전) —

▶#2# div 노드 개수 :1

▶#3# h1 노드 개수 :2

▶#4# h1 텍스트 노드 내용 :jQuery 클릭하세요

▶#5# h1 속성 노드 개수 :2

— remove 직후 —

▶#6# div 노드 개수 :0

▶#7# h1 노드 개수 :1

▶#8# h1 텍스트 노드 내용 :jQuery 실행결과입니다.

▶#9# h1 속성 노드 개수 :1

---

용어 핵심 키워드

.length선택된 요소의 개수 (속성)

.text()인자 없으면 읽기, 있으면 쓰기

.remove()DOM에서 요소 자체 제거

$(this)이벤트 발생한 바로 그 요소

console.log()개발자 도구 콘솔에 출력

$('*[id]')id 속성을 가진 모든 요소

---

1 .length — 노드 개수 세기

$('div').length는 매칭된 div의 개수를 숫자로 돌려준다. 본 코드 시작 시점에는 div가 1개라 1, remove 후는 0이다.

• $('h1').length → 2 (id1, id2 두 개)
• $('*[id]').length → 2 (id 속성을 가진 요소 — 두 h1)

⚙ 왜 .length()가 아니라 .length? — 함수가 아니라 속성이라서다. 배열의 length와 같은 형태다.

---

2 .text() — 두 가지 모드

// 인자 없이 — 텍스트 읽기 (getter) const txt = $('h1').text(); // 인자 있으면 — 텍스트 쓰기 (setter) $('#id2').text('jQuery 실행결과입니다.');

본 코드는 두 모드를 모두 사용한다. 읽을 때는 매칭된 모든 요소의 텍스트가 이어 붙어 반환된다.

⚠ 여러 매칭 시 — $('h1').text()은 두 h1의 텍스트를 합친 문자열을 돌려준다. id별로 따로 읽으려면 $('#id1').text()처럼 좁혀야 한다.

---

3 .remove() vs .empty() vs .hide()

메서드	요소 자체	안의 내용	되돌리기
.remove()	DOM에서 삭제	같이 사라짐	다시 추가해야 함
.empty()	유지	안의 자식만 삭제	같음
.hide()	유지 (CSS display:none)	유지	.show()로 복원

본 코드는 div를 완전히 없앤다 (.remove()). 그래서 다시 클릭하려 해도 사라진 div는 클릭 이벤트가 일어날 수 없다.

---

 

반응형

 

4 $(this) — 이벤트 발생 요소

jQuery('div').click(function() { ... }) 안에서 this는 방금 클릭된 그 div 자기 자신을 가리킨다.

그냥 this는 vanilla DOM 노드이고, 거기에 jQuery 기능을 쓰려면 $()로 감싸 jQuery 객체로 변환한다 — $(this).

💡 왜 $(this)? — this.remove()는 vanilla DOM API로도 동작하지만, $(this)로 만들면 .css()·.text() 같은 jQuery 메서드를 이어 쓸 수 있다.

---

5 console.log — 디버깅의 친구

console.log(...)은 브라우저 개발자 도구(F12)의 콘솔 탭에 메시지를 출력한다. 화면에 영향을 주지 않으므로 디버깅 흔적으로 자주 쓴다.

• F12 → Console 탭에서 확인
• 여러 인자 가능: console.log('count', 5, [1,2,3])
• 객체도 출력 가능 — 펼쳐 볼 수 있는 트리 형태
• 오류 추적: console.error(), 경고: console.warn()

---

6 클릭 전후 변화 정리

지표	클릭 전	클릭 후	이유
div 개수	1	0	$(this).remove()로 사라짐
h1 개수	2	1	div 안의 h1#id1이 함께 사라짐
h1 텍스트	"jQuery 클릭하세요"	"jQuery 실행결과입니다."	id2의 텍스트가 새로 채워짐
id 속성 가진 요소	2	1	id1이 div와 함께 제거됨

---

7 자주 하는 실수

실수	증상	해결
.length() 괄호	TypeError	.length는 속성 — 괄호 X
$()로 감싸지 않은 this	jQuery 메서드 사용 못 함	$(this)로 감싸기
.remove() 후 같은 변수 사용	DOM에서 사라졌지만 변수 참조는 살아있음	참조 후엔 = null
여러 매칭에 .text() getter	모두 합친 문자열 반환	구체 선택자 또는 .each() 사용

---

핵심 한 줄 요약

.length선택된 요소 개수 (속성)

.text()읽기 / .text(s)는 쓰기

.remove()DOM에서 완전 제거

$(this)이벤트 발생 요소를 jQuery로

console.log()개발자 도구 콘솔 출력

$('*[id]')id 속성 가진 모든 요소

Tags

#jQuery #length #text #remove #this #console-log #노드함수 #속성선택자 #DOM조작 #JS #자바스크립트 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery, length, text, remove, this, console-log, 노드함수, 속성선택자, DOM조작, JS, 자바스크립트, CSS, HTML, 웹개발, 티스토리