@ JavaScript

DOM:要素の取得

Document Object Model (DOM) は、W3C から勧告されている HTML 文書や XML 文書をアプリケーションから利用するための仕組みです。

この仕組みを使って <p> や <img> などの要素にアクセスして、要素の値を操作できます。

例えば <p> の中のテキストを変更したり、<img src=”sample.jpg”> の src で指定した画像を別の画像に差し替えるといったことができます。

dom_elements.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <h2 id='target'>DOM要素の取得</h2>
<script>
alert(document.getElementById('target').innerHTML);
</script>
</body>

</html>

demo

スタイルを変更する

JavaScript でDOM にアクセスして CSS を変更できます。

style_color.html では、target という id を設定した要素の CSS の color プロパティーの値を #ff0000 に変更します。

style_color.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <h2 id='target'>DOM要素の取得</h2>
<script>
document.getElementById('target').style.color = '#ff0000'; 
</script>
</body>

</html>

demo