2012-02-12 43 views
16

Tôi đang sử dụng đoạn mã sau để phân tích một chuỗi thành DOM:Javascript DOMParser truy cập innerHTML và các tài sản khác

var doc new DOMParser().parseFromString(string, 'text/xml'); 

đâu string chỉ là một cái gì đó giống như <!DOCTYPE html><html><head></head><body>content</body></html>.

typeof doc cho tôi object. Nếu tôi làm một cái gì đó như doc.querySelector('body') tôi nhận được một đối tượng DOM trở lại. Nhưng nếu tôi cố gắng truy cập vào bất kỳ tài sản, như bạn thường có thể, nó mang lại cho tôi undefined:

doc.querySelector('body').innerHTML; // undefined 

Cũng vậy với các tài sản khác, ví dụ id. Mặt khác, việc truy lục thuộc tính sẽ được sử dụng tốt doc.querySelector('body').getAttribute('id');.

Có chức năng phép thuật nào để truy cập vào các thuộc tính đó không?

Trả lời

32

Phương pháp hiện tại của bạn không thành công, vì thuộc tính HTML không được xác định cho tài liệu XML đã cho. Nếu bạn cung cấp loại text/html MIME, phương pháp sẽ hoạt động.

var string = '<!DOCTYPE html><html><head></head><body>content</body></html>'; 
var doc = new DOMParser().parseFromString(string, 'text/html'); 
doc.body.innerHTML; // or doc.querySelector('body').innerHTML 
//^Returns "content" 

Mã dưới đây cho phép loại text/html MIME dành cho trình duyệt chưa hỗ trợ nguyên bản. Được lấy từ Mozilla Developer Network:

/* 
* DOMParser HTML extension 
* 2012-02-02 
* 
* By Eli Grey, http://eligrey.com 
* Public domain. 
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. 
*/ 

/*! @source https://gist.github.com/1129031 */ 
/*global document, DOMParser*/ 

(function(DOMParser) { 
    "use strict"; 
    var DOMParser_proto = DOMParser.prototype 
     , real_parseFromString = DOMParser_proto.parseFromString; 

    // Firefox/Opera/IE throw errors on unsupported types 
    try { 
     // WebKit returns null on unsupported types 
     if ((new DOMParser).parseFromString("", "text/html")) { 
      // text/html parsing is natively supported 
      return; 
     } 
    } catch (ex) {} 

    DOMParser_proto.parseFromString = function(markup, type) { 
     if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { 
      var doc = document.implementation.createHTMLDocument("") 
       , doc_elt = doc.documentElement 
       , first_elt; 

      doc_elt.innerHTML = markup; 
      first_elt = doc_elt.firstElementChild; 

      if (doc_elt.childElementCount === 1 
       && first_elt.localName.toLowerCase() === "html") { 
       doc.replaceChild(first_elt, doc_elt); 
      } 

      return doc; 
     } else { 
      return real_parseFromString.apply(this, arguments); 
     } 
    }; 
}(DOMParser)); 
+3

PS. Để làm rõ, khi bạn đang sử dụng 'text/xml',' doc' là một thể hiện của 'XMDocument'. Sử dụng 'text/html', nó là một thể hiện của' HTMLDocument'. –

+0

Waaw, một câu trả lời khá hữu ích! Không thể tự mình tìm được. Chỉ loại mime và cho phép loại mime đó :) – DADU

+1

@RobW Tôi giả sử bạn có nghĩa là 'XMLDocument'. – devios1

0

Sử dụng element.getAttribute(attributeName) cho XML/phần tử HTML

Các vấn đề liên quan