【JS】DOM ～ 基本編 / オブジェクト操作 ～

JavaScript

■ はじめに

https://dk521123.hatenablog.com/entry/2011/01/07/012520

の続き。
「３）オブジェクト操作系」を掘り下げる

目次

【１】appendChild()
【２】removeChild()
【３】replaceChild()
【４】cloneNode()

【１】appendChild()

* 要素を追加する
* element1.appendChild(element2)は、
　「要素element1に要素element2を子要素として追加」。

[イメージ] 

element1
 |
 +-- element2

１）サンプル

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function sample()
{
    var element = document.getElementById('here');
    var textNodeObj = document.createTextNode("でしょ?");
    element.appendChild(textNodeObj);
}
</script>
</head>
<body>
<button onclick="sample()">ボタン押下で「あっちに表示→」に「でしょ?」が追加</button>
<div id="here">あっちに表示→</div>
</body>
</html>

参考文献
http://jibun.atmarkit.co.jp/lskill01/rensai/dom06/dom01.html

【２】removeChild()

* 要素の削除

サンプル 

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function sample()
{
    var divId2Obj = document.getElementById('id2');
    divId2Obj.parentNode.removeChild(divId2Obj);
}
</script>
</head>
<body>
<button onclick="sample()">ボタン押下で「ここが消える」が消える</button>
<div id="parent">
  <div id="id1">↓これが消える</div>
  <div id="id2">ここが消える</div>
</div>
</body>
</html>

参考文献
http://jibun.atmarkit.co.jp/lskill01/rensai/dom07/dom01.html

【３】replaceChild()

 * 要素を置き換える

１）サンプル

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function sample()
{
    var divId2Obj = document.getElementById('id2');
    var newTextareaObj = document.createElement('textarea');
    newTextareaObj.value = "ほらね！";
    newTextareaObj.rows = "5";
    newTextareaObj.cols = "20";
    newTextareaObj.style.backgroundColor = 'red';

    divId2Obj.parentNode.replaceChild(newTextareaObj, divId2Obj);
}
</script>
</head>
<body>
<button onclick="sample()">ボタン押下で「ここ」がTextAreaに代わります</button>
<div id="parent">
  <div id="id1">↓これが赤いTextAreaに代わります</div>
  <div id="id2">ここ</div>
</div>
</body>
</html>

【４】cloneNode()

* 要素を複製する

サンプル 

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
var count = 0;
function sample()
{
    var divId0Obj = document.getElementById('id0');
    var newDivbj = divId0Obj.cloneNode(true);
    var divParentObj = document.getElementById('parent');
    divParentObj.appendChild(newDivbj);
}
</script>
</head>
<body>
<button onclick="sample()">ボタン押下すればするほど、「同じ要素が表示」が現れる</button>
<div id="id0">同じ要素が表示</div>
<div id="parent">
</div>
</body>
</html>

【５】insertBefore()

* 要素を指定したい要素の子要素として挿入

１）サンプル

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function sample()
{
    var bodyObj = document.getElementsByTagName('body').item(0);
    var divId2Obj = document.getElementById('id3');
    
    var newDivObj = document.createElement('div');
    newDivObj.id = 'id2';
    var textForNewDivObj = document.createTextNode('便利ですね')
    newDivObj.appendChild(textForNewDivObj);
    
    bodyObj.insertBefore(newDivObj, divId2Obj);
}
</script>
</head>
<body>
<button onclick="sample()">ボタン押下で「↓」と「↑」の間に「便利ですね」が表示</button>
<div id="id1">↓ここに表示</div>
<div id="id3">↑ここに表示</div>
</body>
</html>

関連記事

DOM ～ document.getElementById() ～
https://dk521123.hatenablog.com/entry/2011/12/29/200502
JavaScript覚書
https://dk521123.hatenablog.com/entry/2010/01/15/191626