如何将外部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