如何使用JSDOM (Node.js)获取img src
JSDOM是一个基于Node.js的库，用于在服务器端模拟DOM环境。它允许开发者使用类似于浏览器的API来操作和解析HTML文档。
要使用JSDOM获取img标签的src属性，可以按照以下步骤进行：
- 首先，确保已经安装了JSDOM库。可以使用npm命令进行安装：
npm install jsdom- 在Node.js脚本中引入JSDOM库：
const { JSDOM } = require('jsdom');- 创建一个JSDOM实例，并将HTML文档作为参数传递给它：
const html = '<html><body><img src="example.jpg" alt="Example Image"></body></html>';
const dom = new JSDOM(html);- 通过JSDOM实例的
window属性获取文档对象，并使用标准的DOM API来获取img标签：
const document = dom.window.document;
const imgElement = document.querySelector('img');
const src = imgElement.src;现在，src变量将包含img标签的src属性值，即example.jpg。
JSDOM的优势在于它可以在服务器端模拟DOM环境，使得开发者可以使用熟悉的DOM API来操作和解析HTML文档。这对于需要在服务器端进行HTML文档处理和数据提取的任务非常有用，例如爬虫、数据抓取和测试等。
在腾讯云的产品中，与JSDOM相关的产品可能是云函数（Serverless Cloud Function）。云函数是一种无服务器计算服务，可以在云端运行代码，而无需关心服务器的管理和维护。使用云函数，您可以编写一个Node.js脚本，引入JSDOM库，并在云端获取img标签的src属性。您可以通过访问腾讯云函数的官方文档了解更多信息：腾讯云函数。
请注意，以上答案仅供参考，具体的产品选择和使用方式应根据实际需求和情况进行评估和决策。
相关·内容
1回答
我正在使用Node.js和jsdom查找并下载页面上的所有css/js/image，然后重写urls使其成为相对的(比如wget -- page -requisites --convert-links)。但我在想，如果jsdom已经获取资源，我是否还需要做所有这些工作。如果我打开FetchExternalResources，那么jsdom会用它们做什么呢？它们是否存储在内存中，以便我可以将它们保存到磁盘中？
require('jsdom').defaultDocumentFeatures = {
FetchExternalResources : ['script
浏览 0提问于2011-09-01得票数 0
回答已采纳
我试图在node.js上使用jquery来编辑字符串变量上的每个图像大小(宽度)，但是当我运行脚本时，jquery返回给我一个空的HTMLImageElement对象
为什么？
以下是我的node.js代码：
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = r
浏览 9提问于2022-07-21得票数 0
回答已采纳
1回答
我试图从具有以下html的站点http://www.example.com中获取一些信息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My site</title>
</head>
<body>
<div id="one">
<div>
<iframe>
<!DOCTYPE html>
浏览 4提问于2017-08-29得票数 2
2回答
使用node.js访问DOM
、、、、
我想使用node.js访问html文件并通过id获取元素，这是我的html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram </title>
<script>
function generatePNG (oViewer) {
// some other code
reader.onloadend = function() {
base6
浏览 1提问于2015-12-14得票数 6
1回答
我需要在字符串中找到img标记的src：
const dom = new JSDOM('<img src="godaddy.com">',
{ includeNodeLocations: true });
console.log(dom.window.document.querySelector("img"));
但是控制台的输出是：
HTMLImageElement {}
如何获取src属性的值？
浏览 8提问于2017-07-13得票数 1
回答已采纳
我正在创建一个node.js脚本来解析来自网站的内容。在处理返回的HTML之前，我想删除一些元素和属性。但是，当我试图从jsdom中检索HTML时，返回的只是undefined。这似乎发生在我对HTML进行修改之前。如何使用jsdom修改HTML并返回它？ const jsdom = require('jsdom');
...
var htmlString = `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo
浏览 15提问于2020-01-21得票数 4
回答已采纳
我有一个使用jsdom或画布在node.js中获取图像的过程。在下载过程中，我希望在后端使用Vibrant.js提取样本。下面的代码都不起作用。
使用jsdom
const Vibrant = require('node-vibrant');
const request = require('request');
var jsdom = require("jsdom").jsdom;
var window = jsdom().defaultView;
var document = jsdom('<html><body&
浏览 4提问于2017-08-16得票数 5
回答已采纳
我正在创建一个Node.js脚本，用于从包含表情符号的网站检索数据，然后将文本(包括表情符号)插入到MySQL数据库中。
但是，有些表情符号似乎没有被正确编码，这使得我无法将文本插入数据库。
当试图将包含cat ()的字符串插入MySQL数据库时，我收到了错误ER_TRUNCATED_WRONG_VALUE_FOR_FIELD，这表明编码存在问题。但是，响应内容类型是charset=utf-8，而我的数据库的编码是utf8mb4_unicode_ci，所以理论上我应该能够插入完整范围的unicode字符。如果我试图使用phpmyadmin插入数据库，查询就会成功完成，这表明问题在于我的Node
浏览 1提问于2020-03-24得票数 0
回答已采纳
当使用jsdom和节点-画布通过脚本将资源作为映像添加时，复制调用作为资源。
我相信jsdom和画布之间存在某种交互，可以对端点执行两次调用，我不知道是否有人能帮助我正确配置它，但我只需要一个调用。
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const options = {
runScripts: "dangerously",
url: `https://localhost:8800`,
resources: "usable"
};
浏览 2提问于2021-09-22得票数 1
回答已采纳
<td class="main1">
<br>
<img width="519" height="768" alt="2011 New Year styles, in better quality!" src="http://www.causewaymall.com/shop/images/J-1045.5.jpg">
<br>
<img width="500" height="752" alt="2011 New Yea
浏览 0提问于2012-01-11得票数 0
1回答
在forEach上引用传递
、、、、
下面是一些解决我的问题的代码：
var jsdom = require('jsdom');
var content = '\
<p>\
<img src="assets/logo">\
<img src="assets/background">\
</p>\
';
jsdom.env(content, function (error, window) {
var $ = require('jquery')(w
浏览 1提问于2014-12-02得票数 1
回答已采纳
7回答
我有一个导入组件的测试，该组件反过来导入一个助手文件，该文件使用window对象提取查询字符串参数。我得到以下关于window的错误
FAIL src/js/components/__tests__/Controls.test.jsx
● Test suite failed to run
ReferenceError: window is not defined
Controls.jsx
import { Unwrapped as Controls } from '../Controls'
describe('<MyInterestsControls
浏览 1提问于2017-09-07得票数 22
在package.json中设置任务
"test": "mocha -w test/helpers/browser.js src/**/spec.js",
browser.js的内容
require('babel-register')();
var jsdom = require('jsdom').jsdom;
var exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom
浏览 2提问于2017-03-22得票数 0
1回答
如何使用jsdom和jQuery将脚本附加到DOM主体？使用$('body').append('<script src="..."></script>')的明显答案实际上是在文档head中添加脚本。
这是我正在测试的基本node.js脚本：
var jsdom = require('jsdom');
jsdom.env(
"http://google.com",
['http://code.jquery.com/jquery-1.6.min.js'],
浏览 7提问于2012-11-09得票数 2
1回答
无法测试反应组件。下面我把我的setup.js代码-配置文件和文本的错误。
require('babel-register')();
var jsdom = require('jsdom').jsdom;
var exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
Object.keys(docu
浏览 3提问于2017-02-17得票数 0
回答已采纳
我想加载一个网址，并检查所有的http和https链接的网页，并把这些链接到两个不同的文件。我正在使用javascript，当我试图写所有的http网址在文件中只有最后一个是写的，而其他不是written.Below是代码
var jsdom = require("jsdom");
var request = require('request');
var fs = require("fs");
jsdom.env(
'http://www.google.com', ["http://code.jquery.com/
浏览 0提问于2016-06-09得票数 0
3回答
我有一个带有图像标签的字符串，如下所示
var str = '<img src="www.client.jpg><img src="www.custums.png">';
我必须找到图像标签和jsdom.Thanks，即我需要将图像标签推入数组，但现在我不能使用jsdom，因为我的server.So现在有一个版本问题，有人能建议我不使用jsdom来做这件事吗？
浏览 0提问于2017-07-21得票数 0
2回答
我很难得到摩卡，jsdom，es6模块与babel，以发挥良好的jquery。
这是一个模块
// lib/dom.js
import $ from 'jquery';
const node = (tag)=> $(`<${tag} />`)
export {
node
}
这里有个测试
// test/dom.js
import assert from 'assert';
import { node } from '../src/lib/dom';
describe('node(tag)', ()=&
浏览 1提问于2016-01-20得票数 9
回答已采纳
我想在Node.js中检查元素在DOM中是否可见。我使用库获取DOM结构。有一些方法可以检查元素在客户端javascript中的可见性，但是它不能在node.js中使用jsdom。
1) 属性始终为空，甚至对于可见元素也是空的。
2) dom.window.getComputedStyle(el).display返回block，但元素的css规则是display: none
const request = require('request');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
r
浏览 1提问于2019-09-05得票数 4
回答已采纳
1回答
我试着做一个单元测试项目，使用摩卡和角。由于我必须在控制台中执行此操作(使用用于Jenkins的jUnit报告)，所以我将JsDom添加到我的项目中。不幸的是，我没有成功地加载我的角度应用程序。
这是我的package.json (npm)：
{
"name": "subs-tech-saas-js.test",
"version": "0.0.0",
"description": "SubsTechSaasJS.Test",
"main": "
浏览 2提问于2017-08-08得票数 0
3回答
我正在从node.js迁移到io.js，而我的旧node.js代码不能与jsdom@5一起工作。
var jsdom=require('jsdom');
var $=require('jquery')(jsdom.jsdom().createWindow);
下面是错误：
/tmp/iojs/node_modules/jquery/dist/jquery.js:28
if ( !w.document ) {
^
TypeE
浏览 4提问于2015-05-14得票数 13
回答已采纳
我无法使用JSDOM (版本13.0.0)以相对路径从本地文件系统加载脚本。
我看过以下问题，但没有回答我的问题：
(我已经遵循了runScripts和resources的建议)。
文件foo.js
var jsdom = require('jsdom')
var html = `<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="bar.js"></script>
浏览 0提问于2018-11-10得票数 8
我的web应用程序中有以下代码：
const scroll = () => {
const scrollPerTick = (amountToScroll / 200) * 12;
if (scrolled < amountToScroll) {
container.scrollBy(0, scrollPerTick);
}
window.requestAnimationFrame(() => scroll(scrollBy));
};
if (scrolled < amountToScroll) {
浏览 1提问于2020-05-15得票数 1
我试图在Azure函数中使用外部javascript ( javascript/node.js风味)。由于外部javascript (我需要使用kendo)依赖于一个DOM和一个窗口，所以我尝试使用JSDOM (但如果有更好/更简单的替代方法，则不必使用JSDOM )。
这是我所拥有的一个简单的例子：
module.exports = async function (context, req) {
context.log('JavaScript HTTP trigger function processed a request.');
var html = &
浏览 1提问于2019-06-25得票数 1
回答已采纳
2回答
我让node.js与jQuery和这个插件：一起工作。现在，我希望将天气数据用于另一个服务，而不是将其放入HTML中，但无法访问/打印数据。错误函数起作用，成功函数无效。
var jsdom = require("jsdom");
jsdom.env({
html: '<html><body><div id="weather"></div></body></html>',
scripts: [
'http://code.jquery.com/jquer
浏览 2提问于2014-08-05得票数 1
回答已采纳
1回答
更新
Node.js 4现在已经发布，它完全受到jsdom的支持。下面的最初问题是关于Node.js 0.12的。
如果您一直收到一些奇怪的消息，比如"jsdom 4.x只在io.js上工作，而不是在Node.js上工作“，我建议将Node.js和jsdom升级到最新版本。
jsdom 4已经停止了对Node.js的支持。
来自
注意，在我们的4.0.0发行版中，jsdom不再使用Node.js™，而是需要io.js。如果您仍然停留在像Node.js™这样的遗留技术上，我们仍然欢迎您在3.x系列中安装一个版本。
(我听说过关于Joyent管理Node.js的批评，但这里的“遗
浏览 2提问于2015-02-28得票数 5
1回答
我正在尝试使用Jest测试将dataUrl加载到图像中。我正在使用JSDOM，并按照说明添加了resources: "usable"作为一个选项。 如果我直接从Node运行它，代码就可以工作，但是当我尝试在Jest中运行它时，图像onLoad处理程序从未被调用，因此测试永远不会完成。 const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`, {
浏览 16提问于2019-06-24得票数 0
1回答
测试一个使用谷歌地图自动完成的React应用程序。
使用以下内容设置js dom：
import requestAnimationFrame from './tempPolyfills';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter(), disableLifecycleMethods: true });
const { JSDOM } = requir
浏览 0提问于2018-03-22得票数 1
回答已采纳
我使用jsdom来用我的Node.js应用程序加载网页。有时，我无法获得完整的DOM，因为一些web页面在触发onload事件后使用脚本动态加载其内容。
默认情况下，jsdom会禁用这些脚本的执行，因为它会导致安全缺陷，如它们的文档中所述：
jsdom沙箱不是万无一失的，在DOM的< script>s中运行的代码可以访问Node.js环境，从而访问机器。
我想知道是否有办法让它万无一失地使用一些解决办法？我是Node.JS开发中的新手，由于它是一个单线程环境，我不知道如何创建一个安全的沙箱。
浏览 4提问于2017-07-21得票数 3
回答已采纳
2回答
我只是在学习服务器端JavaScript，所以请容忍我犯下的任何明显的错误。
我正在尝试编写一个文件解析器，它对目录中的HTML文件进行操作，并在解析完所有文件后返回一个JSON字符串。我从一个文件开始，它工作得很好。它从同一台机器上运行的Apache加载资源，注入jquery，执行解析并返回我的JSON。
var request = require('request'),
jsdom = require('jsdom'),
sys = require('sys'),
http = require('http
浏览 0提问于2010-12-15得票数 3
回答已采纳
1回答
我有一个包含generatePNG函数的editor.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram</title>
<script type="text/javascript" src="lib/jquery-1.8.1.js"></script>
// <!-- I use many resour
浏览 1提问于2015-12-16得票数 9
回答已采纳
1回答
我遇到了关于如何使用ES6导入在Node.js中使用Babel的教程，但是CommonJS导入不起作用。我想在相同的文件中使用ES6导入和CommonJS imports ， in Node.js (Express.js)。
main.js
const jsdom = require("jsdom");
import {GotRequestFunction} from 'got';
这个是可能的吗？
浏览 2提问于2020-09-08得票数 4
回答已采纳
2回答
我希望用dcCharts在服务器上呈现node.js。我有一个关于d3.js和node.js的例子。但我的代码不管用。我是node.js的初学者，希望你有个主意？
使用node.js:的d3.js代码
在这里，我试着用dc.js和node.js：
var d3 = require('d3')
, dc = require('dc')
, jsdom = require('jsdom')
, fs = require('fs')
, htmlStub = '<html><head></head&
浏览 4提问于2014-01-31得票数 1
回答已采纳
我已经为我的项目创建了一个组件来帮助加载一些图像。这个组件对我来说工作得很好，但是当我尝试进行单元测试时，我遇到了一些使用html Image api的困难：
首先，我的组件使用new Image();语法加载一些图像，下面是组件
import React from 'react';
require('./progressive-image.scss');
export default class ProgressiveImage extends React.Component {
constructor(props) {
super(props
浏览 14提问于2017-02-11得票数 0
回答已采纳
2回答
我是nodejs的新手。我想使用jsdom来解析一些可能包含脚本代码的网页。但是我得到一个错误，说函数或变量没有定义。有人能给出一些关于这方面的指导吗？
我的代码
var jsdom = require('jsdom');
jsdom.env({
html: 'http://10.200.0.10:8080/test/a.html',
scripts: [
'http://code.jquery.com/jquery-1.5.min.js'
],
done: function(errors, window) {
浏览 1提问于2012-04-17得票数 5
回答已采纳
1回答
我在用摩卡和酶测试。第一次在React应用程序中编写测试。项目很大，所以我不能做这个兄弟会的开始。请告诉我，我是否需要在webpack.config文件中添加一些内容，以及如何处理错误(下面)“无法读取未定义的属性‘应用’”或“无法读取未定义的‘类型’”
Setup.js代码：
require('babel-register')();
var jsdom = require('jsdom').jsdom;
var exposedProperties = ['window', 'navigator', '
浏览 5提问于2017-02-19得票数 0
回答已采纳
我正在用Node.js编写一个基于canvas的多用户绘图应用程序，并希望在当前绘图中维护一个内部canvas元素。可以在Node.js中创建画布元素并与之交互吗？
我最近一次尝试的是jsdom模块，可以在这里找到：
var jsdom = require('jsdom');
var window = jsdom.jsdom().createWindow();
var canvas = window.document.createElement('canvas');
// The following line works
canvas.setAttribute(
浏览 1提问于2010-10-22得票数 4
我有PHP脚本，它充当DNode客户端。然后，我有一个Node.js节点服务器，它评估从PHP接收到的代码，并将DOM作为HTML返回。然而，Node.js对我表现得很奇怪(作为一个Node.js新手)。即使返回的字符串不是空的，它也不会返回任何内容。我的代码如下：
使用的PHP代码
<?php
require(__DIR__.'/../../vendor/autoload.php');
$loop = new React\EventLoop\StreamSelectLoop();
$dnode = new DNode\DNode($loop);
$dno
浏览 7提问于2014-09-30得票数 2
回答已采纳
2回答
Node.JS中的同步"GET“
、、、、
我试图在HTML块中循环遍历图像，并获取每个图像的本机宽度。我有完美的DOM构建，我正在使用NPM上的图像大小模块来检索图像宽度。
问题是，获取图像并获取它们的宽度需要时间，所以在我拿回宽度之前，代码将继续处理。因此，我无法调整HTML块中的宽度，因为函数在获得第一个图像之前运行并完成。
无论如何，在此GET请求完成之前，停止代码处理？我不希望For-循环继续到图像完成。
var elem_tags = doc.getElementsByTagName("img");
var elem_tags_length = elem_tags.length;
for (va
浏览 1提问于2016-04-28得票数 1
1回答
我是node.js新手，正在尝试使用在服务器端呈现模板，并使用express作为路由器。
然而，node.js的例子并没有展示为内容提供服务，我不清楚这是如何与express一起工作的：
var fs = require('fs'),
jsdom = require('jsdom');
jsdom.env(
'./test.html',
['./jquery.js', './weld.js'],
function(errors, window) {
var data = [{ name: &
浏览 2提问于2011-09-28得票数 9
回答已采纳
2回答
使用以下命令：
./node_modules/babel-core/register.js ./node_modules/jsdom-global/register.js **/*_spec.jsx
我正在运行以下测试文件：
"use strict";
import React from 'react';
import {expect} from 'chai';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
浏览 32提问于2018-02-16得票数 2
我正在尝试操作一个远程HTML，并返回被操作过的HTML。我决定使用JSDOM，但是想不出如何找回被操纵的HTML。有什么想法吗？
jsdom.env({
url: "http://www.cnn.com",
scripts: ["http://code.jquery.com/jquery.js"],
done: function (err, window) {
var $ = window.$;
console.log("HN Links");
浏览 0提问于2015-08-05得票数 21
回答已采纳
1回答
<div class="">
<figure class="">
<a href =""> <img src= ""></img> </a>
<figurecaption> Advertisemnt</figurecaption>
<figure>
</div>
考虑到上面的html想要删除根节点，如果图包含‘广告’文本使用JSDOM .How来做？
浏览 0提问于2020-02-03得票数 1
我试图使用node.js获取HTML元素的文本(而不是值)。请注意，不允许更改选项的值。
index.html
<select id=agee class="" name="age" onchange="myNewFunction();">
<option value="0">Select</option>
<option id=17 value="no">17 or less</option>
<option id=18 v
浏览 4提问于2022-04-20得票数 0
我正在尝试根据示例将本地jquery.js加载到node.js NPM 中：
var jsdom = require("jsdom");
var fs = require("fs");
var jquery = fs.readFileSync("c:/test/js/jquery.js", "utf-8"); // here it reads the jquery file from local disk
jsdom.env(
"http://somewebsite.com",
[jquery],
f
浏览 5提问于2016-08-09得票数 0
我想测试一下，当模拟按钮单击时，是否调用了从mapDispatchToProps传递的函数。
如何测试从mapDispatchToProps传入的函数是否被调用？
我试图通过props传递一个模拟的函数，但它不起作用。任何帮助都将不胜感激。
下面是我的伪类代码和测试示例。
我的组件
// All required imports
class App extends React.Component<Props> {
render() {
const { onClick } = this.props;
return (
<>
浏览 10提问于2018-08-29得票数 8
我有一个高阶组件，它使用renderComponent和branch来显示数据仍在加载时的加载屏幕(数据来自react-apollo查询)：
import { branch, renderComponent } from 'recompose';
const waitForLoad = branch(
({ data: { loading } }) => loading,
renderComponent(() => <div>LOADING...</div>),
);
这很好，但当我尝试用玩笑和酶做测试时，这会给我带来麻烦。我的测试
浏览 1提问于2018-04-25得票数 0
回答已采纳
我试图在Node.js上用jQuery构建一个小应用程序，它将在提供的位置请求内容。如果URL指向一个不是HTML的资源，它将输出返回的内容类型。否则，它将读取HTML数据并输出页面标题和描述，然后是页面上的可单击链接列表。这是我的密码：
var request = require('request'),
jsdom = require('jsdom'),
fs = require('fs'),
colors
浏览 4提问于2013-04-12得票数 0
将canvas@1.2.3 & jsdom@3.1.2与node v0.12.2一起使用时，我在尝试使用canvas toDataURL()函数时遇到错误。
canvasTest.js：
$(function(){
var canvas = $('<canvas></canvas>').attr({'id':'canvasTest', 'width':'500', 'height':'500'});
var ctx=canvas[0].get
浏览 1提问于2015-06-29得票数 9
我正在为node.js使用jsdom包，但我遇到了一个问题。我在我的计算机上手动编辑/node_modules/jsdom/lib/jsdom/level2/languages中的源代码来修复它，并且它工作了。但是，现在我想将我的程序发布到另一台服务器上。
处理这种修改后的依赖关系的最佳方法是什么？通常，我应该如何处理从npm安装中修改的依赖关系？
浏览 6提问于2011-07-10得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
