下面是代码为什么JSDOM更改html结构？
var fs = require('fs')
var htmlSource = fs.readFileSync("public/html/index.html", "utf8")
var jsdom = require('jsdom');
const {JSDOM} = jsdom;
const dom = new JSDOM(htmlSource);
htmlSource = dom.window.document.querySelector("html").outerHTML
console.log(htmlSource)
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">script>
<script type="text/javascript" src="js/main.js">script>
<head>
<title>Home Electricity Managertitle>
head>
<body ng-app="myApp">
<h1 id="the-header">Wellcome to home electricity manager!h1>
<div add-row ng-controller="myController" style="text-align: center; display: inline-block;">
<span style="white-space:pre;">Button textspan><br/>
<button id="first-button" ng-style="myStyle" ng-click="toggleRelay()" id="switch-cirquit-1">{{ButtonStatus}}button>
div>
<div add-row ng-controller="myController" style="text-align: center; display: inline-block;">
<span id="second-button" style="white-space:pre;">{{buttonOneText}}span><br/>
<button ng-style="myStyle" ng-click="toggleRelay()" id="switch-cirquit-1">{{ButtonStatus}}button>
div>
<div ng-controller="postController" style="text-align: center; display: inline-block;">
<button ng-click="post()">{{buttonName}}button>
div>
body>
html>
而结果形成线console.log(htmlSource)是：
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">script>
<script type="text/javascript" src="js/main.js">script>
<title>Home Electricity Managertitle>
head>
<body ng-app="myApp">
<h1 id="the-header">Wellcome to home electricity manager!h1>
<div add-row="" ng-controller="myController" style="text-align: center; display: inline-block;">
<span style="white-space:pre;">Button textspan><br>
<button id="first-button" ng-style="myStyle" ng-click="toggleRelay()">{{ButtonStatus}}button>
div>
<div add-row="" ng-controller="myController" style="text-align: center; display: inline-block;">
<span id="second-button" style="white-space:pre;">{{buttonOneText}}span><br>
<button ng-style="myStyle" ng-click="toggleRelay()" id="switch-cirquit-1">{{ButtonStatus}}button>
div>
<div ng-controller="postController" style="text-align: center; display: inline-block;">
<button ng-click="post()">{{buttonName}}button>
div>
body>html>
请注意，script元素从孩子移居到了儿童。这是自动发生的。此外，一些新的行似乎被添加到新创建的dom文件。请看两个html文件的区别。为什么是这种变化？
1 回答
一般而言，转动一个HTML串行化为一个DOM树，和序列化所得到的树将不能保证最终序列将是相同的原来的一个。无论您的HTML是否符合规范，都是如此。
但是，在您的具体情况下，您的HTML不符合标准指定的结构。当一致性解析器遇到不合格的HTML时，它必须遵循一系列步骤来解决问题。这实际上是尝试了解运行中不符合要求的HTML。在你的情况下的流程是这样的：
initial解析模式，遇到DOCTYPE当before html模式。before head模式。head元素，并在遇到script时移至in head。上面列举的最后一步是在浏览器中修改文档结构，使其符合。如果您在规范中检查rules，您会发现在before head模式中遇到script元素时，会匹配“其他”规则，从而导致将head元素附加到DOM树并移至in head模式。 script元素然后在in head模式中重新处理，并且仅添加到新创建的head元素中。
当分析器跑进标签你把你的HTML文件中，这个标签只是忽略，因为解析器已经在in head模式，由于较早script元素。
您得到的间距是应用规范中的规则。要指出的几个突出的案例：
before head模式的任何空间将被忽略。head元素来修复您的HTML时，它没有插入换行符。（这只是不是规则的一部分。）</code>之前看到的空行的序列化是在原始的HTML由这似乎与之前的新行后<code class="prettyprint-override"><head></code>。解析器忽略了你的<code class="prettyprint-override"><head></code>标签（如上所述），但它一直这是周围的间距。</li>
</ol> </div>
<div class="aw-answer-show aw-alpha-hidden" style="display: none">
<span style="cursor: pointer;"><i class="icon-chevrons-down"></i> 阅读全文</span>
</div>
<div class="aw-answer-hide aw-alpha-hidden mt-3" style="display: none;background:none;position: inherit;height: auto">
<span style="position: unset;float: left;cursor: pointer"><i class="icon-chevrons-up"></i> 收起全文</span>
</div>
</div>
<!--回答操作-->
<div class="answer-btn-actions mt-3">
<label class="mr-1">
<a href="javascript:;" class="aw-ajax-agree " onclick="AWS.User.agree(this,'answer','344');">
<i class="icon-thumb_up"></i> 赞同 <span> 0</span>
</a>
</label>
<label class="mr-3 ">
<a href="javascript:;" class="aw-ajax-against " onclick="AWS.User.against(this,'answer','344');">
<i class="icon-thumb_down"></i>
</a>
</label>
<label class="mr-3">
<a href="javascript:;" class="answerCommentBtn" data-url="/comment/answer.html?id=344" data-id="344">
<i class="icon-chat"></i> <span class="answer-comment-count344">0</span>评论 </a>
</label>
<div class="dropdown d-inline-block mr-3">
<a href="javascript:;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-share-alt font-9 d-sm-inline-block"></i> 分享 </a>
<div class="dropdown-menu p-0 border-0 font-size-sm">
<div class="text-center d-block py-2" style="min-width: 100px">
<a href="javascript:;" class="dropdown-item aw-clipboard" data-clipboard-text="https://www.junxiaochen.com/question/496-344.html"><i class="icon-link"></i>
复制链接</a>
<a href="javascript:;" onclick="AWS.User.share('为什么JSDOM更改html结构？','https://www.junxiaochen.com/question/496-344.html','','weibo')" class="dropdown-item "><i class="fab fa-weibo text-warning"></i>
新浪微博</a>
<a href="javascript:;" onclick="AWS.User.share('为什么JSDOM更改html结构？','https://www.junxiaochen.com/question/496-344.html','','qzone')" class="dropdown-item "><i class="fab fa-qq text-primary"></i>
腾讯空间</a>
<div class="aw-qrcode-container" data-share="https://www.junxiaochen.com/question/496-344.html">
<a href="javascript:;" class="dropdown-item "><i class="fab fa-weixin text-success"></i>
微信扫一扫</a>
<div class="aw-qrcode text-center py-2"></div>
</div>
</div>
</div>
</div>
<!--问题回答操作栏钩子-->
<div class="aw-share clearfix d-inline-block">
<div class="social-share" data-disabled="google,twitter,facebook,linkedin,douban"></div>
</div>
</div>
<!--评论框动态显示-->
<div class="answerCommentBox mt-2 border" id="answerCommentBox-344" style="display: none;margin-left: 45px">
<div class="answerCommentHeader clearfix px-3 pt-3">
<h6 class="font-10 float-left mb-1"><span class="answer-comment-count344">0</span> 评论</h6>
</div>
<div class="answerCommentList px-3"></div>
<div class="pageElement"></div>
<div class="commentForm clearfix rounded aw-replay-box"></div>
</div>
</div>
</div>
</div>
</div>
<div class="aw-right col-md-3 px-xs-0">
<div class="r-box mb-1">
<div class="r-title">
<h4>关于作者</h4>
</div>
<div class="block-content">
<dl class="overflow-hidden mb-0 pb-2 border-bottom">
<dt class="float-left">
<a href="/people/shamu4Vqy1658075852/" data-pjax="pageMain" class="aw-username" data-id="26">
<img src="/static/common/image/default-avatar.svg" class="rounded" width="45" height="45">
</a>
</dt>
<dd class="float-right" style="width:calc(100% - 55px)">
<a href="/people/shamu4Vqy1658075852/" class="d-block aw-one-line aw-username" data-id="26" target="_blank">
<strong>王赛
</strong> <span class="badge badge-success">未验证用户</span>
</a>
<p class="mb-0 font-8 text-muted aw-one-line">这家伙很懒，还没有设置简介</p>
</dd>
</dl>
<div class="d-flex text-center pt-3 pb-3 text-muted">
<a href="/people/shamu4Vqy1658075852/answer" target="_blank" class="flex-fill mb-0">
<dl class="mb-0">
<dt>0</dt>
<dd>回答</dd>
</dl>
</a>
<a href="/people/shamu4Vqy1658075852/article" target="_blank" class="flex-fill mb-0">
<dl class="mb-0">
<dt>0</dt>
<dd>文章</dd>
</dl>
</a>
<a href="/people/shamu4Vqy1658075852/question" target="_blank" class="flex-fill mb-0">
<dl class="mb-0">
<dt>1</dt>
<dd>问题</dd>
</dl>
</a>
</div>
</div>
</div>
<div class="r-box mb-2">
<div class="r-title">
<h4>问题动态</h4>
</div>
<div class="block-content2 pb-2">
<div class="text-center text-muted">
<dl class="clearfix mb-1">
<dt class="float-left">发布时间</dt>
<dd class="float-right">2020-09-15 15:51</dd>
</dl>
<dl class="clearfix mb-1">
<dt class="float-left">更新时间</dt>
<dd class="float-right">2022-09-15 15:52</dd>
</dl>
<dl class="clearfix mb-1">
<dt class="float-left">关注人数</dt>
<dd class="float-right">2 人关注</dd>
</dl>
</div>
<div>
<ul id="questionFocusUsers">
<li class="px-1 d-inline-block">
<a href="/people/shamu4Vqy1658075852/" class="aw-username" data-id="26" title="王赛
" >
<img src="https://www.junxiaochen.com/static/common/image/default-avatar.svg" width="26" height="26" style="border-radius: 50%" alt="王赛
">
</a>
</li>
<li class="px-1 d-inline-block">
<a href="/people/shamuM87u1658075997/" class="aw-username" data-id="367" title="solo
" >
<img src="https://www.junxiaochen.com/static/common/image/default-avatar.svg" width="26" height="26" style="border-radius: 50%" alt="solo
">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="r-box mb-2">
<div class="r-title">
<h4>相关问题</h4>
</div>
<div class="aboutanswer">
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/396.html">经济型三位显示模糊PID温控器，控制输出类型有哪些，各个输出类型可以自行更改吗</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1105 浏览</label>
<label class="mr-2 mb-0">1 关注</label>
<label class="mr-2 mb-0">0 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/424.html">为什么照片发不出去？</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1918 浏览</label>
<label class="mr-2 mb-0">3 关注</label>
<label class="mr-2 mb-0">2 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/90.html">为什么弹窗有取消关闭按钮</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1168 浏览</label>
<label class="mr-2 mb-0">1 关注</label>
<label class="mr-2 mb-0">0 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/2.html">为什么保存的OBJ模型有圆滑，面塌陷？</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1254 浏览</label>
<label class="mr-2 mb-0">1 关注</label>
<label class="mr-2 mb-0">0 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/710.html">为什么登录微连接失败和扫码出现“无法绑定EN服务器”？</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1757 浏览</label>
<label class="mr-2 mb-0">3 关注</label>
<label class="mr-2 mb-0">2 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/102.html">窗口为什么是取消还是叉叉？</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1746 浏览</label>
<label class="mr-2 mb-0">2 关注</label>
<label class="mr-2 mb-0">1 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/297.html">（k=(x-y)!=0为什么会是while死循环</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1064 浏览</label>
<label class="mr-2 mb-0">1 关注</label>
<label class="mr-2 mb-0">0 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/925.html">为什么我的结果输出一直是0？？</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1153 浏览</label>
<label class="mr-2 mb-0">1 关注</label>
<label class="mr-2 mb-0">0 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/747.html">点击登录用户就跳出资源不能用，不知道为什么</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1580 浏览</label>
<label class="mr-2 mb-0">2 关注</label>
<label class="mr-2 mb-0">1 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
<dl class="mb-0 py-2">
<dt class="d-block aw-one-line font-weight-normal font-9">
<a href="/question/648.html">配置很高开播打联盟很卡是为什么啊+有没有大佬知道我这个配置开播不开播应该多少帧</a>
</dt>
<dd class="mt-2 text-color-info mb-0">
<label class="mr-2 mb-0">1581 浏览</label>
<label class="mr-2 mb-0">2 关注</label>
<label class="mr-2 mb-0">1 回答</label>
<label class="mb-0">0 评论</label>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--全局页面内容底部钩子-->
<div class="foot">
<div class="container justify-content-center">
<div class="py-3 footauto clearfix">
<div class="float-left ">个人工作笔记 Powered BY <a class="font-w600" href="https://wenda.wecenter.com" target="_blank">WeCenter V4.1.0</a> © 2024 <a target="_blank" class="ml-3" rel="noopener noreferrer" href="https://beian.miit.gov.cn/">粤ICP备2020123311号</a></div>
<div class="float-right">
<ul>
<li class="d-inline-block mx-1"><a href="/page/index.html?url_name=about" title="关于我们" target="_blank">关于我们</a></li>
<li class="d-inline-block mx-1"><a href="/page/index.html?url_name=rule" title="社区规范" target="_blank">社区规范</a></li>
</ul>
</div>
</div>
</div>
</div>
<a class="aw-back-top hidden-xs" href="javascript:;" onclick="$.scrollTo(1, 600, {queue:true});"><i class="icon-arrow-up-circle"></i></a>
<script>
$(function () {
let topNavSwiper = new Swiper('.swiper-nav-container', {
speed: 600,
grabCursor: true,
slidesPerView: "auto",
initialSlide: 0,
slidesPerGroup: 1
})
})
</script>
<script>
//导航悬浮
var topMain = $(".navbox").height();
$(window).scroll(function(){
if ($(window).scrollTop()>topMain + 200){
$('.navbox').addClass('suspension');
}
else
{
$('.navbox').removeClass('suspension');
}
//更换logo
if($('.navbox').hasClass('suspension')){
$(".logoimg").attr('src',"/storage/common/20221127/5895726a68d48b616c13a59150d0b70d.png");
}else(
$(".logoimg").attr('src',"https://www.junxiaochen.com/templates/jxc_site/static/images/logo-write.png")
)
});
</script>
<div id="aw-ajax-box"></div>
<!--自动加载js文件-->
<script src="/templates/default/static/js/question/detail.js?v=4.1.0"></script>
<div id="browserCheck" style="display: none;">
<div class="p-3">
<div class="mb-2">
<p>你的浏览器版本过低，可能导致网站部分内容不能正常使用!</p>
<p>为了能正常使用网站功能，请使用以下浏览器</p>
</div>
<ul class="d-flex text-center">
<li class="flex-fill">
<img src="https://www.junxiaochen.com/static/common/image/icon_Chrome 2x.jpg">
<span class="d-block">Chrome</span>
</li>
<li class="flex-fill">
<img src="https://www.junxiaochen.com/static/common/image/icon_Firefox 2x.jpg">
<span class="d-block">Firefox</span>
</li>
<li class="flex-fill">
<img src="https://www.junxiaochen.com/static/common/image/icon_Safari 2x.jpg">
<span class="d-block">Safari</span>
</li>
<li class="flex-fill">
<img src="https://www.junxiaochen.com/static/common/image/icon_IE 10 2x.jpg">
<span class="d-block">IE 10+</span>
</li>
</ul>
</div>
</div>
<script>
var mb = AWS.common.browser();
if ("IE10" !== mb && "FF" !== mb && "Chrome" !== mb && "Safari" !== mb) {
var width =$(window).width() > 600 ? '600px' : '85%';
layer.open({
title: '',
type: 1,
scrollbar: false,
shade: 0.7,
area: [width],
content: $('#browserCheck').html(),
})
}
</script>
<!--全局自定义底部html-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6d6856d63c9b10773fce7b16ac9c2996";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
$(document).on('click', '.showAllFocusUsers', function(event) {
$.ajax({
type: 'GET',
url: "/ajax/get_question_focus_users.html?question_id=496",
dataType:'json',
success: function (ret) {
var html='';
$.each(ret.data, function(i,val){
html +='<li class="px-1 d-inline-block"> <a href="'+val.url+'" class="aw-username" data-id="'+val.uid+'" title="'+val.nick_name+'" > <img src="'+val.avatar+'" width="26" height="26" style="border-radius: 50%" alt="'+val.nick_name+'"> </a> </li>';
});
$('#questionFocusUsers').html(html);
},
error: function (xhr) {
let ret = {code: xhr.status, msg: xhr.statusText, data: null};
AWS.events.onAjaxError(ret, error);
}
});
})
$(document).on('click', '#load_force_fold_answers a', function(event) {
if($('#force_fold_answers_list').hasClass('d-none'))
{
$.ajax({
type: 'GET',
url: "/ajax.Question/force_fold_answers.html?question_id=496",
dataType:'json',
success: function (ret) {
$('#force_fold_answers_list').html(ret.data.html).removeClass('d-none');
},
error: function (xhr) {
let ret = {code: xhr.status, msg: xhr.statusText, data: null};
AWS.events.onAjaxError(ret, error);
}
});
}else{
$('#force_fold_answers_list').html('').addClass('d-none');
}
})
$(document).ready(function ()
{
var openEnable="Y";
var answerId = parseInt("0");
var showAll = $('#show-all');
if(openEnable==='Y')
{
$('.aw-question-show').click();
$('.aw-answer-show').click();
if(showAll.height() >= 120)
{
$('.aw-question-hide').show();
}
}else{
if(showAll.height() >= 120)
{
showAll.show().css('height','120px');
$('.aw-question-show').show();
}
}
$(document).on('click', '.aw-question-show', function (e) {
$('.aw-question-show').hide();
showAll.show().css('height','auto');
$('.aw-question-hide').show();
});
$(document).on('click', '.aw-question-hide', function (e) {
$('.aw-question-hide').hide();
showAll.show().css('height','120px');
$('.aw-question-show').show();
});
$('.aw-answer-item .aw-answer-content').each(function(){
if($(this).height() >= 200)
{
if(openEnable==='Y')
{
$(this).css('height','auto');
$(this).parents('.aw-answer-item').find('.aw-answer-hide').show();
}else{
if(answerId)
{
$(this).css('height','auto');
$(this).parents('.aw-answer-item').find('.aw-answer-hide').show();
}else{
$(this).css('height','200px');
$(this).parents('.aw-answer-item').find('.aw-answer-show').show();
}
}
}
});
$(document).on('click', '.aw-answer-show', function (e) {
$(this).hide();
$(this).parents('.aw-answer-item').find('.aw-answer-content').show().css('height','auto');
$(this).parents('.aw-answer-item').find('.aw-answer-hide').show();
});
$(document).on('click', '.aw-answer-hide', function (e) {
$(this).hide();
$(this).parents('.aw-answer-item').find('.aw-answer-content').show().css('height','200px');
$(this).parents('.aw-answer-item').find('.aw-answer-show').show();
});
});
</script>
<form id="attach-download-form" action="/upload/download.html" method="post">
<input type="hidden" id="attach-name" name="name" value="">
<input type="hidden" id="attachType" name="type" value="0">
</form>
</body>
</html>