將特定深度的innerHTML提取到DOM樹結構中

Question

我嘗試在特定的深度級別上使用HTML頁面上的queryselectorAll在標簽<span class="MATH">和</span>之間提取innerHTML文本。

問題在於這些標簽在DOM的樹結構中出現的深度不同。 這是HTML頁面的示例：

<span class="MATH"><img width="75" height="37" align="MIDDLE" border="0" src="img1909.gif" alt="$ \mathbf{V_{M}}(M')$"></span> le vecteur <!-- MATH
 $\mathbf{V}(M')$
 -->
<span class="MATH"><img width="59" height="37" align="MIDDLE" border="0" src="img1906.gif" alt="$ \mathbf{V}(M')$"></span> transport&#233; parall&#232;lement au point <span class="MATH"><img width="24" height="17" align="BOTTOM" border="0" src="img232.gif" alt="$ M$"></span>. Le vecteur :</p>

<p></p>
<p></p>
<div align="CENTER" class="mathdisplay"><a name="eq398"></a><!-- MATH
 \begin{equation}
\mathbf{V_{M}}(M')-\mathbf{V}(M)=\text{d}\,\mathbf{V}
\end{equation}
 -->
<table class="equation" cellpadding="0" width="100%" align="CENTER">
<tr valign="MIDDLE">
<td nowrap align="CENTER"><span class="MATH"><img width="169" height="38" align="MIDDLE" border="0" src="img1910.gif" alt="$\displaystyle \mathbf{V_{M}}(M')-\mathbf{V}(M)=$">d<img width="23" height="34" align="MIDDLE" border="0" src="img1911.gif" alt="$\displaystyle \,\mathbf{V}$"></span></td>
<td nowrap class="eqno" width="10" align="RIGHT">
(<span class="arabic">5</span>.<span class="arabic">61</span>)</td></tr>
</table></div>
<br clear="ALL"><p></p>

<p>
est appel&#233; <b>la diff&#233;rentielle absolue du vecteur <!-- MATH
 $\mathbf{V}$
 -->
<span class="MATH"><img width="20" height="17" align="BOTTOM" border="0" src="img835.gif" alt="$ \mathbf{V}$"></span></b>.

我只想選擇位於<table class="equation"><tr><td>和</td> <span class="MATH">標簽：例如，上面的HTML頁面：

 <img width="169" height="38" align="MIDDLE" border="0" src="img1910.gif" alt="$\displaystyle \mathbf{V_{M}}(M')-\mathbf{V}(M)=$">d<img width="23" height="34" align="MIDDLE" border="0" src="img1911.gif" alt="$\displaystyle \,\mathbf{V}$">

為此，我嘗試：

[].forEach.call(document.querySelectorAll('table.equation tr td span.MATH'),function(span_block) {
console.log(span_block.innerHTML); });

但這不起作用。

我也嘗試過：

[].forEach.call(document.querySelectorAll('table.equation >  span.MATH'),function(span_block) {
console.log(span_block.innerHTML); });

但它也失敗了。

使用queryselectorAll命令，如何指定要提取良好的<span class="MATH">的深度（DOM結構的深度）？

相反，如果我只想在第一個深度級別選擇<span class"MATH"> ，即在我的示例中：

<span class="MATH"><img width="75" height="37" align="MIDDLE" border="0" src="img1909.gif" alt="$ \mathbf{V_{M}}(M')$"></span> le vecteur <!-- MATH
     $\mathbf{V}(M')$
     -->
    <span class="MATH"><img width="59" height="37" align="MIDDLE" border="0" src="img1906.gif" alt="$ \mathbf{V}(M')$"></span> transport&#233; parall&#232;lement au point <span class="MATH"><img width="24" height="17" align="BOTTOM" border="0" src="img232.gif" alt="$ M$"></span>

 <span class="MATH"><img width="20" height="17" align="BOTTOM" border="0" src="img835.gif" alt="$ \mathbf{V}$"></span></b>

我該怎么辦？

謝謝

Answer 1

document.querySelectorAll("table.equation tr td span.MATH");

要不就

document.querySelectorAll(".equation .MATH");

應該管用。 您確定在文檔加載后運行代碼嗎？ （把腳本放在html的底部就能解決問題）

http://jsfiddle.net/vt52bauu/3/