JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

15.6.4 Using DocumentFragments

15.6.4 Using DocumentFragments

A DocumentFragment is a special kind of Node that serves as a temporary container for other nodes. Create a DocumentFragment like this:

var frag = document.createDocumentFragment();

Like a Document node, a DocumentFragment stands alone and is not part of any other document. Its parentNode is always null. Like an Element, however, a DocumentFragment can have any number of children, which you can manipulate with appendChild(), insertBefore(), and so on.

15.6 Creating, Inserting, and Deleting Nodes | 385

The special thing about DocumentFragment is that it allows a set of nodes to be treated as a single node: if you pass a DocumentFragment to appendChild(), insertBefore(), or replaceChild(), it is the children of the fragment that are inserted into the document, not the fragment itself. (The children are moved from the fragment into the document, and the fragment becomes empty and ready for reuse.) The following function uses a DocumentFragment to reverse the order of the children of a node:

// Reverse the order of the children of Node n

function reverse(n) { // Create an empty DocumentFragment as a temporary container var f = document.createDocumentFragment(); // Now loop backward through the children, moving each one to the fragment. // The last child of n becomes the first child of f, and vice-versa. // Note that appending a child to f automatically removes it from n. while(n.lastChild) f.appendChild(n.lastChild);

// Finally, move the children of f all at once back to n, all at once. n.appendChild(f); }

Example 15-6 implements the insertAdjacentHTML() method (see §15.5.1 ) using the innerHTML property and a DocumentFragment. It also defines logically named HTML insertion functions as an alternative to the confusing insertAdjacentHTML() API. The internal utility function fragment() is possibly the most useful part of this code: it returns a DocumentFragment that contains the parsed representation of a specified string of HTML text.

Example 15-6. Implementing insertAdjacentHTML() using innerHTML

// This module defines Element.insertAdjacentHTML for browsers that don't // support it, and also defines portable HTML insertion functions that have // more logical names than insertAdjacentHTML: // Insert.before(), Insert.after(), Insert.atStart(), Insert.atEnd() var Insert = (function() {

// If elements have a native insertAdjacentHTML, use it in four HTML // insertion functions with more sensible names. if (document.createElement("div").insertAdjacentHTML) {

return { before: function(e,h) {e.insertAdjacentHTML("beforebegin",h);}, after: function(e,h) {e.insertAdjacentHTML("afterend",h);}, atStart: function(e,h) {e.insertAdjacentHTML("afterbegin",h);}, atEnd: function(e,h) {e.insertAdjacentHTML("beforeend",h);}

}; }

// Otherwise, we have no native insertAdjacentHTML. Implement the same // four insertion functions and then use them to define insertAdjacentHTML.

// First, define a utility method that takes a string of HTML and returns // a DocumentFragment containing the parsed representation of that HTML. function fragment(html) {

var elt = document.createElement("div"); // Create empty element var frag = document.createDocumentFragment(); // Create empty fragment elt.innerHTML = html; // Set element content

while(elt.firstChild) // Move all nodes frag.appendChild(elt.firstChild); // from elt to frag return frag; // And return the frag }

var Insert = { before: function(elt, html) {

elt.parentNode.insertBefore(fragment(html), elt); }, after: function(elt, html) {

elt.parentNode.insertBefore(fragment(html),elt.nextSibling); }, atStart: function(elt, html) {

elt.insertBefore(fragment(html), elt.firstChild); }, atEnd: function(elt, html) { elt.appendChild(fragment(html)); }


// Now implement insertAdjacentHTML based on the functions above

Element.prototype.insertAdjacentHTML = function(pos, html) { switch(pos.toLowerCase()) { case "beforebegin": return Insert.before(this, html); case "afterend": return Insert.after(this, html); case "afterbegin": return Insert.atStart(this, html); case "beforeend": return Insert.atEnd(this, html); }

}; return Insert; // Finally return the four insertion function }());

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1