JavaScript HTML DOM とは何ですか?-jsチュートリアル-php.cn

我的标题 1

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript HTML DOM とは何ですか?

黄舟

Aug 04, 2017 am 10:28 AM

html javascript js

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="我的标题-nbsp">我的标题 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 までご連絡ください。