NodeJS使用jQuery選擇器操作DOM

cheerio

簡介

var cheerio = require('cheerio'),

    $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');

$('h2').addClass('welcome');

$.html();

//=> <h2 class="title welcome">Hello there!</h2>
</pre> 






安裝




npm install cheerio
 






功能







?熟悉的語法：Cheerio實現了jQuery核心的一個子集。Cheerio 從jQuery庫中刪除了所有的DOM不一致和瀏覽器兼容支持，呈現其真正華麗的API。




?極快：Cheerio 使用一個非常簡單的，一致的DOM模型。這樣解析，操作和呈現就會帶來令人難以置信的性能提升。初步的端至端的基準測試表明Cheerio比JSDOM快大概8倍。




?令人難以置信的靈活性：兼容htmlparser2API。Cheerio可以解析幾乎所有的HTML或XML文檔。







JSDOM怎么樣?







我寫Cheerio，因為我對JSOM越來越感到失望。對于我來說，有我一次又一次的碰到三大癥結：




?JSDOM內置的解析器是太過嚴格：JSDOM捆綁的HTML解析器現在不能處理很多流行的網站。




?JSDOM太慢：解析大網站,JSDOM有明顯的延遲。




?JSDOM感覺太沉重：JSDOM的目的是提供一個跟我們在瀏覽器中看到的相同的DOM環境(注* 可執行JavaScript)。我從來沒有真的需要這些東西，我只想要一個簡單的，熟悉的方式做HTML操作。







什么時侯使用JSDOM




Cheerio無法解決你所有的問題。如果我需要在一個類似瀏覽器的環境中工作,我仍然會使用JSDOM，特別是當在服務器上想要進行自動化功能測試時。










API




我們將使用的示例HTML代碼：




<ul id="fruits">

  <li class="apple">Apple</li>

  <li class="orange">Orange</li>

  <li class="pear">Pear</li>

</ul>
</pre> 






加載







首先，你需要在加載HTML。這一步在jQuery是自動完成的，因為jQuery的運行在一個，即時的DOM環境中。我們需要將HTML文檔傳入Cheerio中。




這是首選的方法：







var cheerio = require('cheerio'),
    $ = cheerio.load('<ul id="fruits">...</ul>');
 






另外，您還可以將HTML作為字符串參數傳入:




$ = require('cheerio');
$('ul', '<ul id="fruits">...</ul>');
 






或者作為根結點




$ = require('cheerio');
$('li', 'ul', '<ul id="fruits">...</ul>');
 






您也可以通過一個額外的.load（）加載您需要修改的默認解析選項：




$ = cheerio.load('<ul id="fruits">...</ul>', {
    normalizeWhitespace: true,
    xmlMode: true
});
 



這些解析選項是直接從htmlparser2 借來的，因此可以在htmlparser2使用的任何參數在cheerio也有效。默認的選項是：







{
    normalizeWhitespace: false,
    xmlMode: false,
    decodeEntities: true
}
 









Selectors選擇器







Cheerio的選擇器幾乎與jQuery的完全相同，所以API是非常相似的。







$( selector, [context], [root] )
 






選擇器按照: 根[root,可選]->上下文[context,可選]->選擇器 的順序選擇元素。選擇器和上下文可以是一個字符串表達式，DOM元素，DOM元素數組。根通常document 是 HTML文檔的根元素。




像jQuery一樣,此選擇方法會從起點遍歷和操縱文檔。它是從文檔中選擇的元素的主要方法，但不像jQuery那樣構建CSSSelect庫(Sizzle 選擇器)。







$('.apple', '#fruits').text()

//=> Apple

$('ul .pear').attr('class')

//=> pear

$('li[class=orange]').html()

//=> <li class="orange">Orange</li>
</pre> 



Attributes屬性




獲取和修改屬性的方法。







.attr( name, value )




用于獲取和設置屬性的方法。僅獲取匹配的第一個元素的屬性值。如果設置屬性的值設置為null，則刪除該屬性。您也可以像jQuery一樣傳入map和function。







$('ul').attr('id')

//=> fruits

$('.apple').attr('id', 'favorite').html()

//=> <li class="apple" id="favorite">Apple</li>
</pre> 






.data( name, value )







用于獲取和設置數據屬性的方法。獲取或設置僅用于匹配的第一個元素。







$('<div data-apple-color="red"></div>').data()

//=> { appleColor: 'red' }

$('<div data-apple-color="red"></div>').data('data-apple-color')

//=> 'red'

var apple = $('.apple').data('kind', 'mac')

apple.data('kind')

//=> 'mac'
</pre> 






.val( [value] )







用于獲取和設置input，select和textarea值的方法。注：支持map，function尚未添加。






$('input[type="text"]').val()

//=> input_text

$('input[type="text"]').val('test').html()

//=> <input type="text" value="test"/>
</pre> 






更多API請參見官網




原文地址： github.com 


來自：http://ourjs.com/detail/54d0596a232227083e000024