為什么我不能在未插入的節點中使用原型DOM方法？

Question

這里的目標是使用prototypeJs方法在將某些DOM節點插入文檔之前對其進行操作。

測試用例：

<html>
<head>
    <script type="text/javascript" src="prototype.js" ></script>
</head>
<body>
    <script type="text/javascript">
        var elt = document.createElement("DIV");
        elt.id="root";
        elt.innerHTML="<div id='stuff'><span id='junk'></span></div>";

        console.info(elt);

        console.info(Element.down(elt, "#stuff"));
        console.info(Element.select(elt, "#stuff"));

        console.info(elt.down("#stuff"));
        console.info(elt.select("#stuff"));

        Element.extend(elt);

        console.info(elt.down("#stuff"));
        console.info(elt.select("#stuff"));

        document.body.appendChild(elt);

        console.info($("root").down("#stuff"));
        console.info($("root").select("#stuff"));

    </script>
</body>
</html>

在Firefox中，所有8個測試均正確輸出“ stuff” div或僅包含“ stuff” div的集合。

在ie（在7/8中進行測試）中，我希望后兩個測試只會失敗，因為原型不會像ff中那樣自動擴展DOM。 但是實際發生的是直到插入元素為止的所有測試都失敗了，而隨后的兩個測試都沒問題。 一旦我調用Element.extend，如果期望down / select方法可用。

如果這種行為符合預期，為什么？

您如何建議我以跨瀏覽器友好的方式在內存中的節點上進行DOM遍歷？

因此，感謝Kaze no Koe，我將問題縮小了。 看來這確實適用於ie，但不適用於id選擇器。

<html>
    <head>
        <script type="text/javascript" src="prototype.js" ></script>
    </head>
    <body>
        <script type="text/javascript">     
            var elt = document.createElement("DIV");
            elt.id="root";
            elt.innerHTML="<div id='stuff' class='junk'></div>";
            elt = $(elt);       

            console.info(elt.down("DIV"));      //fine
            console.info(elt.down(".junk"));    //fine
            console.info(elt.down("#stuff"));   //undefined in ie, fine in ff
        </script>
    </body>
</html>

使用class而不是id對我來說不是問題，因此我可以解決我原來的問題，但是出於完整性的考慮，任何人都可以解釋為什么id選擇器在插入前就無法工作嗎？ 我的猜測是ie實現依賴document.getElementById而ff則不依賴。 有人確認嗎？

Answer 1

代替：

Element.extend(elt);

嘗試：

elt = Element.extend(elt);

要么

elt = $(elt);

至於在插入節點之前如何進行遍歷，下面是一些隨機示例，它們說明了Prototype的一些功能：

var elt = new Element('div', {
    className: 'someClass'
});

elt.insert(new Element('ul'));

var listitems = ['one', 'two', 'three'];

listitems.each(function(item){
    var elm = new Element('li');
    elm.innerHTML = item;
    elt.down('ul').insert(elm);
});

elt.getElementsBySelector('li'); //=> returns all LIs

elt.down('li'); //=> returns first li

elt.down('ul').down('li'); //=> also returns first li

elt.down('ul').down('li', 2); //=> should return the third if I'm not mistaken

// all before inserting it into the document!

查看全新的 API文檔。

回答Ollie：我的上面的代碼可以在這里進行測試，因為您可以看到它在IE 6下可以正常工作。

Answer 2

我認為不可能選擇不在文檔中的節點，因為選擇器取決於文檔節點。

您應該以這種方式構建新元素：

var elt = new Element("div");

為什么我不能在未插入的節點中使用原型DOM方法？

問題描述

2 個解決方案

解決方案1
1 已采納 2009-11-10 09:39:05

解決方案2
0 2009-11-10 09:42:24

為什么我不能在未插入的節點中使用原型DOM方法？

問題描述

2 個解決方案

解決方案1 1 已采納 2009-11-10 09:39:05

解決方案2 0 2009-11-10 09:42:24

解決方案1
1 已采納 2009-11-10 09:39:05

解決方案2
0 2009-11-10 09:42:24