Question

我尝试在特定的深度级别提取HTML页面上标记和与queryselectorAll之间的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>：这将举例说明以上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结构）？

反之，如果我只想在第一个深度级别选择，即在我的例子中：

<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树结构中

1 个答案: