在Internet Explorer中無法獲取div元素的子元素-fox中的工程

我已經查看了幾個似乎相似的問題，但找不到答案。我正在嘗試學習如何在純JavaScript中進行「拖放」操作。我的測試代碼在Firefox和Chrome，但不是在IE 10在Internet Explorer中無法獲取div元素的子元素-fox中的工程

我拖着一個容器內的兩個div元素div，然後用一個按鈕，點擊我檢查每增加兩個孩子的id屬性的值。

的Html

<!DOCTYPE HTML> 
<html> 

<head> 
    <script src="check.js"></script> 
    <style type="text/css"> 
     #div1 { 
      width:350px; 
      height:120px; 
      padding:10px; 
      margin-bottom:15px; 
      border:1px solid #aaaaaa; 
     } 
     .box { 
      display:inline; 
      width:100px; 
      height:30px; 
      padding:10px; 
      border:1px solid #aaaaaa; 
     } 
    </style> 
    <script> 
     function allowDrop(ev) { 
      ev.preventDefault(); 
     } 

     function drag(ev) { 
      ev.dataTransfer.setData("Text", ev.target.id); 
     } 

     function drop(ev) { 
      ev.preventDefault(); 
      var data = ev.dataTransfer.getData("Text"); 
      ev.target.appendChild(document.getElementById(data)); 
     } 
    </script> 
</head> 

<body> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div class="box" id="foo" draggable="true" ondragstart="drag(event)">foo </div> 
<div class="box" id="bar" draggable="true" ondragstart="drag(event)">bar </div> 
<input type="button" name="check" id="check" value="Check"> 
</body> 
</html>

的Javascript

window.onload = function() { 

    var button = document.getElementById('check'); 
    button.addEventListener("click", handler, false); 

    function handler() { 
     var d = document.getElementById("div1"); 
     var children = d.childNodes; 
     //var children = d.children; tried both children and childNode : works in FF/Chrome not IE 
     var i; 
     document.write(children.length + "<br>"); 
     document.write(children[0] + "<br>"); 
     document.write(children[1] + "<br>"); 
     for (i = 0; i < children.length; i++) { 
      document.write(children[i].id); 
     } 
    } 
}

在Firefox和Chrome輸出是我所期待的：在IE

2 
[object HTMLDivElement] 
[object HTMLDivElement] 
foobar

輸出：子節點是不確定的：

2 
undefined 
undefined

我知道文本節點不能有孩子，但似乎我在這裏添加div元素，所以我不明白髮生了什麼。我查了一下.children和.childNode的方法，它們都應該從IE 9支持，而且我正在使用IE 10進行測試。這可能與appendChild方法有關嗎？

來源

2013-08-17 user2250892

如果您使用'console.log'而不是'document.write'，它會更好嗎？在檢查時修改文檔似乎是可疑的。 – Barmar

非常有趣，謝謝。我只是用IE瀏覽器試過console.log，我得到了正確的迴應。但最終我希望輸出'foobar'去到文檔而不是控制檯。爲什麼它在FF/Chrome中工作？ – user2250892

問題是與document.write它取代當前文檔，IE對它的反應比其他更糟。

如果要在頁面上顯示結果 - 請專用佔位符（例如另一個DIV）並將輸出添加到其innerHTML。

來源

2013-08-17 01:10:06

在Internet Explorer中無法獲取div元素的子元素-fox中的工程

回答

相關問題