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

15.6.3 Removing and Replacing Nodes

15.6.3 Removing and Replacing Nodes

The removeChild() method removes a node from the document tree. Be careful, however: this method isn’t invoked on the node to be removed but (as the “child” part of its name implies) on the parent of that node. Invoke the method on the parent node and pass the child node that is to be removed as the method argument. To remove the node n from the document, you’d write:


replaceChild() removes one child node and replaces it with a new one. Invoke this method on the parent node, passing the new node as the first argument and the node to be replaced as the second argument. To replace the node n with a string of text, for example, you could write:

n.parentNode.replaceChild(document.createTextNode("[ REDACTED ]"), n);

The following function demonstrates another use of replaceChild():

// Replace the node n with a new element and make n a child of that element.

function embolden(n) { // If we're passed a string instead of a node, treat it as an element id if (typeof n == "string") n = document.getElementById(n); var parent = n.parentNode; // Get the parent of n var b = document.createElement("b"); // Create a element parent.replaceChild(b, n); // Replace n with the element b.appendChild(n); // Make n a child of the element


§15.5.1 introduced the outerHTML property of an element and explained that it was not implemented in current versions of Firefox. Example 15-5 shows how to implement this property in Firefox (and any other browser that supports innerHTML, has an extensible Element.prototype object, and has methods for defining property getters and setters). The code also demonstrates a practical use for the removeChild() and clone Node() methods.

Example 15-5. Implementing the outerHTML property using innerHTML

// Implement the outerHTML property for browsers that don't support it. // Assumes that the browser does support innerHTML, has an extensible // Element.prototype, and allows getters and setters to be defined. (function() {

// If we already have outerHTML return without doing anything

if (document.createElement("div").outerHTML) return;

// Return the outer HTML of the element referred to by this function outerHTMLGetter() { var container = document.createElement("div"); // Dummy element

container.appendChild(this.cloneNode(true)); // Copy this to dummy
return container.innerHTML; // Return dummy content

// Set the outer HTML of the this element to the specified value

function outerHTMLSetter(value) { // Create a dummy element and set its content to the specified value var container = document.createElement("div"); container.innerHTML = value; // Move each of the nodes from the dummy into the document while(container.firstChild) // Loop until container has no more kids

this.parentNode.insertBefore(container.firstChild, this); // And remove the node that has been replaced this.parentNode.removeChild(this);


// Now use these two functions as getters and setters for the // outerHTML property of all Element objects. Use ES5 Object.defineProperty // if it exists and otherwise fall back on __defineGetter__ and Setter__. if (Object.defineProperty) {

Object.defineProperty(Element.prototype, "outerHTML", { get: outerHTMLGetter, set: outerHTMLSetter, enumerable: false, configurable: true

}); } else {

Element.prototype.__defineGetter__("outerHTML", outerHTMLGetter); Element.prototype.__defineSetter__("outerHTML", outerHTMLSetter); } }());

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