1

同様の質問がたくさんありますが、これに対する答えを見つけることができませんでした。

次のような HTML ページがあるとします。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Page title</title>
    </head>
    <body>
        <div id="content">
            <table>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                </tr>
            </table>
        </div>
    </body>
</html>

親の最初の子であるページ上の 2 番目の要素を選択します<td>。この場合、それは要素<td>D</td>です。

この文言はそのままにしておく必要があることに注意してください。たとえば、2 番目の子を選択して<tr>から最初の子を選択するのと同じではありません (結果は同じ要素になります)。このアプローチはそこでは機能しません。

私がこれまでに行ったこと：

CSS セレクター が私と#content td:first-childを見つけ、JS ( ) または Java (最終的にこれらの要素を操作している場所)を介して 2 番目の要素を選択できるようになりました。ただし、セレクターを介して実行できることに対して追加のコードを使用することは、まったく一貫性がありません。ADdocument.querySelectorAll("query")[1]

同様に、XPath 式:を使用できますid('content')//td[1]。上記の CSS セレクターと同等です。ノードセットを返すので、思い通りにid('content')//td[1][2]動作すると思いましたが、うまくいきませんでした。

しばらくすると、( id('content')//td[1] )[2]自分のやりたいように仕事をしていることに気付きました。

それでも、自分の要素を取得するための単一のクエリを実行できなかったことがわかったのはがっかりしたため、アカデミックな質問が用意されています。CSS セレクターまたは XPath 式のいずれかを使用して、他に解決策はありますか?私の質問？私は何を取りこぼしたか？それはできますか？

4

2 に答える 2

2

CSS セレクターは現在、グローバルに一致する要素のセットで n 番目の要素、または DOM 全体で n 番目に出現する要素を選択する方法を提供していません。セレクター 3とセレクター 4の両方によって提供される構造的:nth-*()機能疑似クラスはすべて、DOM 全体の n 番目の要素ではなく、条件に一致する親の n 番目の子によってカウントされます。

現在のセレクターの構文では、「これは DOM 内の一連の一致する要素の n 番目です」と直感的に言う方法がありません。セレクター 4 でさえ:nth-match()、:nth-last-match()現在の状態ではかなりぎこちない構文を持っています。それは確かに失望です。

XPath に関しては(id('content')//td[1])[2]、使用する式は既にわかっているように です。外側()は単に、「この部分式全体を[2]述語の前に評価する必要がある」または「[2]述語は、 だけでなく、この部分式全体の結果を操作する必要がある」ことを意味し//td[1]ます。それらがなければ、式td[1][2]はまとめて扱われ、2 つの競合する述語が一緒に機能することはありません (同じ要素を最初と 2 番目の両方にすることはできません!)。

部分式を括弧で囲んでも、それ自体が余分なクエリになるわけではありません。id('content')もしそうなら、 、//td、[1]および「クエリ」のそれぞれを、暗黙の（またはオプションの）括弧[2]を付けて、それ自体で考えることができます。そして、それは多くのクエリです:)

于 2013-01-18T15:02:52.057 に答える
1

次の単純な XPath 式を使用します。

(//td[1])[2]

XSLT ベースの検証:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

 <xsl:template match="node()|@*">
     <xsl:copy-of select="(//td[1])[2]"/>
 </xsl:template>
</xsl:stylesheet>

この変換が提供された XML ドキュメントに適用されると、次のようになります。

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Page title</title>
    </head>
    <body>
        <div id="content">
            <table>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                </tr>
            </table>
        </div>
    </body>
</html>

XPath 式が評価され、この評価の結果が出力にコピーされます。

<td>D</td>
于 2013-01-18T19:40:34.520 に答える