複数の要素にアクセスする

説明

Dart言語で複数の要素にアクセスするにはquerySelectorAll()で操作したいDOM要素のCSSクラス名を指定します。CSSクラス名は要素のclass属性で指定された名前になります。querySelectorAll()は複数の要素をリスト（配列）として返します。

[サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample1</title>
<link rel="stylesheet" href="sample1.css">
</head>
<body>
<h1>Sample1</h1>
<p class="para">Dart言語</p>
<p class="para">Dart lang</p>
<p class="para">Angular Dart</p>
<script type="application/dart" src="sample1.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>

Dartコード

import 'dart:html';

void main() {
	var p = querySelectorAll(".para");
	for(var i=0; i<p.length; i++){
		p[i].style.color = "red";
	}
}