Tôi sẽ tạo một phần tử XML trong JavaScript để trao đổi dữ liệu với phía máy chủ. Tôi thấy tôi có thể làm điều đó với document.createElement. Nhưng tôi không biết làm thế nào để chuyển đổi nó thành chuỗi. Có API nào trong trình duyệt để làm cho nó dễ dàng hơn không? Hoặc có thư viện JS nào bao gồm API này không?
CHỈNH SỬA: Tôi thấy rằng API XMLSerializer của trình duyệt, nó phải là cách phù hợp để tuần tự hóa thành chuỗi.
Câu trả lời:
Bạn có thể lấy 'external-html' bằng cách sao chép phần tử, thêm nó vào vùng chứa rỗng, 'offstage' và đọc nộiHTML của vùng chứa.
Ví dụ này có tham số thứ hai tùy chọn.
Gọi document.getHTML (phần tử, true) để bao gồm các phần tử con của phần tử.
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 )
outerHTMLThuộc tính phần tử (lưu ý: được Firefox hỗ trợ sau phiên bản 11 ) trả về HTML của toàn bộ phần tử.
<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>
Tương tự, bạn có thể sử dụng innerHTMLđể lấy HTML có trong một phần tử nhất định hoặc innerTextđể lấy văn bản bên trong một phần tử (không đánh dấu HTML).
Cách dễ dàng nhất để làm là sao chép innerHTML của phần tử đó vào biến tmp và làm cho nó trống, sau đó nối phần tử mới và sau đó sao chép lại biến tmp vào đó. Đây là một ví dụ tôi đã sử dụng để thêm tập lệnh jquery vào đầu.
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;
Thật đơn giản :)
Có một tagNametài sản và một attributestài sản nữa:
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);
Xem thêm Làm thế nào để lặp qua tất cả các thuộc tính trong một phần tử HTML? (Tôi đã làm!)
Để lấy nội dung giữa các thẻ mở và thẻ đóng, bạn có thể sử dụng innerHTMLnếu không muốn lặp lại tất cả các phần tử con ...
alert(element.innerHTML);
... và sau đó nhận lại thẻ đóng với tagName.
var closeTag = "</"+element.tagName+">";
alert(closeTag);
Điều này có thể không áp dụng cho tất cả mọi người, nhưng khi giải nén từ xml, tôi gặp sự cố này, tôi đã giải quyết được vấn đề này.
function grab_xml(what){
var return_xml =null;
$.ajax({
type: "GET",
url: what,
success:function(xml){return_xml =xml;},
async: false
});
return(return_xml);
}
sau đó lấy xml:
var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");
Sau đó, tôi thực hiện chức năng này để trích xuất dòng xml, khi tôi cần đọc từ tệp XML, có chứa các thẻ html.
function extract_xml_line(who){
var tmp = document.createElement("div");
tmp.appendChild(who[0]);
var tmp=$(tmp.innerHTML).html();
return(tmp);
}
và bây giờ để kết luận:
var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo <b>in bold</b>
Giả sử phần tử của bạn là toàn bộ [object HTMLDocument]. Bạn có thể chuyển đổi nó thành Chuỗi theo cách này:
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);