Dartプログラミング-HTML DOM

すべてのWebページは、オブジェクトと見なすことができるブラウザーウィンドウ内にあります。

ドキュメントオブジェクト*は、そのウィンドウに表示されるHTMLドキュメントを表します。 Documentオブジェクトには、ドキュメントコンテンツへのアクセスとドキュメントコンテンツの変更を許可する他のオブジェクトを参照するさまざまなプロパティがあります。

ドキュメントのコンテンツにアクセスして変更する方法は、ドキュメントオブジェクトモデル*または *DOM と呼ばれます。オブジェクトは階層構造になっています。この階層構造は、Webドキュメント内のオブジェクトの組織に適用されます。

Window -階層のトップ。オブジェクト階層の最も外側の要素です。
ドキュメント-ウィンドウにロードされる各HTMLドキュメントはドキュメントオブジェクトになります。ドキュメントにはページのコンテンツが含まれています。
要素-Webページのコンテンツを表します。例には、テキストボックス、ページタイトルなどが含まれます。
ノード-多くの場合要素ですが、属性、テキスト、コメント、その他のDOMタイプも可能です。

ここにいくつかの重要なDOMオブジェクトの単純な階層があります-

Dartは、DOMのオブジェクトと要素を操作するための dart：html ライブラリを提供します。コンソールベースのアプリケーションは、 dart：html ライブラリを使用できません。 WebアプリケーションでHTMLライブラリを使用するには、 dart：html をインポートします-

import 'dart:html';

次のセクションでは、* DOM操作*について説明します。

DOM要素の検索

*dart：html* ライブラリーは、DOM内の要素を検索するための *querySelector* 関数を提供します。

Element querySelector(String selectors);

querySelector（）関数は、セレクターの指定されたグループに一致する最初の要素を返します。 *"selectors は、以下に示すCSSセレクター構文を使用した文字列でなければなりません

var element1 = document.querySelector('.className');
var element2 = document.querySelector('#id');

例：DOMの操作

Webstorm IDEで、以下の手順に従ってください-

ステップ1 *-ファイルNewProject→場所で、プロジェクト名を *DemoWebApp として指定します。

Demowebapp

ステップ1 *-「サンプルコンテンツの生成」セクションで、 *SimpleWebApplication を選択します。

作成

サンプルプロジェクト DemoWebApp が作成されます。ダウンロードする必要がある依存関係を含む pubspec.yaml ファイルがあります。

name: 'DemoWebApp'
version: 0.0.1
description: An absolute bare-bones web app.

#author: Your Name <[email protected]>
#homepage: https://www.example.com
environment:
   sdk: '>=1.0.0 <2.0.0'
dependencies:
   browser: '>=0.10.0 <0.11.0'   dart_to_js_script_rewriter: '^1.0.1'
transformers:
- dart_to_js_script_rewriter

Webに接続している場合、これらは自動的にダウンロードされます。そうでない場合は、 pubspec.yaml を右クリックして依存関係を取得できます。

Pub Get Dependencies

webフォルダーには、 Indexl、main.dart 、 style.css の3つのファイルがあります。

インデクス

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <meta name = "scaffolded-by" content = "https://github.com/google/stagehand">
      <title>DemoWebApp</title>
      <link rel = "stylesheet" href = "styles.css">
      <script defer src = "main.dart" type = "application/dart"></script>
      <script defer src = "packages/browser/dart.js"></script>
   </head>

   <body>
      <h1>
         <div id = "output"></div>
      </h1>
   </body>
</html>

Main.dart

import 'dart:html';
void main() {
   querySelector('#output').text = 'Your Dart web dom app is running!!!.';
}

*indexl* ファイルを実行します。画面に次の出力が表示されます。

デモWebアプリ

イベント処理

*dart：html* ライブラリは、DOM要素の *onClick* イベントを提供します。 この構文は、要素がクリックイベントのストリームをどのように処理できるかを示しています。

querySelector('#Id').onClick.listen(eventHanlderFunction);

querySelector（）関数は、指定されたDOMから要素を返し、 onClick.listen（）は、クリックイベントが発生したときに呼び出される *eventHandler メソッドを取ります。 eventHandler の構文は以下のとおりです-

void eventHanlderFunction (MouseEvent event){ }

次に、Dartのイベント処理の概念を理解するための例を取り上げます。

TestEventl

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <meta name = "scaffolded-by" content ="https://github.com/google/stagehand">
      <title>DemoWebApp</title>
      <link rel = "stylesheet" href = "styles.css">
      <script defer src = "TestEvent.dart" type="application/dart"></script>
      <script defer src = "packages/browser/dart.js"></script>
   </head>

   <body>
      <div id = "output"></div>
      <h1>
         <div>
            Enter you name : <input type = "text" id = "txtName">
            <input type = "button" id = "btnWish" value="Wish">
         </div>
      </h1>
      <h2 id = "display"></h2>
   </body>

</html>

TestEvent.dart

import 'dart:html';
void main() {
   querySelector('#btnWish').onClick.listen(wishHandler);
}
void wishHandler(MouseEvent event){
   String name = (querySelector('#txtName')  as InputElement).value;
   querySelector('#display').text = 'Hello Mr.'+ name;
}

出力

Dart-programming-html-dom

目次