HTMLのDOMとブラウザのBOM

最近見た知識点を記録する。

HTML DOM (ドキュメントオブジェクトモデル)#

概要：ウェブページが読み込まれると、ブラウザはページのドキュメントオブジェクトモデル（Document Object Model）を作成します。

HTML 要素の検索#

通常、JavaScript を使用して操作する必要がある HTML 要素を操作できます。

これを行うためには、まずその要素を見つける必要があります。これを行う方法は 3 つあります：

id を使用して HTML 要素を見つける：var x=document.getElementById ("intro");
タグ名を使用して HTML 要素を見つける：var y=document.getElementsByTagName ("p");
クラス名を使用して HTML 要素を見つける：var x=document.getElementsByClassName ("intro");

HTML 内容の変更#

innerHTML プロパティを使用します。

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新しいテキスト!";
</script>

</body>
</html>

HTML スタイルの変更#

style を使用します。

<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>

イベントの使用#

<body>

<h1 id="id1">私のタイトル 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
ボタン</button>

</body>

JS で関数を定義してイベントをバインドする

var funcc = function () {
                alert("hello world")
            }
var aa = document.getElementById('vv')
aa.onclick = funcc

addEventListener を利用する

document.getElementById('vv').addEventListener('click',funcc);


document.getElementById('vv').addEventListener('click',function () {
           alert('hahah')
        })

onload と onunload イベント#

onload と onunload イベントは、ユーザーがページに入るときまたは離れるときにトリガーされます。
onload イベントは、訪問者のブラウザの種類とバージョンを検出し、これらの情報に基づいてウェブページの正しいバージョンを読み込むために使用できます。
onload と onunload イベントは、クッキーを処理するために使用できます。

<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("クッキーは利用可能です")
	}
	else{
		alert("クッキーは利用できません")
	}
}
</script>
	
</body>

onchange イベント#

onchange イベントは、入力フィールドの検証と組み合わせて使用されることがよくあります。

<!-- 入力ボックスの内容が変更され、フォーカスが入力ボックスから外れたときに関数が呼び出されます -->
<input type="text" id="fname" onchange="upperCase()">

onmouseover、onmouseout、onmousedown、onmouseup イベント#

onmouseover：マウスが HTML 要素の上に移動したときにイベントがトリガーされます
onmouseout：マウスが HTML 要素の上から離れたときにイベントがトリガーされます
onmousedown：マウスが要素をクリックしたときにイベントがトリガーされます
onmouseup：マウスボタンが放されたときにイベントがトリガーされます。

HTMLCollection オブジェクト#

概要：getElementsByTagName () メソッドは HTMLCollection オブジェクトを返します。HTMLCollection オブジェクトは、HTML 要素を含む配列に似ています。コレクション内の要素は、インデックス（0 から始まる）を使用してアクセスできます。

var x = document.getElementsByTagName("p");
y = x[1];   //2番目のp要素にアクセス

NodeList オブジェクト#

概要：NodeList オブジェクトは、ドキュメントから取得されたノードのリスト（コレクション）です。

querrySelectorAllプロパティを使用してオブジェクトを取得します。

var myNodeList = document.querySelectorAll("p");

同様にインデックスを使用して要素にアクセスします。

NodeList と HTMLCollection の違い#

HTMLCollection の要素は、name、id、またはインデックスを使用して取得できます。
NodeList はインデックスを使用してのみ取得できます。
NodeList オブジェクトには、属性ノードとテキストノードが含まれています。

ブラウザオブジェクトモデル (BOM)#

このオブジェクトはブラウザウィンドウを表し、グローバル変数は window オブジェクトのプロパティです。グローバル関数は window オブジェクトのメソッド（document を含む）です。

ウィンドウサイズ#

window.innerHeight - ブラウザウィンドウの内部高さ（スクロールバーを含む）
window.innerWidth - ブラウザウィンドウの内部幅（スクロールバーを含む）

ウィンドウスクリーン#

screen.availWidth - 利用可能なスクリーン幅
screen.availHeight - 利用可能なスクリーン高さ

ウィンドウロケーション#

location.hostname はウェブホストのドメイン名を返します
location.pathname は現在のページのパスとファイル名を返します
location.port はウェブホストのポート（80 または 443）を返します
location.protocol は使用されているウェブプロトコル（http: または https:）を返します
location.href は現在のページの URL を返します
location.assign (url) は URL で指定された新しい HTML ドキュメントを読み込みます。これはリンクと同じで、指定された url に移動し、現在のページは新しいページの内容に置き換わります。戻るボタンをクリックして前のページに戻ることができます。
location.replace (url) は URL で指定されたドキュメントを読み込むことによって現在のドキュメントを置き換えます。このメソッドは現在のウィンドウページを置き換え、前後の 2 つのページは同じウィンドウを共有するため、戻るボタンで前のページに戻ることはできません。

ウィンドウ履歴#

history.back () - ブラウザの戻るボタンをクリックするのと同じ
history.forward () - ブラウザの進むボタンをクリックするのと同じ

前進と後退の機能は、history.go () メソッドを使用しても実現できます

history.go(1);  // go()の引数は移動するページの数を示します。例えばhistory.go(1)は1ページ進むことを意味します
history.go(-1);  // go()の引数は移動するページの数を示します。例えばhistory.go(-1)は1ページ戻ることを意味します
history.go(0);  // go()の引数が0の場合、ページをリフレッシュします

ポップアップ#

警告ボックス

alert()

alert("警告ボックス！");

確認ボックス

confirm()

var r=confirm("ボタンを押してください");
if (r==true)
{
    x="あなたは\"OK\"ボタンを押しました!";
}
else
{
    x="あなたは\"キャンセル\"ボタンを押しました!";
}

プロンプトボックス

prompt () - プロンプトボックスが表示された後、ユーザーは値を入力し、確認またはキャンセルボタンをクリックして操作を続行する必要があります。

var person=prompt("入力してください");
if (person!=null && person!=""){
    document.getElementById("demo").innerHTML=person;
}

JavaScript タイマーイベント#

setInterval () - 指定されたミリ秒間隔で指定されたコードを繰り返し実行します。括弧内の 2 つの引数、最初の引数は関数、2 番目の引数はミリ秒数です。
setTimeout () - 指定されたミリ秒後に指定されたコードを実行します。最初の引数は関数、2 番目の引数はミリ秒数です。

タイマーを停止する方法：clearInterval() と clearTimeout()

var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
   alert("こんにちは");
}
function myStopFunction(){
    clearInterval(myVar);
}


var myVar;
function myFunction()
{
    myVar=setTimeout(function(){alert("こんにちは")},3000);
}
function myStopFunction()
{
    clearTimeout(myVar);
}

クッキー#

概要：クッキーは、コンピュータに保存されるテキストファイルのデータです。キーと値のペアの形式で保存されます。

クッキーの作成

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT"; //expiresはそのクッキーの有効期限で、デフォルトでは、クッキーはブラウザが閉じられたときに削除されます
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; //pathパラメータはブラウザにクッキーのパスを指示します。デフォルトでは、クッキーは現在のページに属します。

クッキーの読み取り

var x = document.cookie;

クッキーの変更

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; //作成と同様に、直接上書きします

クッキーの取得

新しいクッキーが設定されると、古いクッキーは上書きされません。新しいクッキーは document.cookie に追加されるため、document.cookie を再度読み取ると、次のようなデータが得られます：
cookie1=value; cookie2=value;

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}