属性値やテキストの取得

前回の
DOM操作系　まとめ
の続き

あるHTMLのdivタグの文章を変えたいとなる時の

• 要素ノードを取得
  • 直接取得
  • 文書ツリー間の行き来
  • イベントドリブンモデル
• 属性値やテキストを取得・設定
  • 取得・設定
  • フォームタグ
• ノードを追加・置換・削除

の２つ目、属性値やテキストを取得・設定の部分となります。

属性値やテキストを取得・設定

属性値の取得・設定

ほとんどはHTMLタグの属性値と同じ名前でアクセスできるが、一部違う場合がある。

let link = document.getElementsByTagName('a'); //<a>は1つとする
let url = link.href; //取得
link.href = 'http://www.~~~~~'; //　設定

違う場合のよく使うものでは、「class」でこれに対するDOMプロパティは「className」となります。
他にも、属性とプロパティの名前の違いを意識したく無い場合、getAttribute/setAttributeがある。
上を書き換えると

let url = link.getAttribute('href');
link.setAttribute('href','http://www.~~~~~');

となる。メリットは名前の相違を気にしないことと、（文字列として指定できるので）取得・設定する属性名を、スクリプトから動的に変更出来ることがあり、都度状況に合わせて使い分けると良い。

他にも、全ての要素を取得したい場合は、attributesがある。
これである要素ノードの全ての属性を取得でき、item(i)で番号を指定することで、ある要素だけを取り出すこともできる。

テキストを取得・設定

テキストを取得・設定するにはどちらもinnerHTML/textContentと言うプロパティを使う。両者の違いは
例：<div>にテキスト<a href="~~~">テスト</a>を埋め込む場合

プロパティ	概要
innerHTML	設定の場合：HTMLを認識してくれ、テストに<a>が効いた状態になる。　　　取得の場合：HTMLも合わせて文字列として取得する。
textContent	設定の場合：HTML含む全てをテキストとして認識するので、そのまま文字として埋め込む。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　取得の場合：HTMLタグの中にあるテキストのみ取得する

では、どちらがいいのか？
一般的にはHTMLを埋め込む必要がないならば、textContentを使用する。これは、セキュリティの観点からも注意が必要である。悪意ある他社がインプットなどから入力でき直接タグに渡すなどする場合、innerHTMLだとHTMLを認識してしまい、悪意ある行動をとることができる。このことをクロスサイトスクリプティング（XSS)という脆弱性を持っている。もし使うとしても、直接HTMLを渡さないように注意する。
ただ、「入力値をもとにHTML文字列を組み立てて、ページに反映したい」などの場合、はcreateElement/createTextNodeメソッドを利用する。

各フォーム要素にアクセスする

入力ボックス・選択ボックス

値を取得・変更するには、valueプロパティにアクセスするだけで良い。

チェックボックス・ラジオボックス

値を取得するには、valueプロパティにアクセスするだけではダメ。なぜなら、チェックされているいないに関わらずに値を返すため。チェックスされた値を取得するならば、 if(要素.checked){} のように、チェックされているかどうかを判別して、valueプロパティにアクセスする必要がある。また、初期値にチェックを入れておきたい場合は、同様にここの要素に条件式を当てはめ、　要素.checked = true としてチェックをいれる。

<form>
  <div>
    好きな食べ物は？：
      <label><input type="checkbox" name="food" value="ラーメン" />ラーメン</label>
      <label><input type="checkbox" name="food" value="餃子" />餃子</label>
      <input id="btn" type="button" value="送信" />
  </div>
</form>

document.addEventListener('DOMContentLoaded',function(){
  document.getElementById('btn').addEventListener('click',function(){
    let result = [];
    let foods = document.getElementsByName('food');

for(let i = 0, len = foods.length; i < len; i++){
    let food = foods.item(i);
    if(food.checked){
      result.push(food.value);
      }
    }
  window.alert(result.tiString());
  },false);
},false);

複数選択できるリストボックスの値の取得

取得・選択は入力ボックスなどと考え方は同じで、<select>要素配下の<option>要素群を取得、その後は、for , if(要素.selected)で条件を絞り込んで、要素.valueで値を取得・選択する。
注意はselectedとなっていること。

アップロードされたファイルの情報の取得

　アップロードされたファイルの情報を取得する。
　手に入る情報として

プロパティ	概要
name	ファイル名
type	コンテンツタイプ
size	サイズ（バイト単位）
lastModifiedDate	最終更新日

がある。アクセスするにはfilesプロパティを利用する。

<form>
  <label for="file">ファイル</label>
  <input id="file" name="file" type="file" multiple />
</form>

window.addEventListener('DOMContentLoaded',function(){
  document.getElementById('file').addEventListener('change',function(e){
  let inputs = document.getElementById('file').files;
    for ( let i = 0, len = inputs.length; i < len ; i++){
    let input = inputs[i];
    console.log(input.name);
    console.log(input.type);
    }
  },true);
});

テキストファイルの内容を取得する場合は、FileReaderオブジェクトを使う。
・ファイル内容がテキストの場合

<form>
  <label for="file">ファイル：</label>
  <input id="file" type="file" />
<form>
<pre id="result"></pre>

window.addEventListener('DOMContentLoaded',function(){
  document.getElementById('file').addEventListener('change',function(e){
    let input = document.getElementById('file').files[0];
    let reader = new FileReader();
    // ファイル読み込み成功したタイミングで実行
    // まだこの時点では、読み込み時の挙動を定義しただけ
    reader.addEventListener('load',function(){  
      //File.Reader.resultプロパティで読み込んだテキストにアクセスできる
      document.getElementById('result').textContent = reader.result;
    },true);
  // ここでreadAsTextメソッドでファイルを読み込む。
  // バイナリファイルはreadAsDataURLメソッドを使う。以下参照
  reader.readAsText(input,'UTF-8');
  });
});

readAsTextメソッドについて

reader.readAsText( file [,charset])

reader: FileReaderオブジェクト、　file: 読み込みファイル、　charset:　文字コード（デフォルトはUTF-8）

・バイナリファイルの場合
readAsTextメソッドの代わりに、readAsDataURL（file）メソッドを使う。これでData URL形式で取得が可能。URLに直接、画像・音声等のデータを埋め込む表現で、いちいちファイルとして保存する必要がなく、srcに入れることができる。

以上で、属性値やテキストの内容を取得することができた。次回はこれをもとに、ノードを追加・置換・削除する

→　次回：ノードを追加・置換・削除する