外部HTMLファイルをDOMツリーとして読み取る方法は？

Question

data.htmlファイルは以下のように単純です。

<table id="test"> 
<tr> 
<td>f1</td> 
<td>f2</td> 
</tr> 
<tr> 
<td>y</td> 
<td>70</td> 
</tr> 
</table> 

私はそれをFileReaderで読むことができます。

 
function readAsText(){ 
 
    var file = document.getElementById("file").files[0]; 
 
    var reader = new FileReader(); 
 
    reader.readAsText(file); 
 
    reader.onload=function(){ 
 
     _table=this.result; 
 
     alert(_table); 
 
    } 
 
} 
 

<p> 
 
    <label>to select a file</label> 
 
    <input type="file" id="file" /> 
 
    <input type="button" value="read as text" onclick="readAsText()" /> 
 
</p>

Data.HTMLには、DOMツリーとしてそれを読み込む方法を、テキストファイルではないDOMツリーとして読み取ることができますか？
data.htmlファイルの行番号を取得するにはどうすればよいですか？
_table.rows.length _tableがdomツリーではないため行番号を取得できません。操作するDOMツリーに変更することはできますか？

 _table=this.result; 
     alert(_table.rows.length); 

Answer 1

DOMParser APIだけではない：

var markup = '<table id="test">'+ 
 
'<tr>'+ 
 
'<td>f1</td>'+ 
 
'<td>f2</td>'+ 
 
'</tr>'+ 
 
'<tr>'+ 
 
'<td>y</td>'+ 
 
'<td>70</td>'+ 
 
'</tr>'+ 
 
'</table>'; 
 

 
var parsedDoc = new DOMParser().parseFromString(markup, 'text/html'); 
 
console.log('number of rows:', parsedDoc.getElementById('test').rows.length) 
 

 
console.log('textContent of the fourth td:',parsedDoc.querySelectorAll('td')[3].textContent);

Answer 2

jquery loadメソッドを使用してください。

$('#someDivId').load('some-file.html'); 

jQuery load