代码之家 › 专栏 › 技术社区 › Toniq

用DOMParser还是innerHTML解析?

parsexml innerhtml html javascript

1

Toniq · 技术社区 · 7 年前

txt="<address>"+
 "<street>Roble Ave</street>"+
  "<mtfcc>S1400</mtfcc>"+
  "<streetNumber>649</streetNumber>"+
  "<lat>37.45127</lat>"+
  "<lng>-122.18032</lng>"+
  "<distance>0.04</distance>"+
  "<postalcode>94025</postalcode>"+
  "<placename>Menlo Park</placename>"+
  "<adminCode2>081</adminCode2>"+
  "<adminName2>San Mateo</adminName2>"+
  "<adminCode1>CA</adminCode1>"+
  "<adminName1>California</adminName1>"+
  "<countryCode>US</countryCode>"+
 "</address>";
 
 var d = document.createElement('div')
 d.innerHTML = txt

console.log(d.getElementsByTagName("streetNumber")[0].childNodes[0].nodeValue);
console.log(d.getElementsByTagName("postalcode")[0].childNodes[0].nodeValue);

或

txt = "<address>" +
  "<street>Roble Ave</street>" +
  "<mtfcc>S1400</mtfcc>" +
  "<streetNumber>649</streetNumber>" +
  "<lat>37.45127</lat>" +
  "<lng>-122.18032</lng>" +
  "<distance>0.04</distance>" +
  "<postalcode>94025</postalcode>" +
  "<placename>Menlo Park</placename>" +
  "<adminCode2>081</adminCode2>" +
  "<adminName2>San Mateo</adminName2>" +
  "<adminCode1>CA</adminCode1>" +
  "<adminName1>California</adminName1>" +
  "<countryCode>US</countryCode>" +
  "</address>";

if (window.DOMParser) {
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(txt, "text/xml");
} else // Internet Explorer
{
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(txt);
}


console.log(xmlDoc.getElementsByTagName("streetNumber")[0].childNodes[0].nodeValue);
console.log(xmlDoc.getElementsByTagName("postalcode")[0].childNodes[0].nodeValue);

http://jsfiddle.net/ub4mL80s/

http://jsfiddle.net/nm9yd0xz/1/

1 回复 | 直到 7 年前

1

2

CertainPerformance 7 年前

innerHTML 可以在 txt :

const txt = `
 <address>
 <street>Roble Ave</street>
 ...
 </address>
 <img src="nosrc" onerror="alert('evil');">
 `;

const d = document.createElement('div')
d.innerHTML = txt

// navigate through d

文本 DOMParser 更安全,因为它没有这个漏洞。

还请注意,您可以大大简化

d.getElementsByTagName("streetNumber")[0].childNodes[0].nodeValue

到

d.querySelector('streetNumber').textContent