2017-06-25 3 views
0

私はこのbooks.xmlファイルをW3Schoolsからダウンロードしました。下のコード(with instructions from W3Schools)で解析しましたが、タイトルタグは解析されたコードには表示されません。私はあまりにも結果に表示されるタイトルタグを取得するにはどうすればよいXMLHttpRequestでこのXML文書からタイトルタグを表示しないのはなぜですか?

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <!-- Required meta tags always come first --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <title></title> 
 
</head> 
 
<body> 
 

 
    <p id="demo"></p> 
 

 
<script> 
 
var xhttp = new XMLHttpRequest(); 
 
xhttp.onreadystatechange = function() { 
 
    if (this.readyState == 4 && this.status == 200) { 
 
    document.getElementById("demo").innerHTML = 
 
    this.responseText; 
 
    console.log("Up to this line works."); 
 
    } 
 
}; 
 
xhttp.open("GET", "books.xml", true); 
 
xhttp.send(); 
 
</script> 
 
</body> 
 
</html>

+0

[W3Schoolsはこれまでよりも優れていますが、悪い習慣やセキュリティ上の問題が残っています。それは避けるのが最善です。](http://www.w3fools.com/)。 – Quentin

答えて

1

XMLをHTMLとして扱うようブラウザに指示していますが、そうではありません。

XMLの要素の大半はHTMLには存在しないため、エラーリカバリではデフォルトのスタイリングで文書に貼り付けられます。

HTMLには<title>要素があります。デフォルトのブックマーク名を制御し、ブラウザのタイトルバーに表示され、タブのラベル付けに使用されます(これはブラウザによって異なる場合があります)。 <title>要素はドキュメントにレンダリングされないため、デフォルトスタイルはdisplay: noneです。あなたが望んでいた場合、それが表示することを変更するにはCSSを記述する必要があります

var style = window.getComputedStyle(document.querySelector("div title")); 
 
console.log(style.getPropertyValue("display"));
<div>This is an invalid <title>title</title> element.</div>

より良い方法は、XMLからデータを読み取り、実際のセマンティックHTMLを生成することです。

関連する問題