2014-02-17 3 views
0

Я думаю, что «document.documentElement.cildNodes» это все ChildNodes в теге, как и раньше, но сегодня я делаю код excrise, я нахожу особый случай:javascript почему «document.documentElement.childNodes» выводит другой результат?

<!DOCTYPE html> 
<html> 
<head> 
<title>javascript</title> 
<script> 
    var o = document.createElement('script'); 
    o.text = 'alert("111")'; 
    var ohtml = document.documentElement; 
    alert(ohtml.nodeName); //output HTML 
     alert(ohtml.childNodes.length); //nodes length is 1 
    alert(ohtml.childNodes.length); //just head 
    ohtml.childNodes[0].appendChild(o); 
    function shownode() { 
     var ohtml = document.documentElement; 
     alert(ohtml.nodeName); 
     alert(ohtml.childNodes.length); //nodes length is 3 
     alert(ohtml.childNodes[0].nodeName); //head 
     alert(ohtml.childNodes[1].nodeName); //#text 
       alert(ohtml.childNodes[2].nodeName); //body 
    } 
</script> 
</head> 
<body><div>test</div><input id="Button1" type="button" value="show nodes" onclick="shownode();" /> 
</body> 
</html> 

почему я «document.documentElement.childNodes преобразования приложений» в теге и функции в теге получится другой результат? Я надеюсь, что кто-то может дать мне больше exseample об этом. Большое вам спасибо!

ответ

3

Дело в том, что вы делаете это в теге сценария главы, поэтому, когда он выполняется, все DOM еще не загружается на страницу. И при вызове функции, например, в консоль, DOM загружен полностью, чтобы убедиться в том, что вы можете переместить весь код в window.onload события, как это:

window.addEventListener("load", function() { 
    var o = document.createElement('script'); 
    o.text = 'alert("111")'; 
    var ohtml = document.documentElement; 
    alert(ohtml.nodeName); //output HTML 
    alert(ohtml.childNodes.length); //nodes length is not 1 
    alert(ohtml.childNodes.length); // not just head 
    ohtml.childNodes[0].appendChild(o); 
}); 

и если вы не «т хотите использовать window.onload событие, просто положить его внутри вашего тела тега:

<body> 
<!--your stuff--> 
<script> 
    alert(ohtml.nodeName); //output HTML 
    alert(ohtml.childNodes.length); //nodes length is not 1 
    alert(ohtml.childNodes.length); // not just head 
</script> 
</body> 
Смежные вопросы