JavaScriptベースのHTML DOMの使用

26661 ワード
メモ JavaScript
HTML DOMは、HTML Document Object Model(文書オブジェクトモデル)の略で、JSによるHTML文書へのアクセスと操作の標準的な方法を定義しています.
JS HTML DOMの使用
  • HTML DOM変更HTMLコンテンツ
  • HTML出力ストリーム
    • を変更する.
  • HTMLコンテンツを変更
  • HTML属性を変更
  • HTML DOM変更CSS
  • HTML要素スタイルを変更する
  • HTML DOMイベント
  • onclickイベント
  • HTML DOMを使用してイベント
    • を割り当てる
  • onmousedown、onmouseupおよびonclickイベント
  • HTML DOM EventListener
  • addEventListenerメソッドによるリスニング
    • の追加
  • HTML DOM要素の動作
  • 新しいHTML要素
    • を作成
  • 既存のHTML要素を削除
  • 付録:
    • HTML DOMがHTMLコンテンツを変更
    HTML出力フローの変更
  • JavaScriptはdocumentで使用できます.write()は、ストリーム書き込みコンテンツ
    • をHTMLに直接出力するために用いることができる.
  • ドキュメントのロードが完了した後にdocumentを呼び出すな.write()は、HTMLドキュメント全体の内容
    • を上書きします.
    HTMLの内容を変更する
    InnerHTMLメソッドを使用して、HTML要素の内容を変更します.
    document.getElementById(id).innerHTML=new HTML

    HTML属性の変更
  • 構文:
    • document.getElementById(id).attribute=new value
  • 例
    • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<img id="image" src="https://www.w3cschool.cn//attachments/cover/cover_docker.png" width="160" height="120">
<script>
document.getElementById("image").src="https://www.w3cschool.cn/attachments/cover/cover_javascript.png";
</script>
<p>     cover_docker.png,         cover_javascript.png</p>

</body>
</html>

    HTML DOM変更CSS
    HTML要素のスタイルを変更する
  • 構文
    • document.getElementById(id).style.property=new style
  • 例
    • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1 id="helloId">Hello World</h1>
<button type="button" onclick="document.getElementById('helloId').style.color='blue'">
click me!</button>

</body>
</html>

    HTML DOMイベント
    onclickイベント
    onclick=JavaScript

    例:
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click it!</h1>
</body>
</html>

    HTML DOMを使用してイベントを割り当てる
    例:
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>       <em>displayDate()</em>   .</p>
<button id="myBtn">   </button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

    onmousedown、onmouseupおよびonclickイベント
    onmousedown,onmouseupおよびonclickは、マウスクリックイベントのすべての部分を構成します.まずマウスボタンをクリックするとonmousedownイベントがトリガーされ、マウスボタンを放すとonmouseupイベントがトリガーされ、最後にマウスクリックが完了するとonclickイベントがトリガーされます.
    例:
    <!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>

</body>
</html>

    HTML DOM EventListener
    addEventListenerメソッドによるリスニングの追加
  • 構文
    •  element.addEventListener(event, function, useCapture);

    -最初のパラメータは、「click」や「mousedown」などのイベントのタイプです.-2番目のパラメータは、イベントがトリガーされた後に呼び出される関数です.–3番目のパラメータは、イベントがバブルであるかキャプチャであるかを記述するためのブール値です.このパラメータはオプションで、デフォルト値はfalse(バブル)です.*バブル:内部要素のイベントがトリガーされ、外部要素がトリガーされます.*取得:外部要素のイベントは、内部要素のイベントをトリガーする前にトリガーされます.
  • 例
  • 元の要素にイベントを追加
    • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>      addEventListener()               。</p>
<button id="myBtn">  </button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
  • イベント内でパラメータを渡すパラメータ値を渡す場合、「匿名関数」を使用してパラメータ付き関数を呼び出す:
    • .
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>         addEventListener()          。</p>
<p>        。</p>
<button id="myBtn">  </button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

    HTML DOM要素の操作
    DOMノードには、次の3つの重要な属性があります.
  • nodeName:ノードの名前
  • nodeValue:ノードの値
  • nodeType:ノードのタイプ
    • 新しいHTML要素の作成
  • この要素(要素ノード)
    • を作成する
  • 既存の要素にその要素
    • を追加する.
    例:
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="div1">
<p id="p1">      。</p>
<p id="p2">       。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("       。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

    既存のHTML要素を削除
    var child=document.getElementById("p1");
child.parentNode.removeChild(child);

    付録:
    W 3 Cschool HTML DOMチュートリアル
    CSSバックグラウンドマップロード完了後の遷移アニメーション
    -webkit-box-orientがなくなった、webkitとautoprefixerの穴