Mam zamiar stworzyć element XML w JavaScript do wymiany danych po stronie serwera. Odkryłem, że mogę to zrobić document.createElement. Ale nie wiem, jak przekonwertować go na ciąg. Czy w przeglądarce jest jakieś API, aby to ułatwić? Czy jest jakaś biblioteka JS zawierająca to API?
EDYCJA: Odkryłem, że interfejs API przeglądarki XMLSerializer powinien być właściwym sposobem serializacji do ciągu.
Odpowiedzi:
Możesz uzyskać „zewnętrzny-html”, klonując element, dodając go do pustego kontenera „poza sceną” i odczytując wewnętrzny kod HTML kontenera.
Ten przykład przyjmuje opcjonalny drugi parametr.
Wywołaj document.getHTML (element, true), aby uwzględnić elementy potomne elementu.
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 )
Właściwość element outerHTML(uwaga: obsługiwana przez przeglądarkę Firefox po wersji 11 ) zwraca kod HTML całego elementu.
<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>
Podobnie możesz użyć innerHTMLdo pobrania kodu HTML zawartego w danym elemencie lub innerTextdo pobrania tekstu wewnątrz elementu (bez znaczników HTML).
Najłatwiejszym sposobem jest skopiowanie innerHTML tego elementu do zmiennej tmp i uczynienie jej pustą, a następnie dodanie nowego elementu, a następnie skopiowanie z powrotem do niego zmiennej tmp. Oto przykład, którego użyłem, aby dodać skrypt jquery na czubku głowy.
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;
Tak prosty :)
Jest tagNamenieruchomość, a także attributesnieruchomość:
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);
Zobacz także Jak iterować przez wszystkie atrybuty w elemencie HTML? (Zrobiłem!)
Aby uzyskać zawartość między tagami open i close, prawdopodobnie innerHTMLmożesz użyć, jeśli nie chcesz iterować wszystkich elementów podrzędnych ...
alert(element.innerHTML);
... a następnie ponownie uzyskaj znacznik zamknięcia za pomocą tagName.
var closeTag = "</"+element.tagName+">";
alert(closeTag);
Może to nie dotyczyć wszystkich przypadków, ale podczas wyodrębniania z XML miałem ten problem, który rozwiązałem.
function grab_xml(what){
var return_xml =null;
$.ajax({
type: "GET",
url: what,
success:function(xml){return_xml =xml;},
async: false
});
return(return_xml);
}
następnie pobierz xml:
var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");
Następnie wykonałem tę funkcję, aby wyodrębnić linię xml, gdy muszę odczytać z pliku XML, zawierającego tagi html.
function extract_xml_line(who){
var tmp = document.createElement("div");
tmp.appendChild(who[0]);
var tmp=$(tmp.innerHTML).html();
return(tmp);
}
a teraz na zakończenie:
var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo <b>in bold</b>
Załóżmy, że twój element jest cały [object HTMLDocument]. Możesz przekonwertować go na String w ten sposób:
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);