ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript HTML DOM とは何ですか?

JavaScript HTML DOM とは何ですか?

黄舟
黄舟オリジナル
2017-08-04 10:28:441322ブラウズ

JavaScript HTML DOM とは何ですか?

HTML DOM を通じて、JavaScript HTML ドキュメントのすべての要素にアクセスできます。

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

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

プログラム可能なオブジェクト モデルを通じて、JavaScript は動的な HTML を作成するのに十分な能力を獲得しました。

JavaScript HTML DOM とは何ですか?

おすすめJavaScriptチュートリアル学習コース

1.JavaScript HTML

HTML DOMを使用すると、JavaScriptでHTML要素のコンテンツを変更できます。

rreee

Courseリンク:http://www.php.cn/code/3743.html2.javascript html dom -CSS

javascriptの変更CS S 4 つの方法があります:

ノード スタイルを変更する (インライン スタイル);

新しい CSS を作成する;

ページ内のスタイル シートを置き換える。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
</body>
</html>

コースリンク:

http://www.php.cn/code/3748.html

3. JavaScript HTML DOM イベント

HTML DOM により、JavaScript が反応できるようになりますHTMLイベント。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById(&#39;id1&#39;).style.color=&#39;red&#39;">
点我!</button>
</body>
</html>

コースリンク:http://www.php.cn/code/3752.html

4.JavaScript HTML DOM EventListener

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

コースリンク:

http://www.php .cn/code/3755.html

5.JavaScript HTML DOM 要素

HTML DOM に新しい要素を追加するには、まず要素 (要素ノード) を作成し、次に既存の要素に追加する必要があります。要素。

<!DOCTYPE html> 
<html>
<meta charset="utf-8"> 
<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>

コースリンク:

http://www.php.cn/code/3757.html

以上がJavaScript HTML DOM とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。