Есть ли способ найти элемент в documentFragment?

Question

var oFra = document.createDocumentFragment();
// oFra.[add elements];
document.createElement("div").id="myId";
oFra.getElementById("myId"); //not in FF

Как я могу получить myId перед прикреплением фрагмента к документу?

Answer 1

Все эти ответы довольно старые, со времен, когда querySelectorAll и querySelector не были широко доступны. Следует отметить, что эти две функции, которые принимают CSS-селекторы в качестве параметров, работают на DocumentFragment s в современных браузерах и должны быть предпочтительным способом решения ситуации в вопросе. Альтернативные решения, представленные в некоторых ответах, будут хорошим подходом для устаревших браузеров, которые не поддерживают querySelectorAll или querySelector.

Вот пример использования:

var df = document.createDocumentFragment();
var div = document.createElement('div');
div.id = 'foo';
df.appendChild(div);
var result = df.querySelector('#foo'); // result contains the div element

Хорошая реализация должна сначала использовать обнаружение объекта, чтобы увидеть, поддерживает ли браузер это. Например:

function getElementByIdInFragment(fragment, id) {
    if (fragment.querySelector) {
        return fragment.querySelector('#' + id);
    } else {
        // your custom implementation here
    }
}

Answer 2

Нет. DocumentFragment API минимален, если не сказать больше: он не определяет свойства или методы, то есть он поддерживает только свойства и методы, определенные в Node API . Так как такие методы, как getElementById определены в Document API , их нельзя использовать с DocumentFragment.

Answer 3

NickFitz прав, DocumentFragment не имеет API, который вы ожидаете от Document или Element, в стандарте или в браузерах (что обидно; было бы очень удобно иметь возможность установить Фрагменты innerHTML.

Даже фреймворки здесь не помогают, так как они, как правило, требуют, чтобы узлы были в документе, или иным образом используют методы на узле контекста, которые не существуют во фрагментах. Вы, вероятно, должны написать свой собственный, например.

 function Node_getElementById(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= Node_getElementById(child, id);
          if (child!==null)
              return child;
      }
      return null;
 }

Почти наверняка было бы лучше отслеживать ссылки во время работы, чем полагаться на наивную, плохо работающую функцию, подобную приведенной выше.

var frag= document.createDocumentFragment();
var mydiv= document.createElement("div");
mydiv.id= 'myId';
frag.appendChild(mydiv);
// keep reference to mydiv

Answer 4

Использование jQuery:

// Create DocumentFragment
var fragment  = document.createDocumentFragment(),
    container = document.createElement('div');

container.textContent = 'A div full of text!';
container.setAttribute('id', 'my-div-1');
container.setAttribute('class', 'a-div-class');
fragment.appendChild(container);

// Query container's class when given ID
var div = $('<div></div>').html(fragment);
console.log(div.find('#my-div-1').attr('class'));

jsFiddle: http://jsfiddle.net/CCkFs/

Однако у вас есть накладные расходы на создание div с помощью jQuery. Немного хакер, но это работает.

Answer 5

А как же:

var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id="myId";
oFra.appendChild(myDiv);
oFra.getElementById("myId"); //not in FF

Если вы не добавили созданный div к фрагменту документа, я не уверен, почему getElementById его найдет?

- редактирование

Если вы хотите запустить свою собственную функцию getElementById, вы должны иметь возможность получить нужную ссылку, потому что этот код работает:

var oFra = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myId";
oFra.appendChild(myDiv);
if (oFra.hasChildNodes()) {
    var i=0;
    var myEl;
    var children = oFra.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].id == "myId") {
            myEl = children[i];
        }
    }
}
window.alert(myEl.id);

Answer 6

Лучший способ узнать, что можно и что нельзя делать с DocumentFragment, - это изучить его прототип:

const newFrag = document.createDocumentFragment();  
const protNewFrag = Object.getPrototypeOf( newFrag );
console.log( '£ protNewFrag:' ); 
console.log( protNewFrag ); 

Я получаю

DocumentFragmentPrototype {getElementById: getElementById (), querySelector: querySelector (), querySelectorAll: querySelectorAll (), prepend: prepend (), append: append (), дети: получатель, firstElementChild: Getter, lastElementChild: Getter, childElementCount: Getter, еще 1…}

... что говорит мне, что я могу делать такие вещи:

const firstChild = newFrag.children[ 0 ];

PS это не сработает:

const firstChild = Object.getPrototypeOf( newFrag ).children[ 0 ];

... вам скажут, что «объект не реализует интерфейс DocumentFragment»

Answer 7

В моем DOM есть # фрагмент документа под тегом элемента.

Это то, что я использую (используя jQuery), также у меня есть вариант использования, где у меня есть HTML DOM в строке -

 var texttemplate = $(filecontents).find('template').html();


 $(texttemplate).children()

      <p>​Super produced One​</p>​, 
      <appler-one>​</appler-one>, 
      <p>​Super produced Two​</p>, 
      <appler-two>​…​</appler-two>]

$(texttemplate).html()

                "<p>Super produced One</p>
                <appler-one></appler-one>
                <p>Super produced Two</p>
                <appler-two>
                    <p>Super produced Three</p>
                    <appler-three></appler-three>
                </appler-two>"


$(texttemplate).find("appler-one")

              [<appler-one>​</appler-one>​]

Answer 8

Внешний источник, указанный ниже, показал следующий фрагмент кода:

var textblock=document.createElement("p")
textblock.setAttribute("id", "george")
textblock.setAttribute("align", "center")

Который отображает другой способ установки параметра ID объекта.

Javascript Kit - методы объекта документа