2

HTML DOM に問題があります。

このパスから値を取得するにはどうすればよいですか:

html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td

getElementbyID/tag/name/classなどしか見つかりません。

要素の絶対 DOM 'パス' を取得するにはどうすればよいですかtd(そのテーブルの 2 行目の 3 番目のセルとしましょう)。私はいたるところを見てきましたが、ID/クラスなどが関係していないと簡単な答えを見つけることができません。

4

4 に答える 4

3

querySelector（）を使用することもできますが、優れたサポートはありません...

var elem = document.querySelector('html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td');

それ以外の場合は、jQueryなどのCSSセレクターを使用できるライブラリを使用してください。

var $elem = $('html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td');

ちなみに、このように選択するとパフォーマンスが悪くなります。絶対にひどい。理由については、 CSSセレクターをお読みください。

于 2012-12-15T19:45:17.247 に答える
0

まず、絶対パスが本当に必要かどうかを検討してください。ID またはクラスの参照は、可動部分が少ないため、より堅牢です。

完全なパスが必要な場合は、XPath を使用することをお勧めします。これは、パスで要素を検索するために特別に設計されているためです。

簡単なクロス ブラウザ XPath ライブラリを次に示します。他にも多数あります。

于 2012-12-15T20:37:36.150 に答える
0

次のようなものが必要なようです。

次のサンプル HTML では、

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="findit.js"></script>
  </head>
  <body>
    <div id="header">
      <h1>Welcome to my ASP.net site!</h1>
    </div>
    <div id="h440292">
      <table>
        <!-- tbody omitted, but some (all?) browsers add it -->
        <tr>
          <td>junk</td>
          <td>junk</td>
          <td>junk</td>
        </tr>
        <tr>
          <td>junk</td>
          <td>junk</td>
          <td>pick me!</td>
        </tr>
      </table>
    </div>
  </body>
</html>

この jQuery コードは、「pick me!」というセルを見つけます。

$(function () {
    var $resultCell = $("body")
        .children("div").eq(1)
        .children("table")

        // Note I have to add this even though
        // I omitted the tbody in the HTML markup
        .children("tbody") 
        .children("tr").eq(1)
        .children("td").eq(2);
    alert($resultCell.text());
});

パフォーマンスが問題になる場合は、ネイティブ DOM メソッドを使用して同様のことを行う必要がある場合があります。

于 2012-12-15T21:14:11.100 に答える
0

私はこの考えで遊んでいます。ページ上の任意のノードを検索できるようにしたい (ヘッドレス ブラウザを使用)。絶対ノード パスを構築しようとすると、再帰関数を作成して動作しますが、完全に一意ではないことがわかり、面倒です。たとえば、ここでは各投稿がテンプレート化されているため、3 番目の応答でテキストを選択すると、最初の投稿と同じ HTML タグのノード パスが表示されます。

const buildPath = (node) => {
  console.log(node);
  if(node.tagName !== "HTML") {
    path.unshift(node.tagName.toLowerCase())
    buildPath(node.parentNode)
  }
};
const path = [];
builtPath(<start node>);
document.querySelector(path.join(" "))

しかし、これは私が今立ち往生しているところです。追加する特定のクラス、名前、または ID を持たないものもあります。innertext または innerhtml をキャプチャして、一致させる必要がある場合があります。ちょっと面倒。D3 のように読み込み、増分 ID をデータとして挿入することはできると思いますが、サイトはまったく変更できません。これはこの方法にも当てはまりますが、そうではないと思います。

于 2021-07-27T20:46:54.180 に答える