NodeJS는 jQuery 선택기를 사용하여 DOM_jquery를 작동합니다.

참고* 2년이 넘은 "오래된" 프로젝트로, NodeJS에서 jQuery의 선택기를 사용하여 브라우저 호환성 관련 코드를 제거한 후 백엔드 HTML/XML을 프런트엔드 DOM처럼 작동할 수 있습니다. , 작업은 JSDOM보다 8배 빠릅니다. 앞서 JSDOM에 심각한 성능 문제가 있다고 언급했습니다. Node.JS 디버그: 메모리 누수 및 무한 루프를 찾는 방법

체리오

서버 측에서 jQuery를 사용하여 빠르고 유연합니다.

소개

서버측 HTML 테스트:

코드 복사 코드는 다음과 같습니다.

var Cherio = require('cheerio'),
$ =cherio.load('

Hello world

');
$('h2.title').text('안녕하세요!');
$('h2').addClass('환영합니다');
$.html();
//=>

안녕하세요!

설치

npm install Cherio

기능

❤ 익숙한 구문: Cheerio는 핵심 jQuery의 하위 집합을 구현합니다. Cheerio는 jQuery 라이브러리에서 모든 DOM 불일치 및 브라우저 호환성 지원을 제거하여 정말 멋진 API를 제공합니다.

ϟ 매우 빠름: Cheerio는 매우 간단하고 일관된 DOM 모델을 사용합니다. 이로 인해 구문 분석, 조작 및 렌더링에 있어 놀라운 성능 향상이 이루어집니다. 예비 엔드투엔드 벤치마크에서는 Cheerio가 JSDOM보다 약 8배 빠른 것으로 나타났습니다.

❁놀라운 유연성: htmlparser2API와 호환됩니다. Cheerio는 거의 모든 HTML 또는 XML 문서를 구문 분석할 수 있습니다.

JSDOM은 어떻습니까?

JSOM에 대한 답답함이 점점 커지기 때문에 Cheerio를 씁니다. 저에게는 계속해서 직면하게 되는 세 가지 주요 문제가 있습니다.

• JSDOM의 내장 파서는 너무 엄격합니다. JSDOM과 함께 번들로 제공되는 HTML 파서는 현재 많은 인기 웹사이트를 처리할 수 없습니다.

•JSDOM이 너무 느림: 대규모 웹사이트를 구문 분석할 때 JSDOM이 확실히 지연됩니다.

•JSDOM이 너무 무겁게 느껴짐: JSDOM의 목적은 브라우저에서 보는 것과 동일한 DOM 환경을 제공하는 것입니다(* 실행 가능한 JavaScript 참고). 나는 이런 것들이 정말로 필요하지 않았습니다. 단지 HTML 조작을 수행하는 간단하고 친숙한 방법을 원할 뿐입니다.

JSDOM을 사용하는 경우

치리오가 모든 문제를 해결할 수는 없습니다. 브라우저와 같은 환경에서 작업해야 한다면 JSDOM을 사용할 것입니다. 특히 서버에서 자동화된 기능 테스트를 수행하려는 경우에는 더욱 그렇습니다.

API

사용할 샘플 HTML 코드:

코드 복사 코드는 다음과 같습니다.

• 애플


• 주황색


• 배

로드 중

먼저 HTML을 로드해야 합니다. jQuery는 실시간 DOM 환경에서 실행되기 때문에 이 단계는 jQuery에서 자동으로 수행됩니다. HTML 문서를 Cheerio에 전달해야 합니다.

이것이 선호되는 방법입니다:

코드 복사 코드는 다음과 같습니다.

var Cherio = require('cheerio'),
$ =cherio.load('

...

');

또는 HTML을 문자열 매개변수로 전달할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$ = require('cheerio');
$('ul', '

...

');

또는 루트 노드

코드 복사 코드는 다음과 같습니다.

$ = require('cheerio');
$('li', 'ul', '

...

');

추가 .load()를 통해 수정해야 하는 기본 구문 분석 옵션을 로드할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$ =cherio.load('

...

', {
NormalizeWhitespace: true,
xmlMode: true
});

이러한 구문 분석 옵션은 htmlparser2에서 직접 차용하므로 htmlparser2에서 사용할 수 있는 모든 매개변수는 Cherio에서도 유효합니다. 기본 옵션은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

{
NormalizeWhitespace: 거짓,
xmlMode: 거짓,
decodeEntities: true
}

선택자

Cheerio의 선택기는 jQuery와 거의 동일하므로 API도 매우 유사합니다.

코드 복사 코드는 다음과 같습니다.

$( 선택기, [컨텍스트], [루트] )

선택기는 루트[루트, 선택 사항]->컨텍스트[컨텍스트, 선택 사항]->선택기 순서로 요소를 선택합니다. 선택기와 컨텍스트는 문자열 표현식, DOM 요소 또는 DOM 요소 배열일 수 있습니다. 루트는 일반적으로 HTML 문서의 루트 요소입니다.

jQuery와 마찬가지로 이 선택 방법은 시작점부터 문서를 탐색하고 조작합니다. 이는 문서에서 요소를 선택하는 기본 방법이지만 jQuery의 CSSSelect 라이브러리(Sizzle 선택기)처럼 구축되지는 않습니다.

코드 복사 코드는 다음과 같습니다.

$('.apple', '#fruits').text()
//=>사과
$('ul .pear').attr('클래스')
//=> $('li[class=orange]').html()
//=>

주황색

속성

속성을 얻고 수정하는 방법.

.attr( 이름, 값 )

속성을 가져오고 설정하는 방법. 첫 번째로 일치하는 요소의 속성 값만 가져옵니다. 설정된 속성의 값이 null로 설정되면 해당 속성이 제거됩니다. jQuery처럼 맵과 함수를 전달할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$('ul').attr('id')
//=>과일
$('.apple').attr('id', 'favorite').html()
//=>

애플

.data( 이름, 값 )

데이터 속성을 가져오고 설정하는 방법. 일치 항목의 첫 번째 요소만 가져오거나 설정합니다.

코드 복사 코드는 다음과 같습니다.

$('

').data()
//=> { appleColor: '빨간색' }
$('

').data('data-apple-color')
//=>'빨간색'
var apple = $('.apple').data('kind', 'mac')
apple.data('종류')
//=>'맥'
.val( [값] )

입력, 선택 및 텍스트 영역 값을 가져오고 설정하는 방법. 참고: 지도는 지원되지만 기능은 아직 추가되지 않았습니다.

코드 복사 코드는 다음과 같습니다.

$('input[type="text"]').val()
//=>입력_텍스트
$('input[type="text"]').val('test').html()
//=><입력 유형="텍스트" 값="테스트"/>

더 많은 API를 보시려면 공식 홈페이지를 방문해주세요