DOMでのオブジェクトの使い方練習 1
DOMの利用
ウィンドウに表示されたドキュメントの操作はdocumentオブジェクトで行います。documentオブジェクトは多くのプロパティとメソッドを公開していますが、より標準的なDOMを利用するようにします。
ノードを作成する
要素ノードを生成
document.createElement(要素名);
テキストノードを生成
document.createTextNode(テキスト);
ノードの追加
生成したばかりの要素ノードとテキストノードは、DOMツリーには組み込まれてなくて単独で存在している状態です。これらをドキュメントに追加するのは「appendChild」メソッドです。追加するノードは指定した親要素の一番最後に追加されます。
document.親要素ノード.appendChild(追加するノード);
以後”document”の記述は省略します。また、親要素ノードは親ノードとします。
ノードを削除する
親ノード.removeChild(削除するノード);
ノードを置換する
親ノード.replaceChild(置換後のノード,置換対象のノード);
使用例
テキスト2の下にテキスト3を追加します
<body>
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト1</p>
<p id="two">テキスト2</p>
<script>
var p = document.createElement('p');
var text = document.createTextNode('テキスト3');
document.body.appendChild(p).appendChild(text);
</script>
</body>
結果
画像をクリックすると画像を切り替えます
<script>
var i = 0;
function changeImg() {
switch ( i ) {
case 0:
var image = document.getElementById('img');
image.src = 'img/02.jpg';
image.alt = 'にぎり寿司';
i = 1;
break;
case 1:
var image = document.getElementById('img');
image.src = 'img/01.jpg';
image.alt = 'ステーキ';
i = 0;
break;
}
}
</script>
<body>
<p><img id="img" src="img/01.jpg" alt="ステーキ"</p>
<button onclick='changeImg()';>画像チェンジ</button>
</body>
結果
ボタンをクリックするとbodyの背景色が替わります
<script>
function changeBg1(){
document.body.style.backgroundColor = '#ED784A';
}
function changeBg2(){
document.body.style.backgroundColor = '#FB966E';
}
function changeBg3(){
document.body.style.backgroundColor = '#D19826';
}
function changeBg4(){
document.body.style.backgroundColor = '#1B813E';
}
function changeBg5(){
document.body.style.backgroundColor = '#268785';
}
function changeBg6(){
document.body.style.backgroundColor = '#4A225D';
}
</script>
</head>
<body>
<button onClick="changeBg1()">纁SOHI</button>
<button onClick="changeBg2()">洗朱ARAISHI</button>
<button onClick="changeBg3()">山吹茶YAMABUKICHA</button>
<button onClick="changeBg4()">常磐TOKIWA</button>
<button onClick="changeBg5()">青碧SEIHEKI</button>
<button onClick="changeBg6()">深紫KOKIMURASAKI</button>
</body>
結果
運勢をランダムに表示します
<script>
var omikuji = new Array(5);
omikuji[0] = '大吉';
omikuji[1] = '中吉';
omikuji[2] = '吉';
omikuji[3] = '凶';
omikuji[4] = '大凶';
console.log(omikuji);
function kuji(){
var rdm = Math.floor(Math.random()*5);
var str = omikuji[rdm];
document.getElementById('text').textContent = str;
}
</script>
</head>
<body>
<h1>あなたの今日の運勢</h1>
<p>あなたの今日の運勢は<span id="text";></span>です。</p>
<button onclick="kuji();">おみくじを引く</button>
</body>
結果
ノードを削除します
<body>
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト1</p>
<p id="two">テキスト2</p>
<script>
var p2 = document.getElementById('one');
document.body.removeChild(p2);
</script>
</body>
結果
ノードを置換します
<body>
<h1 id="title">DOMの練習8</h1>
<p id="one">テキスト1</p>
<p id="two">テキスト2</p>
<script>
var h2 = document.createElement('h2');//新しい要素を生成
var text = document.createTextNode('中見出し');//新しい要素のテキストを生成
var p = document.getElementById('one');//替えたい要素
document.body.replaceChild(h2,p);//新しい要素、古い要素
h2.appendChild(text);//新しく作った要素にテキストを追加
</script>
</body>
結果
