Question

我正在尝试从一开始就学习JavaScript来理解它。

我在这里要做的是输出<body>标签中找到的每个元素的nodeTypes。我理解<body>的子元素之间存在隐形文本，原因不明，这就产生了输出

3 1 3 1

我将<script>标记放在<body>标记之外，但它仍然在for循环中计算，导致1的最后一位数3 1 3 1 1}}循环序列。为什么？为什么<script>标记被浏览器强制放在<body>标记内？

<html>
    <body id = "bodyTest"> 
        <p>Some Text</p>
    </body>

    <script type="text/javascript">
        var c = document.body.childNodes;

        var txt = "";
        for(var k = 0; k < c.length; k++) {
            txt += c[k].nodeType + " ";
            console.log(txt);
            console.log(c[k].nodeName);
        }
        alert(txt);
    </script>
</html>

这是我正在使用的代码。

<html>
    <body id = "bodyTest"> 
        <p>Some Text</p>
    </body>

    <script type="text/javascript">
        // Code above
    </script>
</html>

Answer 1

这不是有效的HTML。 <html>代码只能包含<head>和<body>代码，而不能包含<script>。

请参阅the specification：

允许的内容
一个头元素，后跟一个body元素

当您的浏览器遇到损坏的HTML时，它会尝试修复它。在这种情况下，这意味着将<script>标记视为<body>中的标记。

Answer 2

html规范对root html元素可以包含哪些元素有一些限制。脚本不是其中之一，所以你向我们展示的htmls确实是无效的。但是，浏览器会尽力处理大部分源代码。例如，你可以拥有一个没有html，head和body的html文件，浏览器仍会通过将输入包装在body和html标签中来显示页面。

关于不可见节点：它们是具有单个空格的文本节点。根据规范，任何空格序列都应被视为单个空格，元素之间的空格（空格，换行符）仍然算作文本。试试这个，看看会发生什么：

＆＃13;

<html>
  <body id="bodyTest">
    <p>Some Text</p><script type="text/javascript">
        var c = document.body.childNodes;

        var txt = "";
        for(var k = 0; k < c.length; k++) {
            txt += c[k].nodeType + " ";
            console.log(txt);
            console.log(c[k].nodeName);
        }
        alert(txt);
    </script>
  </body>
</html>

＆＃13;

Answer 3

您的浏览器通过将// ==UserScript== // @name _Cross browser notifications // @match http://YOUR_SERVER.COM/YOUR_PATH/* // @grant GM_notification // @grant window.focus // ==/UserScript== console.log ('Test script start.'); shim_GM_notification () var notificationDetails = { text: 'Test notification body.', title: 'Test notice title', timeout: 6000, onclick: function () { console.log ("Notice clicked."); window.focus (); } }; GM_notification (notificationDetails); /*--- Cross-browser Shim code follows: */ function shim_GM_notification () { if (typeof GM_notification === "function") { return; } window.GM_notification = function (ntcOptions) { checkPermission (); function checkPermission () { if (Notification.permission === "granted") { fireNotice (); } else if (Notification.permission === "denied") { alert ("User has denied notifications for this page/site!"); return; } else { Notification.requestPermission ( function (permission) { console.log ("New permission: ", permission); checkPermission (); } ); } } function fireNotice () { if ( ! ntcOptions.title) { console.log ("Title is required for notification"); return; } if (ntcOptions.text && ! ntcOptions.body) { ntcOptions.body = ntcOptions.text; } var ntfctn = new Notification (ntcOptions.title, ntcOptions); if (ntcOptions.onclick) { ntfctn.onclick = ntcOptions.onclick; } if (ntcOptions.timeout) { setTimeout ( function() { ntfctn.close (); }, ntcOptions.timeout); } } } }放在<script>元素<html>中有效的最接近元素中来纠正您格式不正确的HTML。

为什么我的浏览器在body标签内强制执行脚本标记？

3 个答案: