FirefoxでOuterHTMLを実行するにはどうすればよいですか？
私のコードの一部であるOuterHTMLプロパティを取得します
"<LI onclick="TabClicked(this, 'SearchName', 'TabGroup1');">Name "
だから私はそれを解析することを含むものをすることができます。
ただし、FirefoxのJavaScriptにはOuterHTMLプロパティがなく、この文字列を取得する別の方法が見つかりません。アイデア？
理解した！
child.getAttributeNode("OnClick").nodeValue;
getAttributeは機能しませんでしたが、getAttributeNodeはうまく機能しました; D
pure.js で使用する関数は次のとおりです。
function outerHTML(node){
return node.outerHTML || new XMLSerializer().serializeToString(node);
}
DOMの方法で使用するには：
outerHTML(document.getElementById('theNode'));
そしてそれはクロスブラウザで動作します
編集：警告！XMLSerializerに問題があり、XML（XHTML）文字列を生成します。
つまり、<div class="team" />のようなタグの代わりに<div class="team"></div>
一部のブラウザはそれを好きではありません。最近、Firefox 3.5で少し苦労しました。
したがって、pure.js libについては、以前の安全な方法に戻りました。
function outerHTML(node){
// if IE, Chrome take the internal method otherwise build one
return node.outerHTML || (
function(n){
var div = document.createElement('div'), h;
div.appendChild( n.cloneNode(true) );
h = div.innerHTML;
div = null;
return h;
})(node);
}
適切なアプローチ（IE以外のブラウザーの場合）は次のとおりです。
var sOuterHTML = new XMLSerializer().serializeToString(oElement);
JQueryを使用する場合は、比較的簡単です。
$('<div>').append( $(ElementSelector).clone() ).html();
複数の要素が選択されている場合、これは複数の要素の外側のHTMLを取得します。
outerHTML がFirefoxでサポートされるようになりました：
Firefox 11は2012年3月13日に出荷されました。この記事では、このリリースで修正された新機能と主要なバグに関する情報、およびWeb開発者とアドオン開発者の両方のためのより詳細なドキュメントへのリンクを提供します。
- Element.outerHTMLプロパティがHTML要素でサポートされるようになりました。
これを試してください： http://snipplr.com/view/5460/outerhtml-in-firefox/ ：
if (document.body.__defineGetter__) {
if (HTMLElement) {
var element = HTMLElement.prototype;
if (element.__defineGetter__) {
element.__defineGetter__("outerHTML",
function () {
var parent = this.parentNode;
var el = document.createElement(parent.tagName);
el.appendChild(this);
var shtml = el.innerHTML;
parent.appendChild(this);
return shtml;
}
);
}
}
}
W3CにouterHTMLプロパティが含まれていないため、以下を追加するだけです。
if (typeof (HTMLElement) != "undefined" && !window.opera)
{
HTMLElement.prototype._____defineGetter_____("outerHTML", function()
{
var a = this.attributes, str = "<" + this.tagName, i = 0; for (; i < a.length; i++)
if (a[i].specified)
str += " " + a[i].name + '="' + a[i].value + '"';
if (!this.canHaveChildren)
return str + " />";
return str + ">" + this.innerHTML + "</" + this.tagName + ">";
});
HTMLElement.prototype._____defineSetter_____("outerHTML", function(s)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
HTMLElement.prototype._____defineGetter_____("canHaveChildren", function()
{
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
試してください：
(function(ele, html)
{if (typeof(ele.outerHTML)=='undefined')
{var r=ele.ownerDocument.createRange();
r.setStartBefore(ele);
ele.parentNode.replaceChild(r.createContextualFragment(html), ele);
}
else
{ele.outerHTML=html;
}
})(aEle, aHtml);
diyism
このような単純なものはどうですか（完全にはテストされていません）：
function outerHTML(node) {
var el;
if (node.outerHTML) {
return node.outerHTML;
} else if (node.parentNode && node.parentNode.nodeType == 1) {
var el = document.createElement(node.parentNode.nodeName);
el.appendChild( node.cloneNode(true) );
return el.innerHTML;
}
return "";
}
Onclick属性だけが必要な場合は、以下を試してください。これは、attachEventまたはaddEventListenerを使用してイベントを設定しなかったと想定しています。
Elm.getAttribute("onclick");
OuterHTML文字列を作成したい場合（作成後に分解しないことを約束してください）：
function outerHTML(Elm){
var ret = "<"+Elm.tagName;
for(var i=0; i<Elm.attributes.length; i++){
var attr = Elm.attributes[i];
ret += " "+attr.name+"=\""+attr.nodeValue.replace(/"/, "\"")+"\"";
}
ret += ">";
ret += Elm.innerHTML+"</"+Elm.tagName+">";
return ret;
}
この関数はほとんどの場合トリックを実行しますが、名前空間は考慮されません。
私はこれが古いスレッドであることを知っていますが、誰かがGoogleでこれを見つけた場合（私と同じように）-これらすべてのソリューションを試してみましたが、outerHTMLの取得と設定の両方のプロパティを処理するものはなかったため、それらはすべてすぐに機能しました。私はこれを見つけました：私のために働いた：
// 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);
}
}());