分享程序员开发的那些事...
更新时间：2023-10-30 15:10:16
您正在劳动的一个错误的假设下：没关系任何剧本元素是否在在头或体，它们就不管运行。移动他们，他们已经被添加到DOM后充其量毫无意义，在最坏的情况可能会导致不幸的副作用，如果脚本重新运行在移动时（但我不认为这是）。
至于为什么你看到你所看到的行为，这是因为的 的getElementsByTagName 返回生活的 节点列表 。当您移动的脚本，它就会从节点列表删除。因此，考虑你的了四个剧本，你会得到一个节点列表最初包含四个元素，让。长度是 4 和 [0] 是你的第一个脚本。当您移动的脚本出了 DIV 的节点列表是因为剧本是不再更新了 DIV ，所以它的长度是现在 3 和 [0] 指你的第二个脚本（一个装载jQuery的）。
您就可以避免这种行为打断你的循环有两种方式：
循环落后，从。长度 - 1 到 0 包容性，或
转动节点列表到一个数组，这样的元素是不能从你下搬出去。
The problem I'm trying to solve is an ad loading script, that loads the ad code with jsonp and inserts it into the dom.
Now sometimes the ad code will include javascript tags, and i figured it was just a matter of moving them to the head section and they would run. In theory that works fine but when i made a script to move script tags to the head i ran into some weird behavior.
So I wrote this code to test just the script moving part, eliminating the rest of the code as an error source.
I get the same results, if I have just two scripts in the div it moves one of them, if I have 3 scripts it moves 2 of them. In the code pasted below it moves script 1 and 3, skipping the remote javascript reference and the last script-tag.
Would be interesting to at least know why this happens, and if it can be solved.
Edit: To clarify one thing, if i put the remote jquery script first and one of the simple script tags second it will move the remote script tag to the head fine and skip the second script tag.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// get div id
function test() {
var td = document.getElementById('testId');
var scripts = td.getElementsByTagName("script");
console.log("No. of scripts to transfer to head: "+scripts.length);
for(i=0;i<scripts.length;i++) {
var curScript = scripts[i];
document.head.appendChild(curScript);
}
}
</script>
</head>
<body onload="test();">
<div id="testId">
<script type="text/javascript">var firstScript = 1;</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">var secondScript = 1;</script>
<script type="text/javascript">var thirdScript = 1;</script>
</div>
</body>
</html>
You're laboring under a false assumption: It doesn't matter whatsoever whether script elements are in the head or body, they get run regardless. Moving them after they've been appended to the DOM is at best pointless, and at worst may cause unfortunate side-effects if the script is re-run when moved (but I don't think it is).
As for why you're seeing the behavior you're seeing, it's because getElementsByTagName returns a live NodeList. When you move a script, it gets removed from the NodeList. So given your four scripts, you'll get back a NodeList initially containing four elements, so .length is 4 and [0] is your first script. When you move that script out of the div, the NodeList is updated because the script is no longer in the div, so its length is now 3 and [0] refers to your second script (the one loading jQuery).
You can avoid having this behavior interrupt your loop in two ways:
Loop backward, from .length - 1 to 0 inclusive, or
Turn the NodeList into an array, so the elements aren't moved out from under you.