সার্ভার পাশ দিয়ে ডেটা এক্সচেঞ্জ করতে আমি জাভাস্ক্রিপ্টে একটি এক্সএমএল উপাদান তৈরি করতে যাচ্ছি। আমি পেয়েছিলাম এটি দিয়ে করতে পারি document.createElement। তবে আমি জানি না কীভাবে এটি স্ট্রিংয়ে রূপান্তর করা যায়। এটি আরও সহজ করার জন্য ব্রাউজারে কোনও এপিআই রয়েছে? অথবা এই এপিআই সহ কোনও জেএস লাইব্রেরি নেই?
সম্পাদনা: আমি খুঁজে পেয়েছি যে ব্রাউজারের এপিআই এক্সএমএলসায়ারাইজার, এটি স্ট্রিংয়ে সিরিয়ালাইজ করার সঠিক উপায় হওয়া উচিত।
উত্তর:
আপনি উপাদানটি ক্লোন করে, একটি খালি, 'অফস্টেজ' ধারকটিতে যোগ করে এবং ধারকটির অভ্যন্তরীণ এইচটিএমএল পড়ে 'বহির-এইচটিএমএল' পেতে পারেন।
এই উদাহরণটি একটি alচ্ছিক দ্বিতীয় প্যারামিটার নেয়।
উপাদানটির বংশধরদের অন্তর্ভুক্ত করার জন্য ডকুমেন্ট.কেএইচটিএমএল (উপাদান, সত্য) কল করুন।
document.getHTML= function(who, deep){
if(!who || !who.tagName) return '';
var txt, ax, el= document.createElement("div");
el.appendChild(who.cloneNode(false));
txt= el.innerHTML;
if(deep){
ax= txt.indexOf('>')+1;
txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
}
el= null;
return txt;
}
domElement.outerHTML( w3schools.com/jsref/prop_html_outerhtml.asp )
উপাদান outerHTMLবৈশিষ্ট্য (নোট: সংস্করণ 11 পরে ফায়ারফক্স দ্বারা সমর্থিত ) পুরো উপাদানটির এইচটিএমএল ফিরিয়ে দেয়।
<div id="new-element-1">Hello world.</div>
<script type="text/javascript"><!--
var element = document.getElementById("new-element-1");
var elementHtml = element.outerHTML;
// <div id="new-element-1">Hello world.</div>
--></script>
একইভাবে, আপনি innerHTMLকোনও নির্দিষ্ট উপাদানের মধ্যে থাকা এইচটিএমএল innerTextপেতে বা কোনও উপাদানটির অভ্যন্তরে পাঠ্য পেতে (এইচটিএমএল মার্কআপ স্যান) ব্যবহার করতে পারেন।
সবচেয়ে সহজ উপায় হ'ল সেই উপাদানটির অভ্যন্তরীণ এইচটিএমএলটি অনুলিপি করে ভেরিয়েবলটি খালি করা, তারপরে নতুন উপাদান যুক্ত করুন এবং তারপরে কপি ব্যাক টিএমপি ভেরিয়েবল। আমি মাথার উপরে jquery স্ক্রিপ্ট যোগ করতে ব্যবহৃত একটি উদাহরণ এখানে।
var imported = document.createElement('script');
imported.src = 'http://code.jquery.com/jquery-1.7.1.js';
var tmpHead = document.head.innerHTML;
document.head.innerHTML = "";
document.head.append(imported);
document.head.innerHTML += tmpHead;
এটা সহজ :)
এখানে একটি tagNameসম্পত্তি এবং একটি attributesসম্পত্তি আছে:
var element = document.getElementById("wtv");
var openTag = "<"+element.tagName;
for (var i = 0; i < element.attributes.length; i++) {
var attrib = element.attributes[i];
openTag += " "+attrib.name + "=" + attrib.value;
}
openTag += ">";
alert(openTag);
এইচটিএমএল উপাদানের সমস্ত বৈশিষ্ট্যের মাধ্যমে পুনরাবৃত্তি করবেন কীভাবে দেখুন ? (আমি করেছিলাম!)
উন্মুক্ত এবং নিকটবর্তী ট্যাগগুলির মধ্যে লিখিত সামগ্রীগুলি পেতে আপনি সম্ভবত innerHTMLসমস্ত শিশু উপাদানগুলির উপর পুনরাবৃত্তি করতে না চাইলে আপনি ব্যবহার করতে পারেন ...
alert(element.innerHTML);
... এবং তারপরে আবার কাছের ট্যাগটি পান tagName।
var closeTag = "</"+element.tagName+">";
alert(closeTag);
এটি সবার ক্ষেত্রে প্রয়োগ হতে পারে না, তবে এক্সএমএল থেকে বের করার সময় আমার এই সমস্যা হয়েছিল, যা আমি এটি দিয়ে সমাধান করেছি।
function grab_xml(what){
var return_xml =null;
$.ajax({
type: "GET",
url: what,
success:function(xml){return_xml =xml;},
async: false
});
return(return_xml);
}
তারপরে এক্সএমএল পান:
var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");
তারপরে আমি এক্সটিএমএল লাইনটি বের করার জন্য এই ফাংশনটি তৈরি করেছিলাম, যখন আমার এইচটিএমএল ট্যাগযুক্ত কোনও এক্সএমএল ফাইল থেকে পড়তে হবে।
function extract_xml_line(who){
var tmp = document.createElement("div");
tmp.appendChild(who[0]);
var tmp=$(tmp.innerHTML).html();
return(tmp);
}
এবং এখন উপসংহারে:
var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo <b>in bold</b>
মনে করুন আপনার উপাদানটি সম্পূর্ণ [object HTMLDocument]। আপনি এটি একটি রূপান্তর করতে পারেন স্ট্রিং এই ভাবে:
const htmlTemplate = `<!DOCTYPE html><html lang="en"><head></head><body></body></html>`;
const domparser = new DOMParser();
const doc = domparser.parseFromString(htmlTemplate, "text/html"); // [object HTMLDocument]
const doctype = '<!DOCTYPE html>';
const html = doc.documentElement.outerHTML;
console.log(doctype + html);