检查元素在 DOM 中是否在 Node.js 中可见

Question

我想检查元素在 Node.js 中的 DOM 中是否可见。我使用 jsdom library for getting DOM structure. There are 2 方法检查元素在客户端的可见性 javascript，但它不适用于 node.js.

中的 jsdom

1) offsetParent 属性始终为 null，即使对于可见元素也是如此

2) dom.window.getComputedStyle(el).display returns block, 但元素的 css 规则是 display: none

const request = require('request');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

request({ 'https://crooked.com/podcast-series/majority-54/', jar: true }, function (e, r, b) {
  const dom = new JSDOM(b);
  test(dom);
});

const test = (dom) => {
  const hiddenElement = dom.window.document.querySelector('.search-outer-lg');
  const visibleElement = dom.window.document.querySelector('.body-tag-inner');
  console.log(dom.window.getComputedStyle(hiddenElement).display); // block
  console.log(visibleElement.offsetParent); // null
}

是否可以或以其他方式检查元素在 node.js 中在 DOM 中的可见性？

Answer 1

试试看没用

const  a1=dom.window.document.querySelector('.search-outer-lg');
  const coponentStyle= dom.window.getComputedStyle(a1)
  coponentStyle.getPropertyValue('display')
[![const  offsetParet=window.document.querySelector('.body-tag-inner').offsetParent][1]][1]

it return body hav class archive tax-podcast_type term-majority-54 term-98

// 将是 return none 在不使用 dom 的情况下在 consle 中尝试这个显示这张图片如果不行告诉我

Answer 2

绝招方法:)



function isHiddenElement(selector) {
    return (document.querySelector(selector).offsetParent === null)
}

if(isHiddenElement('.search-outer-lg')
{
  alert("element hidden");

}

Answer 3

我尝试了 puppeteer 而不是 jsdom，我得到了正确的 display 值。这是片段：

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto(uri);

  const searchDiv = await page.evaluate(() => {
    const btn = document.querySelector('.search-outer-lg');
    return getComputedStyle(btn).display;
  });

  console.log(searchDiv)
  await browser.close()
})()

检查元素在 DOM 中是否在 Node.js 中可见

Check if element is visible in DOM in Node.js

node.js

jsdom