1

親ノードを介して、DOM 階層ノード構造を使用して要素にアクセスしたいと考えています。要素にアクセスするには、（ ではなく）の<parent_node1>.<child_node1>.<child_node2>ような ものが必要です。document.getElementByIDgetElementbyname

列ヘッダーと対応する値があるなどのシナリオを自動化したい。各列ヘッダーの下にある値が正しいかどうかをテストしたい...

このケースを自動化する方法としてDOMを使用することを考えています...しかし、どうすればDOM階層を見つけることができますか...?

Firebug の Inspect Element で見られるのは、イベントのリスト、要素のようなものであり、階層ノード構造のようには見えません...この点で誰か助けてもらえますか?

4

2 に答える 2

1

document.getElementByIdDOMを使用していますdocument.getElementByTagname 。それらはDOM内のオブジェクト（具体的にはドキュメントオブジェクトですが、要素の両方を呼び出すこともできます）を取り、それぞれ単一の要素または0個以上の要素のコレクションであるオブジェクトを返します。これはDOM操作です。そこから、子、親、兄弟の取得、値の変更など、結果に対して他のDOM操作を実行できます。

すべてのDOM操作は次のようになります。

  1. 出発点を取ります。これはよくあることdocumentですが、私たちが最初に行うことは、電話をかけるdocument.getElementByIdかdocument.getElementByTagname、結果から作業することであり、それが出発点であると本当に考えることができます。
  2. startingPoint.getElementById*を介して、またはstartingPoing.getElementByTagnameおそらくいくつかのテストと組み合わせて（たとえばclassname、特定のタイプの子がある場合は、特定の要素でのみ作業するなど）、開始点に関連して、関心のある1つまたは複数の要素を見つけます。
  3. 特定の値を読み取ったり変更したり、新しい子ノードを追加したり、ノードを削除したりします。

document.getElementById(someID)あなたのような場合、開始点は、、、または同様のものによって検出された1つ以上のテーブルになりますdocument.getElementById(someID).getElementsByTagname('table')[0]。その表からmyTable.getElementsByTagname('th')、列見出しを取得します。構造とそれを使って何をしているのかに応じて、各行から対応する要素を選択するmyTable.getElementsByTagname('td')か、各行を調べてから作業することができますcurRow.getElementsByTagname('td')。firstChild、などを使用することもできますが、childNodes通常は、気にしない要素をタグ名で除外する方が便利です。

*ドキュメント内に指定されたIDを持つ要素は1つしか存在できないため、ドキュメント階層の上位の要素で呼び出された場合、これは同じものを返します。したがって、通常はこれをで呼び出しますdocument。要素が現在の要素の子孫である場合に何かを実行したい場合は、要素に対してそれを呼び出すと便利です。それ以外の場合はそうではありません。

于 2012-08-07T13:23:59.790 に答える
1

議論したように、あなたはおそらくそのDOM Element propertiesような element.childNodes、element.firstChildまたは類似したものを意味します.

JavaScriptKitのDOM Element プロパティ リファレンスを参照すると、階層にアクセスする方法の概要がよくわかります。

var currentTD = document.getElementsByTagName("td")[0];
var currentTable = document.getElementsByTagName("table")[0];

currentTD.parentNode // contains the TR element the TD resides in.
currentTable.childNodes // contains THEAD TBODY and TFOOT if present.

DOM テーブルには、rowsコレクションやコレクションなど、さらに多くのプロパティcellsがあります。

注意事項: これらのコレクションはライブ コレクションであるためcollection.length、長さを取得するために毎回 DOM を照会する必要があるため、それらの反復処理と各反復でのアクセスが非常に遅くなる可能性があることに注意してください。

于 2012-08-07T13:33:54.603 に答える