使用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的元素？ 僅限於Vanilla JavaScript和elem_obj.querySelector('#container-1')以外的其他東西，因為我需要支持版本8以下的IE。

謝謝。

Answer 1

建議的解決方案（替代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 children頁面開始，它應該一直工作到IE6。 IE 6、7和8僅在children包括HTML注釋節點。 這應該沒什么大不了的。

Answer 2

正如我在評論中所說，道歉，要對不完整的數據進行激烈辯論。 雖然確實是舊的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);