2012-02-12 1 views
16

내가 DOM에 문자열을 구문 분석하려면 다음 코드를 사용하고 있습니다 : string 그냥 <!DOCTYPE html><html><head></head><body>content</body></html> 같은 것입니다자바 스크립트 DOMParser 액세스 innerHTML을 및 기타 속성

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

.

typeof docobject입니다. doc.querySelector('body')과 같은 것을하면 DOM 객체가 다시 생깁니다. 난 당신이 일반적으로 할 수있는 것처럼, 어떤 속성에 액세스하려고하면, 그것은 나에게주는 undefined : 같은 다른 특성, 예를 들면 간다

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

id. 반면에 속성 검색은 doc.querySelector('body').getAttribute('id');이됩니다.

해당 속성에 액세스 할 수있는 마법 기능이 있습니까?

답변

32

HTML 속성이 지정된 XML 문서에 정의되어 있지 않기 때문에 현재 메서드가 실패합니다. text/html MIME 형식을 제공하면 메서드가 작동합니다.

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" 

아래 코드는 기본적으로 아직 지원하지 않는 브라우저에 대한 text/html MIME 타입을 할 수 있습니다. Mozilla Developer Network에서 검색 : XML에 대한

/* 
* 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. 설명을 위해'text/xml'을 사용할 때'doc'는'XMDocument'의 인스턴스입니다. 'text/html'을 사용하면'HTMLDocument'의 인스턴스입니다. –

+0

Waaw, 꽤 유용한 답변입니다! 저 자신을 발견하지 못했습니다. 그냥 mime 형식과 그 MIME 형식을 사용 : – DADU

+1

@ RobW 나는 당신이'XMLDocument'라고 가정합니다. – devios1

0

사용 element.getAttribute(attributeName)/HTML 요소

관련 문제