下面是代码为什么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文件的区别。为什么是这种变化?