８　ブラウザオブジェクト

（１）ウィンドウ情報

ウィンドウに関する主な情報です。

記述例

<span id="element">PARENT</span>

<span id="element">CHILD</span>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  document.getElementById("d1").textContent = window.name;
  document.getElementById("d2").textContent = window.self.name;
  if (window.opener != undefined) {
    document.getElementById("d3").textContent = window.opener.name;
    document.getElementById("d4").textContent = window.opener.document.getElementById("element").textContent;
  }
  document.getElementById("d5").textContent = window.parent.name;
  document.getElementById("d6").textContent = window.parent.document.getElementById("element").textContent;
</script>

下の実行例では iframe で表示している（グレイの枠内）ため、親子関係があり parent の情報が表示されています。また、ウィンドウを開いていないため、ウィンドウの名前も opener も設定されていません。

しかし、「別ウィンドウで開く」ボタンをクリックした場合は、ウィンドウに名前が付けられていて、opener も（「別ウィンドウで開く」ボタンのある）このウィンドウが設定されています。また parent はありませんので、開かれた child ウィンドウ自身が設定されます。

（２）位置、サイズ

ウィンドウの位置やサイズに関する主な情報です。

また、screenX や screenY は、メインディスプレイの左上からの位置が設定されます。したがって、メインディスプレイの上や左に他のディスプレイが配置されているような場合には負の値になることもあります。

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
  document.getElementById("d1").textContent = window.screen.width + "×" + window.screen.height;
  document.getElementById("d2").textContent = window.screen.availWidth + "×" + window.screen.availHeight;
  document.getElementById("d3").textContent = window.outerWidth + "×" + window.outerHeight;
  document.getElementById("d4").textContent = window.innerWidth + "×" + window.innerHeight;
  document.getElementById("d5").textContent = window.screenX + "×" + window.screenY;
  document.getElementById("d6").textContent = window.pageXOffset + "×" + window.pageYOffset;
</script>

innerWidth×innerHeight は、下の実行例では iframe で表示しているため iframe のサイズになっています。別ウィンドウで開けば実際のウィンドウの内側のサイズになります。

（３）ウィンドウの状態

記述例

<div id="d1"></div>
<!-- 以下略 -->

<script>
  var w = null;
  this.display = function() {
    if (w != null)
      document.getElementById("d1").textContent = w.closed;
  }
</script>

closed は、ウィンドウが開いていれば false、閉じていれば true になります。したがって、「ウィンドウを開く」ボタンで別のウィンドウが開くと false、「ウィンドウを閉じる」ボタンでウィンドウが閉じると true になります。

（１）ウィンドウを開く

ウィンドウを開きます。

記述例

var w = window.open("xxx.htm","sample","width=300,height=200,scrollbars=yes,resizable=yes");

主なスタイルを指定してみます。

ただし、同じ width、height を指定しても実際に開くウィンドウの大きさはブラウザによって異なります。

下の例はすべて Windows10 で height=150,width=350 で開いています。赤い線がその大きさです。

そして、表示されている数値が実際のコンテンツエリアの大きさです。（以外は正しくないようです。）

記述例

<script>
window.open("openWinS.htm","sample","left=300,top=300,height=150,width=350")
</script>

（２）ウィンドウを閉じる

ウィンドウを閉じます。

記述例

var w = window.open("xxx.htm", "sample");
w.close();

（３）ウィンドウの移動

ウィンドウを移動します。

記述例

var w = window.open("xxx.htm", "sample");
w.moveTo(100, 200);     // (100, 200) へ移動
w.moveBy(10, 0);        // 右へ 10 ピクセル移動
w.close();

開いたウィンドウを移動させます。

（４）ウィンドウサイズの変更

ウィンドウの大きさを変更します。

記述例

var w = window.open("xxx.htm", "sample");
w.resizeTo(100, 200);     // 幅 100 ピクセル、高さ 200 ピクセルの大きさに変更
w.resizeBy(10, 0);        // 幅を 10 ピクセル拡大
w.close();

開いたウィンドウの大きさを変更します。

（５）ウィンドウ内容のスクロール

ウィンドウの内容をスクロールします。

記述例

var w = window.open("xxx.htm", "sample");
w.scrollTo(100, 200);     // (100, 200) へ スクロール
w.scrollBy(10, 0);        // 右へ 10 ピクセル スクロール
w.close();

開いたウィンドウの内容をスクロールします。

（６）ウィンドウのフォーカス

ウィンドウにフォーカスを合わせたり、はずしたりします。

記述例

var w = window.open("xxx.htm", "sample");
w.focus();     // フォーカスを合わせる
w.blur();      // フォーカスをはずす
w.close();

開いたウィンドウにフォーカスします（ブラウザによってはポップアップ画面がブロックされるかもしれないので許可してやってください）。

（１）警告ダイアログ

記述例

window.alert("メッセージ");

（２）確認ダイアログ

記述例

var r = window.confirm("メッセージ");

（３）文字列入力ダイアログ

記述例

var r = window.prompt("メッセージ", "初期値");

（１）タイマー

タイマーを設定、解除します。

記述例

var tm;        // タイマーID
tm = window.setTimeout("now()", 3000);     // タイマーを設定する
window.clearTimeout(tm);                   // タイマーを解除する

[set] ボタンをクリックすると３秒後に別途定義されている now() が呼び出され、現在時刻が表示されます。３秒の間に [reset] ボタンをクリックするとタイマーが解除されます。

setTimeout の最初の引数として "now()" としていますが、これは now でも構いません。ただし、now() としてしまうと、すぐに now() が実行されてしまいます。

（２）定期実行

定期的に実行するタイマーを設定、解除します。

記述例

var tm;        // インターバルID
tm = window.setInterval("now()", 1000);     // タイマーを設定する
window.clearInterval(tm);                   // タイマーを解除する

[set] ボタンをクリックすると毎秒別途定義されている now() が呼び出され、現在時刻が表示されます。[reset] ボタンをクリックするとタイマーが解除されます。

setInterval の最初の引数として "now()" としていますが、これは now でも構いません。ただし、now() としてしまうと、すぐに now() が実行されてしまいます。

（３）アニメーション用タイマー

ブラウザの更新準備ができたら func を実行します。タブやブラウザウィンドウがアクティブでなかったら実行する頻度を落とします。主にアニメーションを更新するときに使用します。

ただし、自動的に繰り返し実行されるわけではなく、func の中で次の実行のために毎回 requestAnimationFrame で func を設定する必要があります。

（setInterval や setTimeout は常に指定された時間で実行します。）

記述例

var requestId;
function now() {
  requestId = window.requestAnimationFrame(now);
  var t = new Date();
  document.getElementById('x').textContent=t.toLocaleDateString() + " " + t.toLocaleTimeString();
}
requestId = window.requestAnimationFrame(now);

[set] ボタンをクリックすると現在時刻が表示されます。時刻の更新は一定時間ごとではなく更新準備ができるごとに表示されます。[reset] ボタンをクリックするとタイマーが解除されます。

（１）エンコード

バイナリデータなどから base64 エンコードされた文字列を作成します。

ただし、ユニコードの文字列の場合は、ほとんどのブラウザで例外が発生します。

ユニコードの文字列の場合は、ほとんどのブラウザで例外が発生します（二つ目の例）。その場合は三つ目の例のような記述が必要です。

四つ目の例は画像データをエンコードしています。ただし、最初の４２文字だけを表示しています。

記述例

<span id="d01"></span><br>
<!-- 以下略 -->

<script>
document.getElementById('d01').textContent = window.btoa("ABCDE");
try {
  document.getElementById('d02').textContent = window.btoa("あいうえお");
}
catch(e) {
  document.getElementById('d02').textContent = e;
}
document.getElementById('d03').textContent = encode("あいうえお");

function encode(str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}

function enc() {
  var canvas = document.createElement("canvas");
  canvas.width = 74;
  canvas.height = 74;
  var context = canvas.getContext("2d") ;
  context.drawImage(image, 0, 0, 74, 74);
  if (canvas.toBlob != undefined)
    canvas.toBlob(function(result) { set(result); });
  else
    set(canvas.msToBlob());
}

function set(bin) {
  var file = new Blob([bin], {'type':'image/png'});
  var reader = new FileReader();
  reader.onload = function() {
    var arr = new Uint8Array(reader.result);      // ８ビット符号なし整数値の配列
    var b = "";
    for(var i = 0 ; i < 42 ; i++) {      // 最初の４２文字だけを表示
      b += String.fromCharCode(arr[i]);      // UTF-16 文字列に変換
    }
    document.getElementById('d04').textContent = window.btoa(b);      // base64にエンコード
  }
  reader.readAsArrayBuffer(file);
}
</script>
<img id="image" src="bear.png" onload="enc();"><span id="d04"></span><br>

ユニコードの文字列のエンコードでは、ほとんどのブラウザで例外が発生します（二つ目の例）。

（２）デコード

base64 エンコードされた文字列からバイナリデータなどを作成します。

二つ目の例の結果は、「（１）エンコード」で "あいうえお" をエンコードしたときに使用した unescape(encodeURIComponent("あいうえお")) そのものです。

よって、unescape(encodeURIComponent()) の逆のことをしなければ、"あいうえお" になりません。それが３つ目の例です。

四つ目の例は、エンコードされた画像データですが、ここではバイナリ値に変換しているのではなく、img 要素の src 属性に "data:image/png;base64," に続いて指定することで画像を表示しています。ちなみに下の例の画像は base64 エンコードされた文字列として 11256文字になります（記述例では省略してあります）。

記述例

<span id="d01"></span><br>
<!-- 以下略 -->
<img id="d04">

<script>
document.getElementById('d01').textContent = window.atob("QUJDREU=");
document.getElementById('d02').textContent = window.atob("44GC44GE44GG44GI44GK");
document.getElementById('d03').textContent = decode("44GC44GE44GG44GI44GK");
document.getElementById('d04').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABKCAYAAAAc ...";

function decode(str) {
  return decodeURIComponent(window.atob(str).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);      // %E3%81%82 のような形式に変換
    }).join(''));
}
</script>

（１）　履歴の追加

次の例は、[戻る]ボタンをクリックしても、履歴に追加されている自分自身に戻ることになります。

記述例

  <script>
    history.pushState(null, null, null);      // 第3引数がnullまたは""は、自分自身を履歴に追加

    window.addEventListener("popstate", function() {  // ブラウザの「戻る」「進む」ボタンで発生するイベント
      history.pushState(null, null, null);
    });
  </script>

実行例をクリックしてください。別ウィンドウで「ヒストリ 1」を開きます。

その後、[⇨ ヒストリ 2] ボタンで「ヒストリ 2」へ移動させてください。「ヒストリ 2」では、履歴に自分自身（ヒストリ 2）を追加します。

「ヒストリ 2」では、ブラウザの[戻る]ボタンで「ヒストリ 1」には戻れません。履歴にある自分自身（ヒストリ 2）に移動します（つまり移動しない）。

もちろん、[⇨ ヒストリ 1] ボタンでは「ヒストリ 1」へ移動できます。また、「ヒストリ 1」のブラウザの[戻る]ボタンでも「ヒストリ 2」に戻れます。

（２）　履歴の置き換え

[戻る]ボタンをクリックしても、履歴が変更されているため、変更されたページに移動することになります。

記述例（b2.htm）

  <script>
    history.replaceState(null, null, 'b1.htm');      // 履歴を変更
  </script>

実行例をクリックしてください。別ウィンドウで「ヒストリ 1」を開きます。

その後、[⇨ ヒストリ 2] ボタンで「ヒストリ 2」へ移動させ、さらに[⇨ ヒストリ 3] ボタンで「ヒストリ 3」へ移動させてください。

「ヒストリ 2」では、履歴を「ヒストリ 1」に変更しています。そのため、「ヒストリ 3」では、ブラウザの[戻る]ボタンで「ヒストリ 2」ではなく、「ヒストリ 1」に戻ることになります。

（１） ドキュメント情報

記述例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="d1"></div>
    <!-- 以下略 -->
    <script>
      document.getElementById('d1').textContent=document.URL;
      document.getElementById('d2').textContent=document.location;
      document.getElementById('d3').textContent=document.characterSet;
      document.getElementById('d4').textContent=document.doctype.name;
      document.getElementById('d5').textContent=document.lastModified;
    </script>
  </body>
</html>

（２） HTML情報

記述例

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
    <style>
      <!-- スタイルシート -->
    </style>
    <script>
      <!-- スクリプト -->
    </script>
  </head>
  <body>
    <form name="f1"></form>
    <a href="another.htm">aaa</a>
    <img src="figures/bear.png">
    <div id="d1"></div>
    <!-- 以下略 -->
    <script>
      <!-- スクリプト -->
      document.getElementById('d1').textContent=document.head.nodeName;
      document.getElementById('d2').textContent=document.title;
      document.getElementById('d3').textContent=document.styleSheets.length;
      document.getElementById('d4').textContent=document.scripts.length;
      document.getElementById('d5').textContent=document.body.nodeName;
      document.getElementById('d6').textContent=document.forms[0].name;
      document.getElementById('d7').textContent=document.links[0].href;
      document.getElementById('d8').textContent=document.images[0].src;
    </script>
  </body>
</html>

forms、links、images は最初の要素を表示しています。

（１） open

記述例

  document.open();

（２） close

記述例

  document.open();

  document.close();

（３）write、writeln

記述例

  document.open();
  document.write("今は、");
  let t = new Date();
  document.writeln(t.toLocaleTimeString() + "です。");
  document.close();

（１） getElementById、getElementsByName、getElementsByTagName、getElementsByClassName

id や name、class などの属性、あるいは 要素名をドキュメント内から検索し、見つかった要素を取得することができます。なお、見つからない場合には、null 値となります。

記述例

<div id="sw1" class="switch">スイッチ１</div>　<div id="sw2" class="switch x">スイッチ２</div>
<form action="#">
  <input type="radio" name="option" value="1">選択１
  <input type="radio" name="option" value="2">選択２
  <input type="radio" name="option" value="3" checked>選択３
</form>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  document.getElementById('d1').textContent=document.getElementById("sw1").textContent;
  document.getElementById('d2').textContent=document.getElementsByName("option")[0].checked;
  document.getElementById('d3').textContent=document.getElementsByTagName("input")[2].checked;
  document.getElementById('d4').textContent=document.getElementsByClassName("switch x")[0].textContent;
</script>

なお、たいていのブラウザでは、次のように id を変数のように使用して getElementById と同様に id の要素を得ることもできます。

記述例

<div id="x">x の内容</div>
<div id="d1"></div>
<div id="d2"></div>

<script>
  document.getElementById('d1').textContent = document.getElementById('x').textContent;
  document.getElementById('d2').textContent = x.textContent;   // id である x を変数のように使用する
</script>

（２） createElement、createElementNS

記述例

<form name="F1" action="#">
<select name="S1" size="3">
<option>AAA
<option>BBB
</select>
</form>

<script>
  let elm = document.createElement("option");
  elm.text = "CCC";
  document.F1.S1.add(elm);
</script>

SVG 要素などの作成には名前空間を指定する必要があるので、次のメソッドを使用します。

記述例

<svg id="svg" viewbox="0,0 50 50" width="50" height="50"></svg>

<script>
  let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  circle.setAttribute("cx", 30);
  circle.setAttribute("cy", 30);
  circle.setAttribute("r", 20);
  circle.setAttribute("fill", "green");
  document.getElementById("svg").appendChild(circle);
</script>

（３） createTextNode

記述例

<p id="p1"></p>

<script>
  let textnode = document.createTextNode("<div>foo</div>");
  document.getElementById("p1").appendChild(textnode);
</script>

（４） querySelector、querySelectorAll

引数で指定したセレクタ（id や name、class などの属性、あるいは 要素名などのスタイルシートを適用する対象）や結合子と一致する要素をドキュメント内から検索し、見つかった要素を取得することができます。また、見つからない場合には、null 値となります。

なお、単純な検索ならば getElementById などを使用した方が速いようです。

記述例

<div id="sw1" class="switch">スイッチ１</div>　<div id="sw2" class="switch x">スイッチ２</div>
<form action="#">
  <input type="radio" name="option" value="1">選択１
  <input type="radio" name="option" value="2">選択２
  <input type="radio" name="option" value="3" checked>選択３
</form>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  document.getElementById('d1').textContent=document.querySelector("#sw1").textContent;
  document.getElementById('d2').textContent=document.querySelector("input").checked;              // 選択１
  document.getElementById('d3').textContent=document.querySelectorAll("input")[2].checked;        // 選択３
  document.getElementById('d4').textContent=document.querySelector(".switch, .x").textContent;
</script>

４つ目の ".switch, .x" では、クラス名が "switch" または "x" に一致する最初の要素である "スイッチ１" が得られます（switch と x の AND 条件ではありません）。

なお、（１）の getElementsByName などと （４）の querySelector などは、ほとんど同じように使用することができますが、一つ大きな違いがあります。それは、getElementsByName、getElementsByTagName、getElementsByClassName で得られた要素のリストは、それらの要素に追加・削除があった場合はリストの内容も作り変えられますが、querySelector、querySelectorAll で得られた要素のリストは作り変えられないということです。

ただし、要素の内容の変更はどちらも反映されます。

記述例

<span id="e1">１１１１１</span>　<span id="e2">２２２２２</span><br>
<span id="d11"></span> <span id="d12"></span>
<span id="d21"></span> <span id="d22"></span>

<script>
  let g = document.getElementsByTagName("span");
  let q = document.querySelectorAll("span");
  let e1 = document.getElementById("e1");
  document.body.removeChild(e1);                                  // e1 を削除
  document.getElementById('d11').textContent = g[0].textContent;
  document.getElementById('d21').textContent = q[0].textContent;
  
  document.getElementById('e2').textContent = "０００００";        // e2 の内容を変更
  document.getElementById('d12').textContent = g[0].textContent;    // g[0] が 元の e2 の内容
  document.getElementById('d22').textContent = q[1].textContent;    // q[1] が 元の e2 の内容
</script>

e1 を削除して、e2 の内容を "０００００" に変更しています。

その結果、getElementsByTagName で取得した g 内の最初の要素も削除され２番目の "２２２２２" が最初の要素になっています。それに対して、querySelectorAll で取得した q は変更されず "１１１１１" が最初の要素になっています。

ただし、要素の内容の変更は反映されるようで、e2 の内容はともに "０００００" となっています。

（１） hasFocus

文書または文書内の何れかの要素がフォーカスを持っているかどうかを示します。

下の例は iframe 要素の中に HTML文書があるので、最初はフォーカスを持っていませんので false と表示されます。

枠の中をクリックしてみてください。フォーカスを得て true と表示されます。

枠の外か他のウィンドウをクリックすると、フォーカスが移り false と表示されます。

記述例

<span id="d1"></span><br>
<script>
setInterval(function() {
  document.getElementById("d1").textContent = document.hasFocus();
}, 1000);
</script>

（１） createEvent

指定されたタイプの イベント を作成します。返されるオブジェクトは初めに初期化する必要があり、その後で dispatchEvent へ渡すことができます。

ただし、初期化するための初期化メソッドのいくつかは廃止予定となっています。また、Internet Explorer 以外の多くのブラウザは、イベントオブジェクトの生成に new Event や new MouseEvent などが用意されているので、createEvent は使用しない方が良いでしょう。

click イベントを生成し、セレクト、チェックボックス、ボタンに送っています。click イベントを受け取った要素は直接クリックされたのと同じように動作します。

ちなみに、セレクトはクリックされるとランダムに項目を選択します。

記述例

<select id="select"><option>aaa<option>bbb<option>ccc</select>  <div ="sw1" class="switch" onclick="fire();">クリック</div>
<input id="check" type="checkbox"><br>
<button id="button" style="width:5em;">今の日時</button> <span id="date"></span>

<script>
  document.getElementById("select").addEventListener("click", function(){ this.selectedIndex=parseInt(Math.random() * 3); });
  document.getElementById("button").addEventListener("click", dispDate);

  function dispDate(event) {
    let d = new Date(event.timeStamp);
    document.getElementById("date").textContent=d.toLocaleString();
  }

  function fire() {
    let evt = document.createEvent("HTMLEvents");   // Event オブジェクトの生成
    evt.initEvent("click", true, true);             // 初期化（click イベント）
    document.getElementById("select").dispatchEvent(evt);   // click イベントを送る
    document.getElementById("check").dispatchEvent(evt);
    document.getElementById("button").dispatchEvent(evt);
  }
</script>

「クリック」ボタンをクリックしてみてください。セレクト、チェックボックス、ボタンの状態が変わります。

は、デフォルトの機能が実行されない（？）ようでチェックボックスが変化しません（ただし、Event オブジェクトを new MouseEvent() などで生成すれば変化します）。

は、timeStamp は正しく設定されません。

（１） エレメント情報

記述例

<div id="id1" class="c1 c2 c3" style="display:none;" title="title1"><SPAN STYLE='COLOR:RED;'>XXX</SPAN>YYY</div>
<div id="id2" data-my-rank="プレミアム" data-max-number="10" style="display:none;">ZZZ</div>    <!-- 独自データ属性 -->
<div id="d1"></div>
<!-- 以下略 -->

<script>
  function dispList(list) {
    let s = "";
    for (let i = 0 ; i < list.length ; i++)
      s += list[i] + " ";
    return s;
  }
  function dispStyle(style) {
    let s = "";
    for (let i = 0 ; i < style.length ; i++) {
      let t = style[i];
      s += t + "（" + style[t] + "）　";
    }
    return s;
  }
  function dispAttr(attr) {
    let s = "";
    for (let i = 0 ; i < attr.length ; i++)
      s += attr[i].name + "（" + attr[i].value + "）　";
    return s;
  }
  let e = document.getElementById("id1");
  document.getElementById("d1").textContent=e.id;
  document.getElementById("d2").textContent=e.tagName;
  document.getElementById("d3").textContent=e.title;
  document.getElementById("d4").textContent=e.className;
  document.getElementById("d5").textContent=dispList(e.classList);
  document.getElementById("d6").textContent=dispStyle(e.style);
  document.getElementById("d7").textContent=e.innerHTML;
  document.getElementById("d8").textContent=e.innerText;
  document.getElementById("d9").textContent=e.textContent;
  document.getElementById("d10").textContent=dispAttr(e.attributes);
  
  e = document.getElementById("id2");
  document.getElementById("d21").textContent=e.dataset.myRank;       // data-my-rank
  document.getElementById("d22").textContent=e.dataset.maxNumber;    // data-max-number
</script>

innerHTML はタグを含みますが、innerText や textContent は含みません。

ただし、innerHTML に含まれる要素名や属性名は小文字に、また、引用符はダブルクォテーションになりますので、注意してください。

また、innerText は元来 独自の属性なので、他のブラウザでも記述はできますが、若干の違いがあります。

それに対して、textContent は、ブラウザによる違いがほとんどありませんので innerText ではなく、textContent を使用するようにした方が良いでしょう。

記述例

<div id="str" style="display:none">	A     B
C</div>
<table>
  <tr><td id="d01"></td><td id="d02"></td><td> = </td><td>undefined</td></tr>
  <tr><td id="d11"></td><td id="d12"></td><td> = </td><td>null</td></tr>
  <tr><td id="d21" style="white-space:normal;"></td><td id="d22" style="white-space:normal;"></td><td> = </td><td>innerText</td></tr>
  <tr><td id="d31" style="white-space:pre;"></td><td id="d32" style="white-space:pre;"></td><td> = </td><td>textContent</td></tr>
</table>
<br>
<table>
  <tr><td id="d1" style="white-space:pre;"></td><td> = </td><td>innerText</td></tr>
  <tr><td id="d2" style="white-space:pre;"></td><td> = </td><td>textContent</td></tr>
</table>

<script>
  window.addEventListener("load", function() {
    document.getElementById('d01').innerText=undefined;
    document.getElementById('d02').textContent=undefined;

    document.getElementById('d11').innerText=null;
    document.getElementById('d12').textContent=null;

    let s = "\tA     B\nC";
    document.getElementById('d21').innerText=s;
    document.getElementById('d22').textContent=s;

    document.getElementById('d31').innerText=s;
    document.getElementById('d32').textContent=s;

    document.getElementById('d1').innerHTML=document.getElementById('str').innerText;
    document.getElementById('d2').innerHTML=document.getElementById('str').textContent;
  } , false);
</script>

前半部分では代入される側（左辺）が innerText と textContent でどう違うのかを示しています。スタイルシートの white-space 属性の値によっても違うようです。ちなみに、代入している文字列は "(タブ)A(連続した空白)B(改行)C" です。

後半部分は、代入する側（右辺）が innerText と textContent でどう違うのかを示しています。代入するエレメントの内容はやはり "(タブ)A(連続した空白)B(改行)C" です。

（２） クライアント情報

記述例

<style>
div.parent {
  background-color:lightcyan;
  width:255px;
  padding:15px 15px;
}
div.child {
  background-color:lawngreen;
  height:60px;
  width:100px;
  margin:10px 40px 20px 30px;
  border-top:solid 15px limegreen;
  border-bottom:solid 25px limegreen;
  border-left:solid 35px limegreen;
  border-right:solid 45px limegreen;
  overflow: scroll;
}
</style>

<div id="parent" class="parent"><div id="child" class="child">XXXXXXXXXX<br>YYYYYYYYYY<br>ZZZZZZZZZZ</div></div>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  let c = document.getElementById("child");
  document.getElementById("d1").textContent=c.clientTop;
  document.getElementById("d2").textContent=c.clientLeft;
  document.getElementById("d3").textContent=c.clientHeight;
  document.getElementById("d4").textContent=c.clientWidth;
</script>

矢印や文字列は理解の助けになるように別途表示しています。

破線の矩形は child のマージン範囲を示すために別途表示しています。

（３） オフセット情報

記述例

<style>
div.grandParent {
  background-color:lavenderblush;
  width:250px;
  padding:10px 40px 20px 30px;
}
div.parent {
  background-color:lightcyan;
  padding:15px 0px 25px 35px;
}
div.child {
  background-color:lawngreen;
  width:50px;
  margin:12px 42px 22px 32px;
  border:solid 10px limegreen;
}
</style>

<div id="grandParent" class="grandParent" style="position:relative;"><div id="parent" class="parent"><div id="child" class="child">XXX</div></div></div>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  let c = document.getElementById("child");
  document.getElementById("d1").textContent=c.offsetParent.id;
  document.getElementById("d2").innerHTML=c.offsetTop;
  document.getElementById("d3").innerHTML=c.offsetLeft;
  document.getElementById("d4").innerHTML=c.offsetHeight;
  document.getElementById("d5").innerHTML=c.offsetWidth;
</script>

parent の要素にはありませんが、grandParent の要素には relative である position属性がありますので、child の要素のオフセットの基準は grandParent の要素になります。

矢印や文字列は理解の助けになるように別途表示しています。

破線の矩形は child のマージン範囲を示すために別途表示しています。

（４） スクロール情報

記述例

<style>
div.scroll {
  background-color:lawngreen;
  height:50px;
  width:50px;
  overflow: scroll;
}
</style>

<div id="scroll" class="scroll">A123456789<br>BB12345678<br>CCC1234567<br>DDDD123456<br>
EEEEE12345<br>FFFFFF1234<br>GGGGGGG123<br>HHHHHHHH12<br>IIIIIIIII1</div>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  let s = document.getElementById("scroll");
  document.getElementById("d1").textContent=s.scrollTop;
  document.getElementById("d2").textContent=s.scrollLeft;
  document.getElementById("d3").textContent=s.scrollHeight;
  document.getElementById("d4").textContent=s.scrollWidth;
</script>

左側の要素をスクロールさせると、スクロール情報が変化します。

右側の要素は、スクロール情報を説明するために別途表示しています。

（１） getElementById、getElementsByClassName、getElementsByTagName、getElementsByTagNameNS

id や 要素名を特定の要素内から検索し、見つかった要素を取得することができます。なお、見つからない場合には、null 値となります。

記述例

<ol id="ol" style="display:inline-block;">
  <li id="li1">aaaaa</li>
  <li id="li2">bbbbb</li>
  <li id="li3" class="emphasis">ccccc</li>
</ol>
<svg id="svg" viewbox="0,0 150 90" width="150" height="90">
  <image id="image1" class="emphasis" x="50" y="10" width="74" height="74" xlink:href="figures/bear.png"/>
</svg>

<div id="d11"></div><div id="d12"></div>
<!-- 以下略 -->

<script>
  let o = document.getElementById('ol');
  let s = document.getElementById('svg');
  document.getElementById('d11').textContent="未実装";
  document.getElementById('d12').textContent=s.getElementById("image1").tagName;

  document.getElementById('d21').textContent=o.getElementsByClassName("emphasis")[0].tagName;
  try {
    document.getElementById('d22').textContent=s.getElementsByClassName("emphasis")[0].tagName;
  }
  catch(x) {
    document.getElementById('d22').textContent=x.message;
  }
  
  document.getElementById('d31').textContent=o.getElementsByTagName("li")[0].id;
  document.getElementById('d32').textContent=s.getElementsByTagName("image")[0].id;
</script>

ol 要素には getElementById はありません。ol 要素のような通常の HTML 要素の ID はドキュメントでユニークである必要があります。そのため、要素ごとに探す必要はなく document.getElementById を使用すれば目的の ID を持つ要素を得られます。

の svg 要素には getElementByClassName がないので例外が発生します。名前空間を指定した getElementsByTagNameNS を使用します。

SVG 要素内の要素の ID は SVG ごとにユニークである必要はありますが、ドキュメント全体でユニークである必要はありません（他の SVG で使用されている ID を使用しても構いません）。そのため、要素ごとに探す必要があります。

記述例

<svg id="svg1" viewbox="0,0 150 110" width="150" height="110">
  <image id="image1" x="50" y="20" width="74" height="74" xlink:href="figures/bear.png"/>
  <circle id="circle1" cx="30" cy="40" r="20" fill="green">
</svg>
<svg id="svg2" viewbox="0,0 150 110" width="150" height="110">
  <image id="image1" x="50" y="20" width="74" height="74" xlink:href="figures/bear2.png"/>
  <circle id="circle2" cx="30" cy="40" r="20" fill="green">
</svg>

<div id="d11"></div><div id="d12"></div>
<div id="d21"></div><div id="d22"></div>

<script>
  let s1 = document.getElementById('svg1');
  let s2 = document.getElementById('svg2');
  document.getElementById('d11').textContent=s1.getElementById("image1").tagName;
  document.getElementById('d12').textContent=s2.getElementById("image1").tagName;

  document.getElementById('d21').textContent=s1.getElementById("circle1").tagName;
  try {
    document.getElementById('d22').textContent=s2.getElementById("circle1").tagName;
  }
  catch(x) {
    document.getElementById('d22').textContent=x.message;
  }
</script>

image1 は svg1 にも svg2 にもありますが、circle1 は svg2 にはありませんので例外が発生します。

なお、色のついた文字列は説明のために別途表示しています。

名前空間を指定する場合は次のメソッドを使用します。

記述例

<ol id="ol" style="display:inline-block;">
  <li id="li1">aaaaa</li>
  <li id="li2">bbbbb</li>
  <li id="li3">ccccc</li>
</ol>
<svg id="svg" viewbox="0,0 250 90" width="250" height="90">
  <image id="image1" x="50" y="10" width="74" height="74" xlink:href="figures/bear.png"/>
  <image id="image2" x="130" y="10" width="74" height="74" xlink:href="figures/bear2.png"/>
</svg>

<div id="d11"></div><div id="d12"></div>

<script>
  let o = document.getElementById('ol');
  let s = document.getElementById('svg');
  document.getElementById('d11').textContent=o.getElementsByTagNameNS(
                                               "http://www.w3.org/1999/xhtml", "li")[1].id;
  document.getElementById('d12').textContent=s.getElementsByTagNameNS(
                                               "http://www.w3.org/2000/svg", "image")[1].id;
</script>

（２） querySelector、querySelectorAll

引数で指定したセレクタ（id や name、class などの属性、あるいは 要素名などのスタイルシートを適用する対象）や結合子と一致する要素をドキュメント内から検索し、見つかった要素を取得することができます。また、見つからない場合には、null 値となります。

なお、単純な検索ならば getElementById などを使用した方が速いようです。

記述例

<ol id="ol" style="display:inline-block;">
  <li id="li1">aaaaa</li>
  <li id="li2" class="emphasis">bbbbb</li>
  <li id="li3" class="emphasis x">ccccc</li>
</ol>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  let ol = document.getElementById("ol");
  document.getElementById('d1').textContent=ol.querySelector("#li1").textContent;
  document.getElementById('d2').textContent=ol.querySelector("li").textContent;              // aaaaa
  document.getElementById('d3').textContent=ol.querySelectorAll("li")[2].textContent;        // ccccc
  document.getElementById('d4').textContent=ol.querySelector(".emphasis, .x").textContent;
</script>

４つ目の ".emphasis, .x" では、クラス名が "emphasis" または "x" に一致する最初の要素である "bbbbb" が得られます（emphasis と x の AND 条件ではありません）。

なお、（１）の getElementsByName などと （２）の querySelector などは、ほとんど同じように使用することができますが、一つ大きな違いがあります。それは、getElementsByName、getElementsByTagName、getElementsByClassName で得られた要素のリストは、それらの要素に追加・削除があった場合はリストの内容も作り変えられますが、querySelector、querySelectorAll で得られた要素のリストは作り変えられないということです。

ただし、要素の内容の変更はどちらも反映されます。

記述例

<ol id="ol" style="display:inline-block;">
  <li id="li1">aaaaa</li>
  <li id="li2">bbbbb</li>
  <li id="li3">ccccc</li>
</ol>
<span id="d11"></span> <span id="d12"></span>
<!-- 以下略 -->

<script>
  let ol = document.getElementById("ol");
  let g = ol.getElementsByTagName("li");
  let q = ol.querySelectorAll("li");
  let li1 = document.getElementById("li1");
  ol.removeChild(li1);                                          // li1 を削除
  document.getElementById('d11').textContent=g[0].textContent;
  document.getElementById('d21').textContent=q[0].textContent;
  document.getElementById("li2").textContent = "xxxxx";         // li2 の内容を変更
  document.getElementById('d12').textContent=g[0].textContent;  // g からは li1 の内容が削除されている
  document.getElementById('d22').textContent=q[1].textContent;  // q には li1 の内容が残っている
</script>

li1 を削除して、li2 の内容を "xxxxx" に変更しています。

その結果、getElementsByTagName で取得した g 内の最初の要素も削除され２番目の "bbbbb" が先頭の要素になっています。それに対して、querySelectorAll で取得した q は変更されず "aaaaa" が先頭の要素になっています。

ただし、要素の内容の変更は反映されるようで、li2 の内容はともに "xxxxx" となっています。

（１） hasAttribute、hasAttributeNS、hasAttributes

記述例

<div id="id1" class="c1 c2 c3" style="display:none;">XXX</div>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  let e = document.getElementById("id1");
  document.getElementById("d1").textContent=e.hasAttributes();
  document.getElementById("d2").textContent=e.hasAttribute("class");
  document.getElementById("d3").textContent=e.hasAttribute("xxx");
</script>

class という属性はあるので true、xxx はないので false になります。

SVG 要素などが属性を持つかどうかを調べるには名前空間を指定する必要があるので、次のメソッドを使用します。

SVG での HREF は、名前空間が http://www.w3.org/1999/xlink に定義されています。そのため、参照するには、hasAttributeNS メソッドを使用し名前空間を指定する必要があります。

記述例

<svg id="svg" viewbox="0,0 150 90" width="150" height="90">
  <image id="image" x="50" y="10" width="74" height="74" xlink:href="figures/bear.png"/>
</svg>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  let img = document.getElementById("image");
  document.getElementById("d1").textContent=img.hasAttributeNS("http://www.w3.org/1999/xlink", "href");
  document.getElementById("d2").textContent=img.hasAttributeNS("http://www.w3.org/1999/xlink", "x");
  document.getElementById("d3").textContent=img.hasAttribute("href");   // 名前空間が違うから見つからない
  document.getElementById("d4").textContent=img.hasAttribute("x");      // SVG の要素でも通常の属性は hasAttribute
</script>

名前空間 http://www.w3.org/1999/xlink に href という属性はあるので true、x はないので false になります。

逆に、名前空間を指定しないと href は false、x は true になります。

（２） getAttribute、getAttributeNS、setAttribute、setAttributeNS、removeAttribute、removeAttributeNS

記述例

<div id="id1" class="c1 c2 c3" style="display:none;">XXX</div>
<div id="id2" data-my-rank="プレミアム" data-max-number="10">YYY</div>    <!-- 独自データ属性 -->
<div id="d1"></div>
<!-- 以下略 -->

<script>
  let e = document.getElementById("id1");
  document.getElementById("d1").textContent=e.getAttribute("class");
  e.setAttribute("class", "xx");    // class 属性値を変更
  document.getElementById("d2").textContent=e.getAttribute("class");
  e.removeAttribute("class");       // class 属性値を削除
  document.getElementById("d3").textContent=e.getAttribute("class");
  
  e = document.getElementById("id2");
  document.getElementById("d11").textContent=e.getAttribute("data-my-rank");       // data-my-rank
  document.getElementById("d12").textContent=e.getAttribute("data-max-number");    // data-max-number
</script>

２番目と３番目の例は、setAttribute で変更した後の class 属性値と removeAttribute で削除した後の class 属性値を表示しています。

最後の２つは独自データ属性の例です。

SVG 要素などの属性を参照、設定するには名前空間を指定する必要があるので、次のメソッドを使用します。

記述例

<svg id="svg" viewbox="0,0 150 90" width="150" height="90">
  <image id="image" x="50" y="10" width="74" height="74" xlink:href="figures/bear.png"/>
</svg>
<div id="d1"></div>
<!-- 以下略 -->

<script>
  let img = document.getElementById("image");
  document.getElementById("d1").textContent=img.getAttributeNS("http://www.w3.org/1999/xlink", "href");
  img.removeAttributeNS("http://www.w3.org/1999/xlink", "href");   // 削除
  document.getElementById("d2").textContent=img.hasAttributeNS("http://www.w3.org/1999/xlink", "href");
  img.setAttributeNS("http://www.w3.org/1999/xlink", "href", "figures/bear2.png");
  document.getElementById("d3").textContent=img.getAttributeNS("http://www.w3.org/1999/xlink", "href");
</script>

下から２つは、removeAttribute で削除した後の href 属性の有無と setAttribute で変更した後の href 属性値を表示しています。

（１） スクロール

要素の内容をスクロールします。

scrollTo は、指定した位置を要素の左上にスクロールします。

記述例

<div id="scroll">A123456789<br>BB12345678<br>CCC1234567<br>DDDD123456<br>EEEEE12345<br>FFFFFF1234<br>GGGGGGG123<br>HHHHHHHH12<br>IIIIIIIII1</div><br>
<div>scrollTo(<input name="left" type="number" size="3" min="0" max="100" value="0" onchange="change();">, 
<input name="top" type="number" size="3" min="0" max="100" value="0" onchange="change();">)<br>

<script>
function change() {
  let top = document.f.top.value;
  let left = document.f.left.value;
  let s = document.getElementById('scroll');
  s.scrollTo(left, top);
}
</script>

左側の要素の内容をスクロールさせ、指定した位置を要素の左上に移動させます。

右側の要素は、スクロール位置を説明するために別途表示しています。

scrollBy は、指定したスクロール量だけスクロールします。

記述例

<div id="scroll">A123456789<br>BB12345678<br>CCC1234567<br>DDDD123456<br>EEEEE12345<br>FFFFFF1234<br>GGGGGGG123<br>HHHHHHHH12<br>IIIIIIIII1</div><br>
<div>scrollBy(<input name="left" type="number" size="3" min="-50" max="50" value="0" onchange="change();">, 
              <input name="top" type="number" size="3" min="-50" max="50" value="0" onchange="change();">)<br>

<script>
function change() {
  let top = document.f.top.value;
  let left = document.f.left.value;
  let s = document.getElementById('scroll');
  s.scrollBy(left, top);
  document.f.top.value = 0;
  document.f.left.value = 0;
}
</script>

左側の要素の内容を指定した量だけスクロールさせます。負数も指定できます。その後、入力された数値を ０にしています。

右側の要素は、スクロール位置を説明するために別途表示しています。

（１） イベントリスナー

発生したイベントに対して処理を行いたいときに、イベントと関数を関連付けるためのメソッドが用意されています。なお、第３引数の useCapture については、「１０．２　　イベントの伝播」を参照してください。

記述例

<div onClick='add();'>addEventListener</div>　<div onClick='removex();'>removeEventListener</div>
<div id='time'>現在時刻→<span id='x'></span></div>
<script>
var time = document.getElementById('time');
function add() {
  time.addEventListener('mousemove', now, false);
}
function removex() {                    // Chrome、Firefox、Sleipnir では remove は使えない
  document.getElementById('x').textContent="";
  time.removeEventListener('mousemove', now, false);
}
function now() {
  let t = new Date();
  document.getElementById('x').textContent=t.toLocaleDateString() + " " + t.toLocaleTimeString();
}
</script>

[addEventListener] ボタンで、時刻が表示されるよう id が time のエレメントにイベントリスナーを設定します。[removeEventListener] ボタンで、イベントリスナーを解除します。

「現在時刻」の文字の上でマウスを動かしてみてください。

（２） イベントの送信

HTML の各要素に対して、イベントを送信します。

イベントが送信された要素の内、少なくともひとつのイベントハンドラが preventDefault() を呼び出した場合は戻り値が false になります。preventDefault() は、そのイベントのデフォルトの動作をキャンセルしたいときに呼び出します。

一つ目のチェックボックスは preventDefault() を実行していますので、チェックを付けたり消したりというデフォルトの動作は行われません。

記述例

<input id="check1" type="checkbox">　<input id="check2" type="checkbox">
　<div class="switch" onclick="fire();">クリック</div>

<script>
document.getElementById("check1").addEventListener("click", function(event){event.preventDefault();});

function fire() {
  let evt1;
  let evt2;
  try {
    evt1 = new MouseEvent("click", {"cancelable":true});  // Edge、Chrome、Firefox、Opera、Sleipnir 用
    evt2 = new MouseEvent("click", {"cancelable":true});
  }
  catch(x) {
    evt1 = document.createEvent("HTMLEvents");            // internet explorer、 Safari 用
    evt2 = document.createEvent("HTMLEvents");
    evt1.initEvent("click", true, true);
    evt2.initEvent("click", true, true);
  }
  document.getElementById("check1").dispatchEvent(evt1);            // click イベントを送る
  document.getElementById("check2").dispatchEvent(evt2);
}
</script>

ただし、dispatchEvent でイベントを送ってもデフォルトの処理が行われるかどうか微妙なようです（イベントは送られます）。

複数の要素に同じイベントを送ったときは、 は一つ目はチェックが付きますが、二つ目以降は付きません（厳密にいうと、イベントが発生したときには付くのですがその後消えます）。

しかし、別々のイベントを送ったときは、正しくデフォルトの処理が行われるようです。

また、は、別々のイベントを送ってもまったくチェックが付きません。

記述例

<input id="check01" type="checkbox">A <input id="check02" type="checkbox">B <input id="check03" type="checkbox">C
　<div class="switch" onclick="fire();">クリック</div>
<input id="check11" type="checkbox">A <input id="check12" type="checkbox">B <input id="check13" type="checkbox">C

<script>
function fire() {
  let evt = getEvent();
  let evt1 = getEvent();
  let evt2 = getEvent();
  let evt3 = getEvent();
  document.getElementById("check01").dispatchEvent(evt);        // 同じ click イベントを送る
  document.getElementById("check02").dispatchEvent(evt);
  document.getElementById("check03").dispatchEvent(evt);
  document.getElementById("check11").dispatchEvent(evt1);       // 別々の click イベントを送る
  document.getElementById("check12").dispatchEvent(evt2);
  document.getElementById("check13").dispatchEvent(evt3);
}

function getEvent() {
  let evt;
  try {
    evt = new MouseEvent("click");              // Edge、Chrome、Firefox、Opera、Sleipnir 用
  }
  catch(x) {
    evt = document.createEvent("HTMLEvents");   // internet explorer、 Safari 用
    evt.initEvent("click", true, true);
  }
  return evt;
}
</script>

（１） スタイルシート情報

cssText は、などの独自プロパティです。

記述例

p { color: red; } 
span {font-weight: bold;}

<html>
 <head>
  <meta charset="UTF-8">
  <title>styleSheets</title>
  <link rel="stylesheet" href="h3080801(1)a.css">    <!-- 一つ目のスタイルシート -->
  <style>                                            <!-- 二つ目のスタイルシート -->
    .note {
      font-size: 9pt;
      color: chocolate;
    }
  </style>
 </head>
 <body>
  <table>
   <tr><td id="d00"></td><td> → </td><td id="d01"></td><td id="d02"></td></tr>
   <tr><td id="d10"></td><td> → </td><td id="d11"></td><td id="d12"></td></tr>
  </table>
  <script>
  for (let x = 0 ; x < document.styleSheets.length ; x++) {
    let ss = document.styleSheets[x];                       // ss : CSSStyleSheet
    document.getElementById("d" + x + "0").textContent = ss.href;
    document.getElementById("d" + x + "1").textContent = ss.cssText;
    document.getElementById("d" + x + "2").textContent = ss.cssRules;       // CSSRuleList
  }
  </script>
 </body>
</html>

一つ目は link 要素で記述されたスタイルシートなので、href が設定されています。二つ目は style 要素で記述されているため href はありません。

（２） スタイルシートの追加・削除

記述例

<html>
 <head>
  <meta charset="UTF-8">
  <title>styleSheets</title>
  <style>
    p { color: red; } 
    span {font-weight: bold;}
    .note {
      font-size: 9pt;
      color: chocolate;
    }
  </style>
 </head>
 <body>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
  <script>
  function dispStyle(style) {      // style : CSSStyleDeclaration
    let s = "";
    for (let i = 0 ; i < style.length ; i++) {
      let n = style[i];
      s += n + ": " + style[n] + "; ";
    }
    return s;
  }
  function dispRules(rules) {      // rules : CSSStyleRule 
    let s = "";
    for (let i = 0 ; i < rules.length ; i++) {
      s += rules[i].selectorText + " {" + dispStyle(rules[i].style) + "} ";
    }
    return s;
  }
  let ss = document.styleSheets[0];                       // ss : CSSStyleSheet
  document.getElementById("d1").textContent= dispRules(ss.cssRules);
  ss.deleteRule(1);                                                  // 二つ目のスタイルルールを削除
  document.getElementById("d2").textContent= dispRules(ss.cssRules);
  ss.insertRule("span {font-style: italic;}", ss.cssRules.length);   // 最後に新たなスタイルルールを追加
  document.getElementById("d3").textContent= dispRules(ss.cssRules);
  </script>
 </body>
</html>

二つ目のスタイルルール（span {font-weight: bold;}）を削除した後、別のルール（span {font-style: italic;}）を最後に挿入しています

（１） フォーム情報

記述例

<form name="f1" action="http://foo.com/exec.htm" method="get" target="_top" enctype="text/plain" accept-charset="UTF-8 Shift_JIS">
</form>
<div id="d1"></div>
<!-- 以下略 -->

<script>
let f = document.forms[0];          // 最初の form 要素
document.getElementById("d1").textContent=f.name;
document.getElementById("d2").textContent=f.method;
document.getElementById("d3").textContent=f.action;
document.getElementById("d4").textContent=f.target;
document.getElementById("d5").textContent=f.enctype;
document.getElementById("d6").textContent=f.acceptCharset;
</script>

（２） 送信、リセット

form 要素の input type="submit" や input type="reset" 要素と同じことを Javascript で行うことができます。

form 要素の submit() や reset() を呼び出します。

記述例

<form name="f1" action="#">
  コード：<input type="text" name="param" value="A001"><input type="hidden" name="value" value="0">　　　　　
  　<div onClick="document.f1.value.value='1';document.f1.submit();">追加</div>
  　<div onClick="document.f1.value.value='2';document.f1.submit();">削除</button>
  　<div onClick="document.getElementById('params').textContent='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';document.f1.reset();">リセット</button>
</form>

[追加]と[削除]という２つの送信ボタンがありますので、区別がつくように type='hidden' とした name='value' のパラメータを用意しています。[追加]ボタンは '1' を、[削除]ボタンは '2' を設定して submit() を実行しています。[リセット]ボタンは reset() を実行しています。

（１） フォーム部品情報

記述例

<form name="f1" action="#">
  <input type="text" name="e1" value="初期値">
  <input type="submit" name="e2" value="送信">
</form>
<div id="d1"></div>
<!-- 以下略 -->

<script>
let f = document.forms[0];
document.getElementById("d1").textContent=f.e1.name;
document.getElementById("d2").textContent=f.e1.type;
document.getElementById("d3").textContent=f.e1.value;
document.getElementById("d4").textContent=f.e1.form.name;
document.getElementById("d5").textContent=f.e2.name;
document.getElementById("d6").textContent=f.e2.type;
document.getElementById("d7").textContent=f.e2.value;
document.getElementById("d8").textContent=f.e2.form.name;
</script>

form はオブジェクトが返るため、この例では form の name 属性を表示しています。

（２） フォーカス

入力欄やボタンなどにカーソルを位置づけたり、選択状態にします。

記述例

<form name="f1" action="#">
  <input type="text" name="e1" value="初期値">
</form>
<br>
<div onClick="document.f1.e1.focus();">フォーカスを当てる</div>　<div onClick="document.f1.e1.blur();">フォーカスを外す</div>