jQuery로 텍스트 노드를 어떻게 선택할 수 있나요?

jQuery로 텍스트 노드 쿼리

jQuery는 DOM 조작 및 탐색을 위한 강력한 기능을 제공합니다. 그러나 요소의 텍스트 콘텐츠에 액세스하는 데 중요한 텍스트 노드를 선택하는 간단한 방법을 제공하지 않습니다.

해결책

이 문제를 해결하려면 다음을 수행하세요. jQuery의 content() 및 find() 함수의 강력한 기능을 활용하세요. content()는 텍스트 노드를 포함한 모든 하위 노드를 검색하는 반면 find()는 하위 요소를 대상으로 합니다. 이 두 기능을 결합하면 모든 하위 텍스트 노드를 포함하는 jQuery 컬렉션을 효과적으로 얻을 수 있습니다.

var getTextNodesIn = function(el) {
    return $(el).find(":not(iframe)").addBack().contents().filter(function() {
        return this.nodeType == 3;
    });
};

이 접근 방식은 크로스 사이트 스크립팅 취약점을 방지하기 위해 선택에서 iframe 요소를 제외합니다.

jQuery 버전 1.7 이하에 대한 주의사항

jQuery 이전 버전의 경우 1.8에서는 위 코드가 올바르게 작동하지 않습니다. 이 문제를 해결하려면:

• addBack()을 andSelf()로 바꾸세요.
• jQuery 1.8 이상에서 andSelf()는 이제 더 이상 사용되지 않으며 addBack()을 사용합니다.

또는 순수 DOM 솔루션

효율성을 위해 재귀 함수를 사용하여 DOM을 탐색하고 텍스트 노드를 수집하는 것을 고려해 보세요.

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

이 솔루션은 공백 텍스트 노드를 포함하거나 제외할 수 있어 유연성을 제공합니다. .

결론적으로 이러한 방법을 사용하면 요소 내의 텍스트 노드를 효과적으로 선택할 수 있으므로 텍스트 조작을 정밀하게 제어할 수 있습니다.

위 내용은 jQuery로 텍스트 노드를 어떻게 선택할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!