将特定深度的 innerHTML 提取到 DOM 树结构中

Question

我尝试在特定深度级别提取标签  和  之间的内部 HTML 文本，在 HTML 上使用 queryselectorAll页。

问题是这些标签出现在 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>.

我想 select 仅  位于的标签 <table class="equation"><tr><td> 和 </td> ：这将以上面的 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命令，如何指定我想要提取好的的深度（DOM结构）？

相反，如果我只想要 select 第一深度级别的 ，即在我的示例中：

<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/

将特定深度的 innerHTML 提取到 DOM 树结构中

extract innerHTML at a specific depth into DOM tree structure

javascript

html

dom