为何无法获取到正确的innerHTML（Nodejs环境是否影响）？采用Jquery和原生JS都不能解决问题。。。Nodejs相关探讨

为何无法获取到正确的innerHTML（Nodejs环境是否影响）？采用Jquery和原生JS都不能解决问题。。。Nodejs相关探讨

获取到innerHTML中，斜杠怎么都没有了？还莫名其妙多了个等号？

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
console.info($('#test').html());
})
</script>
<div id="test">
<http://baidu.com>
Haha
</div>

原生不行。。。

JQuery也不行：


4 回复

在Node.js环境中使用jQuery或原生JavaScript获取HTML元素的innerHTML时遇到问题，通常与服务器端渲染和客户端渲染之间的差异有关。Node.js是运行在服务器端的JavaScript环境，而jQuery和大多数DOM操作方法通常是为浏览器环境设计的。因此，在Node.js中直接使用这些库可能会导致不一致的行为。

示例代码分析

假设我们有以下HTML结构：

<div id="test">
    <http://baidu.com>
    Haha
</div>

使用jQuery获取innerHTML

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
    console.info($('#test').html());
});
</script>

在浏览器环境中，这段代码应该能够正确地输出：

<http://baidu.com>
Haha

但在Node.js环境中，由于缺乏DOM支持，直接运行上述代码将失败。你需要使用类似jsdom这样的库来模拟浏览器环境。

使用原生JavaScript获取innerHTML

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    console.log(document.getElementById('test').innerHTML);
});
</script>

同样地，这段代码在浏览器环境中能正常工作，但在Node.js中需要额外的配置。

解决方案

在Node.js环境中模拟浏览器环境

你可以使用jsdom库来创建一个虚拟的DOM环境：

npm install jsdom

然后，你可以编写如下代码：

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

const dom = new JSDOM(`
<!DOCTYPE html>
<html>
<body>
<div id="test">
    <http://baidu.com>
    Haha
</div>
</body>
</html>
`);

const { window } = dom;

function copyProps(src, target) {
    const props = Object.getOwnPropertyNames(src)
        .filter(prop => typeof target[prop] === 'undefined')
        .reduce((result, prop) => ({
            ...result,
            [prop]: Object.getOwnPropertyDescriptor(src, prop)
        }), {});

    Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.navigator = {
    userAgent: 'node.js'
};

copyProps(window, global);

// 现在可以使用原生JS或jQuery了
console.log(document.getElementById('test').innerHTML);

这样，你就可以在Node.js环境中正确地获取innerHTML了。


你这么写标签name， html5 DTD 同意了么？

楼主，你妈喊你回家好好看书

在Node.js环境中，innerHTML 属性通常用于浏览器环境中的DOM操作。而在Node.js服务器端环境中，由于没有DOM对象，直接使用innerHTML会遇到问题。但是根据你的描述，你似乎是在浏览器环境中遇到了问题。

从你提供的代码来看，问题出在HTML标签的解析上。在HTML中，<http://baidu.com> 并不是一个合法的标签，因此浏览器会尝试去解析它，并且可能会导致内容变形或被移除。

示例代码：

HTML:

<div id="test">
    <http://baidu.com>
    Haha
</div>

jQuery:

$(function() {
    console.info($('#test').html()); // 输出可能不是预期的结果
});

原生 JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    console.log(document.getElementById('test').innerHTML); // 输出可能不是预期的结果
});

解释：

  1. 非法标签：<http://baidu.com> 是一个非法的HTML标签，浏览器可能会自动修正或忽略它，导致结果不符合预期。
  2. 字符实体：HTML标签中的特殊字符可能需要转义处理，否则会被浏览器解析为其他内容。

解决方案：

  1. 修正HTML标签：确保HTML标签是合法的。

    <div id="test">
    <a href="http://baidu.com">百度</a>
    Haha
</div>

  2. 转义特殊字符：如果需要保留原始文本，可以使用转义方法。

    $(function() {
    var escapedHtml = $('#test').text(); // 使用 text() 方法获取纯文本
    console.info(escapedHtml);
});

  3. 使用CDN或本地库：确保jQuery库正确加载。

通过以上修改，应该可以解决你遇到的问题。

回到顶部