DOMとは何ですか Selenium WebDriver: 構造、完全な形式

DOMとは何ですか Selenium ウェブドライバー？

DOM in Selenium WebDriverはHTML5を使用したWeb開発に不可欠なコンポーネントであり、 Javaスクリプト。DOMの完全な形式は、ドキュメントオブジェクトモデルです。DOMはコンピュータサイエンスの概念ではありません。Web開発者の間で標準化された、HTMLまたはXMLのドキュメントにアクセスして操作するためのシンプルなインターフェイスのセットです。 Java脚本。

これらの標準は、開発者が実装の詳細を気にせずにウェブページを構築するのに役立ちます。これらのインターフェースの標準化に関与している組織には、Mozilla、Appleなどがあります。 Microsoft、Google、Adobe など。ただし、標準を形式化して発行するのは W3C です。ここを参照 (https://dom.spec.whatwg.org/).

このチュートリアルでは、HTML文書構造の基本的な概念と、それを操作する方法について説明します。 Javaスクリプト。このチュートリアルでは、次のトピックについて説明します。

DOM 構造を理解する
DOM のコンポーネント Selenium
DOM でのデバッグ
DOM Events
DOM でのトラブルシューティング

DOM 構造を理解する

スクリプトを使用するウェブサイトを構築する場合は、DOM構造を理解する必要があります。 Javaスクリプト。ウェブサイトで以下の複雑なタスクのいずれかまたはすべてを実行する場合、DOM を理解することはさらに重要になります。

ユーザーのポートフォリオ内のすべての株式の現在価格など、ページ全体を更新せずに継続的に更新されるコンテンツの開発
コンテンツを動的に追加または変更するなどの高度なユーザーインタラクションの開発 (ポートフォリオにさらに多くの株式を追加する機能など)
ユーザーがカスタマイズ可能なコンテンツの開発 - 投資信託のポートフォリオが株式のポートフォリオの前に表示されるようにレイアウトを変更する機能など
ウェブサイトでレスポンシブコンテンツを開発し、iPhone、デスクトップ、タブレットなどのさまざまなメディア画面にウェブサイトを自動的に適応させます。

基本的な HTML ページ

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

ブラウザの DOM パーサーにはどのように見えるのでしょうか?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

body要素にどうやってアクセスするのでしょうか？

<script>
    var body = window.document.body;
</script>

「ハローワールド」ってなんて言うの？

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

最終的に HTML ファイル全体は次のようになります。

店は開いています Windows メモ帳に次の内容を貼り付けます。次に、ファイルを「MyFileNewFile.html」として保存します (ファイル名が .html で終わることを確認してください)。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

最後に、任意のブラウザを使用してファイルを開くと、「Hello World!」が表示されます。

DOM のコンポーネント Selenium

DOM の主なコンポーネントは次のとおりです。 Selenium ウェブドライバー:

ウィンドウ
ドキュメント
素子

ウィンドウ

Window は、DOM 内のドキュメントオブジェクトを含むオブジェクトです。それはすべての上に座っています。

指定されたドキュメントからウィンドウオブジェクトにアクセスするには

<script>
      var window = document.defaultView;
</script>

タブ環境では、各タブに独自のウィンドウオブジェクトがあります。ただし、window.resizeTo や window.resizeBy などのイベントをキャッチして実装したい場合、これらのイベントはタブだけに適用されるのではなく、ウィンドウ全体に適用されます。

DOM の Window オブジェクトのプロパティ

window.localStorage – ブラウザのローカルストレージへのアクセスを許可します。ローカルストレージは、セッションのデータの保存と取得に使用できます。

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

ウィンドウオープナー – このウィンドウを開いたウィンドウオブジェクトへの参照を取得します (リンクをクリックするか、window.open メソッドを使用します)。

Windowオブジェクトの便利なメソッド

window.alert() – メッセージを含む警告ダイアログを表示します。

<script>
		window.alert('say hello');
</script>

window オブジェクトが公開する便利なイベントが多数あります。詳細トピックの「イベント」セクションで説明します。

ドキュメント

ドキュメントは DOM ツリーの始まりを示します。ドキュメントは DOM の最初のノードです。これにはいくつかのメソッドとプロパティがあり、そのスコープは URL、getElementById、querySelector などのドキュメント全体に適用されます。

DOM のドキュメントオブジェクトのプロパティ

Document.documentURI および ドキュメント.URL – どちらもドキュメントの現在の場所を返します。ただし、ドキュメントのタイプが HTML Document.URL ではない場合は、機能しません。

Document.activeElement – このメソッドは、DOM 内のフォーカスされている要素を返します。つまり、ユーザーがテキストボックスに入力している場合、Document.activeElement はそのテキストボックスへの参照を返します。

ドキュメントのタイトル – これは、特定のドキュメントのタイトルを読み取ったり、設定したりするために使用されます。

Document オブジェクトの便利なメソッド

Document.getElementById(文字列ID) – これは、DOM 操作において最も関連性が高く、有用な方法です。DOM ツリー内の要素を一意の識別子を使用して検索するために使用されます。検索では大文字と小文字が区別されます。つまり、次の例では「「 ” 要素は、IntroDiv や introdiv や iNtrodiv などの単語を使用して検索することはできません。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(文字列セレクター) – これは、CSS セレクターのルールに基づいてもう XNUMX つの要素を選択するために広く使用されているもう XNUMX つの方法です (jQuery の $ 表記法に精通している場合は、それ自体がこのメソッドを使用します)。 CSS セレクターについてはあまり詳しく説明しません。 CSS セレクターは、(セレクタールールに基づいて) 同様の要素のリストを取得できる一連のルールです。このメソッドは以前「Hello World」セクションで使用しました。

素子

要素は、ドキュメントの DOM ツリー内のノードによって表される任意のオブジェクトです。いつものように、Element オブジェクト自体は、ブラウザと HTML ドキュメント間のプロパティ、メソッド、イベントの単なる契約です。 HTMLElement、SVGElement、XULElement などの特別な種類の要素があります。このチュートリアルでは HTMLElement のみに焦点を当てます。

DOM の要素オブジェクトのプロパティ

要素.id – このプロパティは、HTML 要素の「ID」（一意の識別子）を設定または読み取るために使用できます。 ID は、DOM ツリー内の要素間で一意である必要があります。前述したように、ID は DOM ツリー内の特定の Element オブジェクトを選択するために Document.getElementById メソッドでも使用されます。

HTMLElement.contentEditable – 要素の contentEditable プロパティは、その要素のコンテンツが編集可能/変更可能かどうかを決定します。このプロパティは、以下のスクリプトに示すように設定できます。このプロパティは、特定の要素が編集可能かどうかを判断するためにも使用できます。任意の HTML 本文内で次のスクリプトを試してみれば、本文の任意のコンテンツを編集できることがわかります。

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML は、要素内の HTML コンテンツにアクセスするために使用するもう 1 つの重要なプロパティです。要素の新しい HTML コンテンツを設定するためにも使用されます。データフィールドのコンテンツの設定/変更に広く使用されています。たとえば、Web ページでムンバイ市の気温を 1 時間ごとに更新する場合は、次の例のスクリプトを 1 時間ごとに実行します。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

要素オブジェクトの便利なメソッド

HTMLElement.blur() & HTMLElement.focus() – blur メソッドと focus メソッドは、それぞれ HTML 要素からフォーカスを削除したり、HTML 要素にフォーカスを当てたりするために使用されます。これらのメソッドは、データ入力 Web ページのテキストボックス間でカーソルのフォーカスを移動するために最も広く使用されています。

Element.querySelectorAll – このメソッドは、すでに説明したドキュメントオブジェクトの querySelector メソッドに似ています。ただし、このメソッドでは、要素自体の子孫内での検索が制限されます。

DOM でのデバッグ

の開発者ツール Google Chrome、Mozilla Firefox, Internet Explorer (10 以降) または Safari を使用すると、ブラウザ内で簡単にデバッグできます。異なるブラウザでは同じ HTML マークアップが異なる方法で解釈されることがあります。その場合、デバッグは、特定のブラウザの DOM エンジンによって解釈された DOM を検査するのに役立ちます。

ここで、温度値を 26 から変更したいとします。^o32にC^o最後の例では C です。そのためにいくつかの簡単な手順を実行します。ここに示されているスクリーンショットは Mozilla のものです。 Firefox– ただし、他のすべてのブラウザでも手順は同じです。

ブラウザを使用して MyFileNewFile.html (または上記のチュートリアルで HTML ファイルに指定した名前) を開きます。
マウスを使用して温度値 26 を右クリックします。^oC をクリックし、「要素を検査」をクリックします。
「要素の検査」を選択した要素がブラウザで強調表示されていることに注目してください (デバッガーウィンドウは通常、画面の下部に表示されます)。
要素の横にある傾いた三角形をクリックして要素を開きます
編集したいものを選択してダブルクリックします。テキストを変更するオプションが表示されます。下のアニメーション画像の指示に従ってください。
HTML ページのコンテンツが変化していることに注目してください。ここでデバッグウィンドウを閉じても構いません。

変更はこのセッションでのみ保持されることに注意してください。ページをリロードまたは更新すると (F5 キーを押すと)、変更はすぐに元に戻ります。これは、実際の HTML ソースを変更したのではなく、ブラウザのローカル解釈を変更しただけであることを示します。

楽しい練習として、次のことをやってみてください。 www.facebook.com ブラウザでデバッガーツールを使用して次の結果を取得します。「Facebook をハッキングしました」と表示されることに注意してください。

DOM でのデバッグプロセス

DOM Events

DOM のイベントとは何ですか?

イベントは、ユーザーがトリガーした (またはブラウザーページのライフサイクルがトリガーした) インシデントがメッセージとしてブロードキャストされるプログラミングモデルです。たとえば、ページの読み込みが完了すると window.load イベントがトリガーされ、同様にユーザーがボタンをクリックすると window.load イベントがトリガーされます。要素のクリックイベントがトリガーされます。

これらのメッセージは、何者かによって傍受される可能性があります。 Javaスクリプトコードを実行すると、開発者が定義したアクションを実行できます。たとえば、ユーザーがボタンをクリックしたときにのみ Web ページ上の数字を更新したいとします。これは、次のいずれかの方法で実現できます。

HTML要素のonclickイベントにアクションを割り当てる
addEventListener メソッドを使用してクリックイベントにアクションを割り当てる

方法1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

方法2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

DOM でのトラブルシューティング

Q. 要素が存在するかどうかを確認するにはどうすればよいですか?

A. いずれかのセレクターを使用して要素を検索し、返された要素が null かどうかを確認してください。以下の例を参照してください –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

Q. TypeError が表示されます: document.getElementByID は関数ではありません…

A. メソッド名が API メソッドと正確に一致していることを確認してください。上の質問と同様に、これは getElementByID ではなく getElementById です。

Q.children と childNodes の違いは何ですか?

A. children メソッドは、呼び出し要素内のすべての要素のコレクションを取得します。返されるコレクションは HTMLCollection 型です。ただし、childNodes メソッドは、呼び出し要素内のすべてのノードのコレクションを取得します。次のスクリプトを例に追加して、違いを確認してください。

childNodes メソッドは 14 個の項目を返します

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Children メソッドは 7 つの項目だけを返しますが、

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

Q. 「Uncaught TypeError: Cannot read property 'innerHTML' of unknown…」というメッセージが表示されます。

A. innerHTML プロパティを呼び出す HTMLElement のインスタンスが、初期宣言後に設定されていることを確認してください。このエラーは通常、次のシナリオで発生します。次のコードブロックでエラーを回避する方法を確認してください...

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

まとめ

このチュートリアルでは、DOM とは何か、そしてそれが動的 Web ページを構築するために理解することがどのように重要な概念であるかを学びました。
Window、Document、Element などの DOM 要素の種類についても触れました。
それぞれの種類で利用できるいくつかの便利な DOM メソッドとプロパティを学びました。
私たちは、ほとんどのブラウザーが、インターネット上で利用可能な Web ページを操作するための開発者ツールをどのように提供しているかを確認しました。これにより、私たち自身の Web サイトの問題をデバッグして解決する方法を学びました。
DOM イベントのメカニズムについても簡単に触れました。
最後に、DOM のいくつかのトラブルシューティング項目について説明しました。
インターネットには DOM 上のリソースが溢れています。最良かつ最新の参考資料の XNUMX つは、Mozilla の開発者ネットワークで入手できます。見る - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model