html操作與節點JS

我想從源（鏈接或文件，...）和找到它的值。 html格式是：html操作與節點JS

<!doctype html> 
<html> 
<body> 
    <main> 
    <section id="serp"> 
     <div> 
     <article>a</article> 
     <article>b</article> 
     <article>c</article> 
     <article>d</article> 
     </div> 
    </section> 
    </main> 
</body> 
</html>

首先我用cheerio的。根據文檔我寫：

const cheerio = require('cheerio'); 
const $ = cheerio.load(myhtml); 
const content = $('#serp div').children(); 
console.log(content); // null

根據我使用x-ray相同的程序和jsdom但他們都打印空。

來源

2017-08-25 Ahmad

這是什麼'的console.log（MYHTML）'輸出，只是在Cheerio加載之前？ –

這串<！DOCTYPE HTML>

<節ID = 「SERP」>

@JeremyThille – Ahmad

如果HTML是實際可用並裝入Cheerio，沒有理由爲什麼選擇器應該返回null。問題在別處。你是否真的嘗試記錄它，或者你是否說過，因爲你認爲這會記錄下來？ –

我已經做了以下內容：

let myhtml = `<!doctype html> 
<html> 
<body> 
    <main> 
    <section id="serp"> 
     <div> 
     <article>a</article> 
     <article>b</article> 
     <article>c</article> 
     <article>d</article> 
     </div> 
    </section> 
    </main> 
</body> 
</html>`; 

const cheerio = require('cheerio'); 
const $ = cheerio.load(myhtml); 
const content = $('#serp div').children(); 
console.log(content); 
console.log(`html: ${content.html()}`);

它輸出以下控制檯：

initialize { 
    '0': 
    { type: 'tag', 
    name: 'article', 
    namespace: 'http://www.w3.org/1999/xhtml', 
    attribs: {}, 
    'x-attribsNamespace': {}, 
    'x-attribsPrefix': {}, 
    children: [ [Object] ], 
    parent: 
     { type: 'tag', 
     name: 'div', 
     namespace: 'http://www.w3.org/1999/xhtml', 
     attribs: {}, 
     'x-attribsNamespace': {}, 
     'x-attribsPrefix': {}, 
     children: [Object], 
     parent: [Object], 
     prev: [Object], 
     next: [Object] }, 
    prev: 
     { type: 'text', 
     data: '\n  ', 
     parent: [Object], 
     prev: null, 
     next: [Circular] }, 
    next: 
     { type: 'text', 
     data: '\n  ', 
     parent: [Object], 
     prev: [Circular], 
     next: [Object] } }, 
    '1': 
    { type: 'tag', 
    name: 'article', 
    namespace: 'http://www.w3.org/1999/xhtml', 
    attribs: {}, 
    'x-attribsNamespace': {}, 
    'x-attribsPrefix': {}, 
    children: [ [Object] ], 
    parent: 
     { type: 'tag', 
     name: 'div', 
     namespace: 'http://www.w3.org/1999/xhtml', 
     attribs: {}, 
     'x-attribsNamespace': {}, 
     'x-attribsPrefix': {}, 
     children: [Object], 
     parent: [Object], 
     prev: [Object], 
     next: [Object] }, 
    prev: 
     { type: 'text', 
     data: '\n  ', 
     parent: [Object], 
     prev: [Object], 
     next: [Circular] }, 
    next: 
     { type: 'text', 
     data: '\n  ', 
     parent: [Object], 
     prev: [Circular], 
     next: [Object] } }, 
    '2': 
    { type: 'tag', 
    name: 'article', 
    namespace: 'http://www.w3.org/1999/xhtml', 
    attribs: {}, 
    'x-attribsNamespace': {}, 
    'x-attribsPrefix': {}, 
    children: [ [Object] ], 
    parent: 
     { type: 'tag', 
     name: 'div', 
     namespace: 'http://www.w3.org/1999/xhtml', 
     attribs: {}, 
     'x-attribsNamespace': {}, 
     'x-attribsPrefix': {}, 
     children: [Object], 
     parent: [Object], 
     prev: [Object], 
     next: [Object] }, 
    prev: 
     { type: 'text', 
     data: '\n  ', 
     parent: [Object], 
     prev: [Object], 
     next: [Circular] }, 
    next: 
     { type: 'text', 
     data: '\n  ', 
     parent: [Object], 
     prev: [Circular], 
     next: [Object] } }, 
    '3': 
    { type: 'tag', 
    name: 'article', 
    namespace: 'http://www.w3.org/1999/xhtml', 
    attribs: {}, 
    'x-attribsNamespace': {}, 
    'x-attribsPrefix': {}, 
    children: [ [Object] ], 
    parent: 
     { type: 'tag', 
     name: 'div', 
     namespace: 'http://www.w3.org/1999/xhtml', 
     attribs: {}, 
     'x-attribsNamespace': {}, 
     'x-attribsPrefix': {}, 
     children: [Object], 
     parent: [Object], 
     prev: [Object], 
     next: [Object] }, 
    prev: 
     { type: 'text', 
     data: '\n  ', 
     parent: [Object], 
     prev: [Object], 
     next: [Circular] }, 
    next: 
     { type: 'text', 
     data: '\n  ', 
     parent: [Object], 
     prev: [Circular], 
     next: null } }, 
    options: 
    { withDomLvl1: true, 
    normalizeWhitespace: false, 
    xml: false, 
    decodeEntities: true }, 
    _root: 
    initialize { 
    '0': 
     { type: 'root', 
     name: 'root', 
     namespace: 'http://www.w3.org/1999/xhtml', 
     attribs: {}, 
     'x-attribsNamespace': {}, 
     'x-attribsPrefix': {}, 
     children: [Object], 
     parent: null, 
     prev: null, 
     next: null }, 
    options: 
     { withDomLvl1: true, 
     normalizeWhitespace: false, 
     xml: false, 
     decodeEntities: true }, 
    length: 1, 
    _root: [Circular] }, 
    length: 4, 
    prevObject: 
    initialize { 
    '0': 
     { type: 'tag', 
     name: 'div', 
     namespace: 'http://www.w3.org/1999/xhtml', 
     attribs: {}, 
     'x-attribsNamespace': {}, 
     'x-attribsPrefix': {}, 
     children: [Object], 
     parent: [Object], 
     prev: [Object], 
     next: [Object] }, 
    options: 
     { withDomLvl1: true, 
     normalizeWhitespace: false, 
     xml: false, 
     decodeEntities: true }, 
    _root: initialize { '0': [Object], options: [Object], length: 1, _root: [Circular] }, 
    length: 1, 
    prevObject: initialize { '0': [Object], options: [Object], length: 1, _root: [Circular] } } } 
html: a 

Process finished with exit code 0

來源

2017-08-25 13:07:23 TKoL

html操作與節點JS

回答

相關問題