Есть ли способ найти элемент в документеFragment?

Ответ 1

Как насчет:

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);

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

 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

Ответ 5

Использование 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 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. Немного взломанный, но он работает.

Ответ 6

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

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

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

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

Ответ 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>​]

Ответ 8

Самый лучший способ узнать, что вы можете и чего не можете сделать с 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(), children: Getter, firstElementChild: Getter, lastElementChild: Getter, childElementCount: Getter, еще 1...}

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

const firstChild = newFrag.children[ 0 ];

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

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

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