জাভাস্ক্রিপ্ট: আমার কাছে নোডের ডিওএম প্রতিনিধিত্ব (উপাদান বা নথি) আছে এবং আমি এর স্ট্রিং প্রতিনিধিত্ব খুঁজছি। যেমন,
var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));
ফলন করা উচিত:
get_string(el) == "<p>Test</p>";
আমার দৃ strong় অনুভূতি আছে যে আমি তুচ্ছ সহজ কিছু মিস করছি, তবে আমি কেবল এমন কোনও পদ্ধতি খুঁজে পাই না যা আইই, এফএফ, সাফারি এবং অপেরাতে কাজ করে। সুতরাং, আউটআরএইচটিএমএল কোনও বিকল্প নয়।
উত্তর:
আপনি একটি অস্থায়ী অভিভাবক নোড তৈরি করতে পারেন এবং এর অভ্যন্তরীণ এইচটিএমএল সামগ্রী পাবেন:
var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));
var tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.innerHTML); // <p>Test</p>
সম্পাদনা: বাইরের এইচটিএমএল সম্পর্কে দয়া করে নীচে উত্তর দেখুন। el.outerHTML এর যা প্রয়োজন তা হ'ল।
document.documentElement? পবিত্র
elementএটি যুক্ত করার সময় এটি tmpবোকোজে যুক্ত করার আগে আপনার ক্লোন করতে ভুলবেন না tmp, এটি এখান থেকে সরানো হবে document।
আপনি যা সন্ধান করছেন তা 'আউটআর এইচটিএমএল' তবে পুরাতন ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ নয় এমন ফ্যালব্যাক কোজ দরকার।
var getString = (function() {
var DIV = document.createElement("div");
if ('outerHTML' in DIV)
return function(node) {
return node.outerHTML;
};
return function(node) {
var div = DIV.cloneNode();
div.appendChild(node.cloneNode(true));
return div.innerHTML;
};
})();
// getString(el) == "<p>Test</p>"
আপনি আমার jQuery প্লাগইনটি এখানে পাবেন: নির্বাচিত উপাদানটির বাইরের এইচটিএমএল পান
outerHTMLআমি প্রশ্ন জিজ্ঞাসার পরে ফায়ারফক্স 11 সংস্করণে যুক্ত করেছে। সুতরাং এটি আর বিকল্প ছিল না। আপনি যদি ঘনিষ্ঠভাবে দেখেন তবে আমি আমার প্রশ্নটিকে একটি উপযুক্ত মন্তব্য দিয়ে আপডেট করেছি।
innerHtml
innerHTML; )
outerHTMLবৈশিষ্ট্যটিকে সমর্থন করে না । আরও দেখুন caniuse.com/#feat=xml-serializer
আমি মনে করি না এর জন্য আপনার কোনও জটিল স্ক্রিপ্ট দরকার। শুধু ব্যবহার
get_string=(el)=>el.outerHTML;
এফএফ এর অধীনে আপনি XMLSerializerএক্সএমএলকে স্ট্রিংয়ে সিরিয়ালাইজ করতে অবজেক্টটি ব্যবহার করতে পারেন । আইই আপনাকে xmlনোডের সম্পত্তি দেয় । সুতরাং আপনি নিম্নলিখিতটি করতে পারেন:
function xml2string(node) {
if (typeof(XMLSerializer) !== 'undefined') {
var serializer = new XMLSerializer();
return serializer.serializeToString(node);
} else if (node.xml) {
return node.xml;
}
}
.xmlডোম নোডগুলিতে কাজ করে না (বর্তমান পৃষ্ঠায় নোডের মতো)। এটি কেবল এক্সএমএল ডম ডকুমেন্ট নোডগুলিতে কাজ করে।
outerHTMLএক্সএমএল ডম ডকুমেন্ট নোডগুলিতে কাজ করে না। এটি কেবল ডোম নোডগুলিতে কাজ করে (বর্তমান পৃষ্ঠার নোডের মতো)। সেখানে ভাল ধারাবাহিকতা আমি বলতে চাই।
এলিমেন্ট # বহিরাগত HTML ব্যবহার করুন:
var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));
console.log(el.outerHTML);
এটি ডিওএম উপাদানগুলি লেখার জন্যও ব্যবহার করা যেতে পারে। মজিলার ডকুমেন্টেশন থেকে:
উপাদান ডিওএম ইন্টারফেসের বহিরাগত এইচটিএমএল বৈশিষ্ট্যটি সিরিয়ালযুক্ত এইচটিএমএল খণ্ডকে এর বংশধরসহ উপাদানটির বর্ণনা দেয়। প্রদত্ত স্ট্রিং থেকে পার্স করা নোডের সাথে উপাদানটি প্রতিস্থাপন করতে সেট করা যেতে পারে।
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
যদি আপনার উপাদানটির পিতামাতা থাকে
element.parentElement.innerHTML
<li>তালিকার একক জন্য আউটআরএইচটিএমএল চিন্তা করুন ।
চেষ্টা করুন
new XMLSerializer().serializeToString(element);
আমি খুঁজে পেয়েছি যে আমার ব্যবহারের ক্ষেত্রে আমি সর্বদা পুরো বাইরের এইচটিএমএল চাই না। অনেকগুলি নোডে দেখানোর মতো অনেকগুলি শিশু রয়েছে।
এখানে একটি ফাংশন রয়েছে (ক্রোমে সর্বনিম্ন পরীক্ষিত):
/**
* Stringifies a DOM node.
* @param {Object} el - A DOM node.
* @param {Number} truncate - How much to truncate innerHTML of element.
* @returns {String} - A stringified node with attributes
* retained.
*/
function stringifyEl(el, truncate) {
var truncateLen = truncate || 50;
var outerHTML = el.outerHTML;
var ret = outerHTML;
ret = ret.substring(0, truncateLen);
// If we've truncated, add an elipsis.
if (outerHTML.length > truncateLen) {
ret += "...";
}
return ret;
}
https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec
আমি গৃহীত উত্তরের কোডটি দিয়ে ডোমিলিমেন্টগুলির মাধ্যমে পুনরাবৃত্তি করার সময় কী ভুল তা ভেবে অনেক সময় নষ্ট করেছি। এটি আমার পক্ষে কাজ করেছিল, অন্যথায় প্রতিটি দ্বিতীয় উপাদান নথি থেকে অদৃশ্য হয়ে যায়:
_getGpxString: function(node) {
clone = node.cloneNode(true);
var tmp = document.createElement("div");
tmp.appendChild(clone);
return tmp.innerHTML;
},
document.getElementsByTagName()সেই সংগ্রহটি মধ্য- forলুপ বদলে যাবে, সুতরাং প্রতিটি দ্বিতীয় উপাদানকে এড়িয়ে চলে।
যদি প্রতিক্রিয়া ব্যবহার করে:
const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;
.outerHTMLপ্রতিক্রিয়া নির্দিষ্ট নয়; এটি একটি ডিওএম স্ট্যান্ডার্ড। @ রিচ অ্যাপোডাকার উত্তরটি দেখুন।
reactdom.findDOMNode()তা ছিল ... না .outerHTML, তবে অবস্থানের জন্য ধন্যবাদ।