electron getElementsByClassNameにアクセス

electronでmysqlのデータをtableタグに一覧を表示するアプリを作成しています。
tableタグに表示したIDをクリックしてそのIDに関する情報を別のウインドウに表示したいです。

そこでgetElementsByClassNameでクラス名testをもつtdタグを取得したいのですが

javascript
1console.log(elements);

とするとコンソールに**HTMLCollection[4]**と表示されます。
しかし

javascript
1console.log(elements[0]);
2

とするとundefinedと表示されて取得できません。
変数のスコープが原因と思っているのですが解決できず質問させていただきました。
ご教授よろしくお願いします。

コードは下記の通りです。

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Sample</title>
6  <link href="./mystyle.css" rel="stylesheet" type="text/css">
7</head>
8<body>
9  
10<table id="testtable">
11
12</table>
13
14
15<script type="text/javascript"> 
16  //mysqltest
17let mysql = require('mysql');
18let connection = mysql.createConnection({
19  host     : 'localhost',
20  user     : 'root',
21  password : 'admin',
22  database : 'mysample'
23});
24connection.connect();
25connection.query('SELECT * FROM person;', function(err, rows, fields) {
26  if (err) throw err;
27
28  var tb = document.getElementById('testtable');
29
30  //tableの見出しの作成
31  var thead = document.createElement('thead');   
32  var tr_th = document.createElement('tr');
33  tb.appendChild(thead);     
34  thead.appendChild(tr_th);
35  for(var count_th = 0; count_th < fields.length; count_th ++){
36      var th = document.createElement('th');
37      tr_th.appendChild(th);
38      th.innerText = fields[count_th].name;
39  }
40
41  //tableの行作成 keyを変数にしたいので[]ブラケット演算子で処理している
42  var tbody = document.createElement('tbody');
43  tb.appendChild(tbody);
44  for (var count_row = 0; count_row < rows.length; count_row ++){
45    var tr_td = document.createElement('tr');
46    tbody.appendChild(tr_td);
47    for (var count_col = 0; count_col < fields.length; count_col ++){
48      var td = document.createElement('td');
49      tr_td.appendChild(td);
50      var col_name = fields[count_col].name;
51      td.innerText =  rows[count_row][col_name];
52      if (count_col == 0){
53        td.classList.add('test');
54      }
55    }
56  }  
57});
58
59connection.end();
60
61var elements = document.getElementsByClassName('test');
62console.log(elements);
63console.log(elements[0]);
64
65
66</script>
67</body>
68
69</html>
70

kei344

2017/04/22 06:01

質問タグが「JAVA」になっています。「JavaScript」の間違いではないでしょうか。

keikei

2017/04/22 06:54

申し訳ありません。訂正致します。

行動規範の内容に同意します

回答1件

ベストアンサー

提示のものであれば結果は下記のようにコンソールに表示されませんか？

HTMLCollection [  ]
undefined

多分下記部分なら取得できると思うのですが、試してみてください。

JavaScript
1connection.query('SELECT * FROM person;', function(err, rows, fields) {
2	/* 略 */
3	var elements = document.getElementsByClassName('test');
4	console.log(elements);
5	console.log(elements[0]);
6});

投稿2017/04/22 07:08

kei344

総合スコア69398

keikei

2017/04/22 07:28

早速の回答ありがとうございます。試した結果表示されたのですが、connection.query();のそとではできないのでしょうか。 kei344様がご指摘のとおり HTMLCollection [ ] undefined と表示されるのであればなんとなく理解できるのですが HTMLCollectionは[4]と表示されるのに添え字で取得できないのがわかりません。もしよろしければ私が示したコードでkei344様が HTMLCollection [ ] undefined となると指摘された理由を教えていただけないでしょうか。よろしくお願い致します。

kei344

2017/04/22 07:36

electronは詳しくありませんが、connection.query は非同期で実行されるはずなので、外側ではまだHTMLの作成が間に合っていない可能性が高いです。実行順としては、下記のようになると思います。 connection.query(); connection.end(); var elements = document.getElementsByClassName('test'); console.log(elements); // コンソールの表示タイミングによるので[4]になるかもしれない console.log(elements[0]); // コールバックの実行がまだ（作られていない）なので、取得はできない connection.queryのコールバック（function(err, rows, fields) {/**/} の部分） JavaScriptでは非同期を前提に考える必要があります。（外側での使い方を非同期前提にする）

keikei

2017/04/22 10:05

詳細な回答ありがとうございました。非同期であることは全く意識していませんでした。 kei344様の回答をヒントに勉強してみます。

行動規範の内容に同意します