通过JavaScript执行顺序操作DOM

Question

我有以下代码，结果附在最后。我知道JQuery.ready和JQuery.Window加载事件是在创建DOM之后运行的，因此它可以操作DOM而不是第一个改变John背景的函数。

我的问题是：

1. John的背景未变为黄色是因为JavaScript本质上是向后引用，并且在脚本运行时无法找到id为name1的元素？

2. 如果我必须运行第一个函数来更改John的背景，那么在DIV标签之后是否应该使用此功能？

  

块引用

<script>
    (function () {
        $('#name1').css('background-color', 'yellow');
    })();

    $(function () {
        $('#name2').css('background-color', 'red');
    });

    $(window).load((function () {
        $('#name3').css('background-color', 'blue');
    }));
</script>

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>
    (function () {
        $('#name4').css('background-color', 'yellow');
    })();
</script>

  

块引用

Answer 1

当通过Javascript（或Javascript库或框架）操作DOM时，必须将之前想要操作的DOM元素带入它们。

如果你不这样做，那么......根本没有任何东西可以操纵。

Answer 2

浏览器从上到下读取HTML。所以：

<script>

这会立即执行:(但由于还没有，所以不会有任何变化）。为了进一步说明，这些被称为立即执行函数（IEF）==＆gt; (function(){ ... })();但在这种情况下，拥有它是没有意义的，因为无论如何都会立即执行代码。

    (function () {
        $('#name1').css('background-color', 'yellow');
    })();

这实际上是jQuery中$(document).ready(...);的一个捷径。它被认为不是一个好的做法，因为它不是那么可读。

    $(function () {
        $('#name2').css('background-color', 'red');
    });

这个窗口加载（不完全相同）。

    $(window).load((function () {
        $('#name3').css('background-color', 'blue');
    }));
</script>

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>

这也是立即执行的（IEF）：在这种情况下它会起作用，但这不是最好的做法。

    (function () {
        $('#name4').css('background-color', 'yellow');
    })();
</script>

如果您想了解document.ready和window.load之间的更多差异，请查看this stackoverflow question

JavaScript是一种事件驱动语言，其优点是您可以根据需要为事件添加尽可能多的侦听器，因此向加载的DOM内容添加事件侦听器几乎总是最好的方法。最好始终在最后加载脚本，这样您就可以让用户先获取内容和样式，然后启动功能。

我将如何编写代码：

<div id="name1">John</div>
<div id="name2">Mary</div>
<div id="name3">Jacob</div>
<div id="name4">James</div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        // DOM fully loaded and parsed
        $('#name1').css('background-color', 'yellow');
        $('#name2').css('background-color', 'red');
        $('#name3').css('background-color', 'blue');
        $('#name4').css('background-color', 'yellow');
    });
</script>

虽然我不会为此使用jQuery：P。我甚至不会使用JavaScript，只是好旧的CSS;）