下面是代码为什么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)
<!-- This is a public/html/index.html -->
<!DOCTYPE html>
<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 Manager</title>
</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 text</span><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>
<!-- src="js/directives/add-row.js" -->
而结果形成线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 Manager</title>
</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 text</span><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
元素从<html>
孩子移居到了<head>
儿童。这是自动发生的。此外,一些新的行似乎被添加到新创建的dom文件。请看两个html文件的区别。为什么是这种变化?
每规范,允许作为一个'html'元素的直接孩子的唯一标签是'head'和'body'。 – Amy
''里面html' script'是无效的HTML。 – Claies
这是无效的HTML有脚本漂浮作为''直接孩子。它可能会做一些简单的验证检查,例如为指令属性添加空值。 – Phix