jQuery를 사용한 요소의 내부 내용(contents) 선택하기

jQuery의 contents() 메서드는 선택한 요소의 모든 자식 노드를 선택하는 데 사용됩니다. 이는 텍스트 노드, 주석, 엘리먼트 노드 등을 모두 선택하여 조작할 수 있습니다. 아래 예제를 통해 contents() 메서드를 사용하여 요소의 내부 내용을 선택하는 방법을 살펴보겠습니다.

예제 1: 문단(p) 요소의 모든 자식 노드 선택하기

$(document).ready(function() {
    var allContents = $("p").contents();
    console.log(allContents);
});

이 예제는 페이지에서 모든 문단(p) 요소의 내부 내용을 선택하고, 선택된 모든 자식 노드를 콘솔에 출력합니다.

예제 2: 특정 클래스를 가진 div 요소의 내부 텍스트 노드 선택하기

$(document).ready(function() {
    var textContents = $(".content-div").contents().filter(function() {
        return this.nodeType === 3; // 텍스트 노드만 필터링
    });
    console.log(textContents.text());
});

이 예제는 클래스가 "content-div"인 div 요소의 내부 텍스트 노드를 선택하고, 해당 텍스트 노드의 내용을 콘솔에 출력합니다.

예제 3: 특정 클래스를 가진 span 요소의 내부 주석 선택하기

$(document).ready(function() {
    var commentContents = $(".comment-span").contents().filter(function() {
        return this.nodeType === 8; // 주석 노드만 필터링
    });
    console.log(commentContents.text());
});

이 예제는 클래스가 "comment-span"인 span 요소의 내부 주석 노드를 선택하고, 해당 주석 노드의 내용을 콘솔에 출력합니다.