読者です 読者をやめる 読者になる 読者になる

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>

結果 

f:id:develog:20160906174245g:plain

画像をクリックすると画像を切り替えます

<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>

結果

f:id:develog:20160906175230p:plain

f:id:develog:20160906175237p:plain

ボタンをクリックすると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>

結果

f:id:develog:20160906174339p:plain

f:id:develog:20160906174350p:plain

運勢をランダムに表示します

<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>

結果

f:id:develog:20160906174402g:plain

f:id:develog:20160906174409g:plain

ノードを削除します

<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>
結果

f:id:develog:20160909104212g:plain

ノードを置換します

<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>

結果

f:id:develog:20160909104848g:plain