WEB制作の学習帳

WEB制作を様々な視点から学ぶブログ

DOMとは2

要素の内容をデータとして取得するには

innerHTMLプロパティを使用する

例) オブジェクト名.innerHTML

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOMテスト</title>
</head>
<body>
<h1>DOMテスト</h1>
<p>おはよう</p>
<p>こんにちは</p>
<p>こんばんは</p>
<script>
var ps = document.getElementsByTagName( 'p' );
alert(ps[1].innerHTML);
</script>
</body>
</html>

 

ps[1]にオブジェクトとして代入されているp要素の内容を取得してダイアログに表示

 

要素の内容を変更

オブジェクト名.innerHTML = '文字列';

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOMテスト</title>
</head>
<body>
<h1>DOMテスト</h1>
<p>おはよう</p>
<p>こんにちは</p>
<p>こんばんは</p>
<script>
var ps = document.getElementsByTagName('p');
//p要素の内容を変更する
ps[0].innerHTML = '行ってきます!';
</script>

</body>
</html>

 

要素を書き換えずに文字列を追加

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOMテスト</title>
</head>
<body>
<h1>DOMテスト</h1>
<p>おはよう</p>
<p>こんにちは</p>
<p>こんばんは</p>
<script>
var ps = document.getElementsByTagName('p');
//p要素の内容に文字列を追加する
ps[1].innerHTML = ps[0].innerHTML + '<strong>(いまここ!)</strong>';
</script>
</body>
</html>