プログラム学習室 http://studyhallweb.com/

Dart言語: HTML要素へのアクセス

HTML要素へのアクセスの方法

querySelector() で 特定の要素にアクセスすることが出来ます。
CSSのセレクタと同様に選択対象を指定することができます。

それぞれのボタンをクリックして、どれが選択されるか確認できます。
querySelector()で、複数のタグが該当する場合は一つ目に要素が選択されます。
すべての該当する要素を処理するには、querySelectorAll()を使う必要があります。


pタグ

pタグ id="id1"

pタグ id="id2" class="class1"

pタグ id="id3" class="class1"

HTML

<input type="button" id="tag" value="querySelector('p')">
<input type="button" id="id" value="querySelector('#id1')">
<input type="button" id="class" value="querySelector('.class1')">
<input type="button" id="classAll" value="querySelectorAll('.class1')">
<input type="button" id="tags" value="reset">
<br/>
<p>pタグ</p>
<p id="id1">pタグ id="id1"</p>
<p id="id2" class="class1">pタグ id="id2" class="class1"</p>
<p id="id3" class="class1">pタグ id="id3" class="class1"</p>
				

Dart

import 'dart:html';
const DEBUG = 1;

class page003 {
  // 色指定フラグ
  Map<String, bool> _color = {
    'tag'     : false,
    'id'      : false,
    'class'   : false,
    'classAll': false,
  };
  page003() {
    // 各ボタンの設定
    querySelector('#tag').onClick.listen((e)=>_tag());
    querySelector('#id').onClick.listen((e)=>_id());
    querySelector('#class').onClick.listen((e)=>_class());
    querySelector('#classAll').onClick.listen((e)=>_classAll());
    querySelector('#tags').onClick.listen((e)=>_tags());
  }
  // 以下、各ボタン毎のアクション (色を変える)
  // コードを読みやすくするために、あえて色とMapキーはハードコーディング
  void _tag() {
    Element tag = querySelector('p');
    if (_color['tag']) {
      tag.style.color = 'black';
      _color['tag'] = false;
    } else {
      tag.style.color = 'red';
      _color['tag'] = true;
    }
  }
  void _id() {
    Element tag = querySelector('#id1');
    if (_color['id']) {
      tag.style.color = 'black';
      _color['id'] = false;
    } else {
      tag.style.color = 'blue';
      _color['id'] = true;
    }
  }
  void _class() {
    Element tag = querySelector('.class1');
    if (_color['class']) {
      _color['class'] = false;
      // classAll と連動させるため、offの時の色を classAll にあわせる
      _color['classAll']? tag.style.color = 'cyan': tag.style.color = 'black';
    } else {
      tag.style.color = 'orange';
      _color['class'] = true;
    }
  }
  void _classAll() {
    ElementList tag = querySelectorAll('.class1');
    if (_color['classAll']) {
      tag.style.color = 'black';
      _color['classAll'] = false;
      _color['class'] = false;    // 単独の class も同時に off にする
    } else {
      tag.style.color = 'cyan';
      _color['classAll'] = true;
    }
  }
  void _tags() {
    ElementList tag = querySelectorAll('p');
    tag.style.color = 'black';
    _color.forEach((String s, bool b) {
      _color[s] = false;
      if (DEBUG == 1); print('$s = ' + _color[s].toString());
    });
  }
}

void main() {
  page003 c = new page003();
}