使用id檢索嵌套在另一個元素中的元素

Question

我有以下代碼，它將HTML標記簡單地解析爲DOM對象。

var html_str = '<div id="body-wrapper">\ 
     <div id="container-1">\ 
      <p>This is the first container - Line 1</p>\ 
      <p>This is the first container - Line 2</p>\ 
      <p><img src="assets/img/pull_1.jpg"></p>\ 
     </div>\ 
     <div id="container-2">\ 
      <p>This is the second container - Line 1</p>\ 
      <p>This is the second container - Line 2</p>\ 
      <p>This is the second container - Line 3</p>\ 
      <p><img src="assets/img/pull_2.jpg"></p>\ 
     </div>\ 
     <div id="container-3">\ 
      <p>Test</p>\ 
      <p><img src="assets/img/pull_3.jpg"></p>\ 
     </div>\ 
    </div>'; 

var elem_obj = document.createElement("div"); 
elem_obj.innerHTML = html_str; 

如何從elem_obj內獲得與id == container-1元素？只有香草JavaScript和elem_obj.querySelector('#container-1')以外的東西，因爲我需要支持低於版本8的IE。

謝謝。

Answer 1

正如我在評論中所說的，對激烈爭論不完整的數據表示歉意。雖然這是真的舊的IE可以在DocumentFragment中使用getElementById，但對於較新的瀏覽器通常不是這樣，所以需要採用混合策略以實現最佳兼容性。

var html = '<div id="body-wrapper">\ 
 
    <div id="container-1">\ 
 
    <p>This is the first container - Line 1</p>\ 
 
    <p>This is the first container - Line 2</p>\ 
 
    <p><img src="#"></p>\ 
 
    </div>\ 
 
    <div id="container-2">\ 
 
    <p>This is the second container - Line 1</p>\ 
 
    <p>This is the second container - Line 2</p>\ 
 
    <p>This is the second container - Line 3</p>\ 
 
    <p><img src="#"></p>\ 
 
    </div>\ 
 
    <div id="container-3">\ 
 
    <p>Test</p>\ 
 
    <p><img src="#"></p>\ 
 
    </div>\ 
 
</div>'; 
 

 

 
// from http://stackoverflow.com/a/1643512/240443 
 
function getElementByIdFromNode(node, id) { 
 
    for (var i = 0; i < node.childNodes.length; i++) { 
 
    var child = node.childNodes[i]; 
 
    if (child.nodeType !== 1) // ELEMENT_NODE 
 
     continue; 
 
    if (child.id === id) 
 
     return child; 
 
    child = getElementByIdFromNode(child, id); 
 
    if (child !== null) 
 
     return child; 
 
    } 
 
    return null; 
 
} 
 
// based on http://stackoverflow.com/a/1643383/240443 
 
function getElementByIdFromString(html, id) { 
 
    var div = document.createElement("div"); 
 
    div.innerHTML = html; 
 
    // New browsers 
 
    if (div.querySelector) { 
 
    return div.querySelector("#" + id); 
 
    } 
 
    // Old IE 
 
    var frag = document.createDocumentFragment(); 
 
    if (frag.getElementById) { 
 
    frag.appendChild(div); 
 
    return frag.getElementById(id); 
 
    } 
 
    // Anything else just in case 
 
    return getElementByIdFromNode(div, id); 
 
} 
 
var container3 = getElementByIdFromString(html, "container-3"); 
 
console.log(container3);

Answer 2

建議的解決方案（替代DocumentFragment）：您可以使用循環搜索所需的元素。

JSFiddle（查看控制檯輸出）。

環路看起來像這樣：

var elem_obj_containers = elem_obj.children[0].children; 
    // All <div>s with those 「container-」 IDs 

var container1_element=null; // The result or null 

for(var i=0;i<=elem_obj_containers.length;i++){ 
    if(elem_obj_containers[i].id=='container-1'){ // Checking for ID 
     container1_element=elem_obj_containers[i]; // Assigning result 
     console.log(elem_obj_containers[i]); // Verify result 
     break; // Show’s over! 
    } 
} 

因此，如果ID被找到時，元件被分配給container1_element，否則變量保持null（像真正document.getElementById）。

從MDN’s page for children開始，它應該一直回到IE6。 IE 6,7和8也僅包含children中的HTML註釋節點。這不應該是一個大問題。