ノードを追加・削除する

ノードを追加する

  1. 要素 / テキストノードを作成
    • createElement / createTextNode
  2. ノード動詞を組み立て、ドキュメントに追加
    • appendChild
createElementメソッド
  • 要素を作成する
  • document.createElement( name )
  • name: 要素名
  • ノードを作成するためだけのメソッド
  • 別途階層に追加する処理が必要
createTextNodeメソッド
  • テキストノードを作成する
  • document.createTextNode( text )
  • text: テキスト
  • ノードを作成するためだけのメソッド
  • 別途階層に追加する処理が必要
appendChildメソッド
  • 指定された要素を、現在の要素の最後の子要素として追加
  • document.appendChild( node )
  • element: 要素オブジェクト
  • node: 追加する子ノード
  • 戻り値:追加した子ノード
<body>
<ul id="list">
</ul>
<button onclick="appendElement()">要素を追加</button>
<script>
function appendElement() {
  // liタグの要素を生成
  var li = document.createElement('li');
  // テキストノードを生成
  var text = document.createTextNode('追加文字列');
  // liタグの要素に、テキストノード text を追加。
  li.appendChild(text);
  // idがlistのulタグに、liを追加。具体的には<li>追加文字列</li>が、追加される
  list.appendChild(li);
}
</script>
</body>

ノードの置換

replaceChildメソッド
  • 指定したノードを置き換える
  • replaceNode = parentNode.replaceChild( newChild, oldChild )
    • parentNode:置き換え対象の親ノード
    • newChild:置き換え後のノード
    • oldChild:置き換え対象ノード
    • replaceNode:置き換えられたノード
  • newChildとoldChildを入れ換える(appendChildとremoveChildを同時に行う)
<body>
<ul id="list">
<li id="oldList">古い要素です</li>
</ul>
<!-- <ul id="list">
<li id="newList">新しい要素です</li>
</ul> -->
<button onclick="replace()">置換</button>
<script>
function replace() {
  // 空のli要素を作成
  var newList = document.createElement('li');
  // 生成したノードにid属性"newList"を付与
  newList.setAttribute('id', 'newList');
  // テキストノードを生成
  var newText = document.createTextNode('新しい要素です');
  // 生成したテキストノードを、空のli要素の子ノードとして追加
  newList.appendChild(newText);
  // 置換前の変数oldListの参照を変数oldListに代入
  var oldList = document.getElementById('oldList');
  // 親ノード(ul)の参照を変数parentNodeに代入
  var parentNode = oldList.parentNode;
  // 既存ノードoldListを、新規に生成したli要素newListと置換
  parentNode.replaceChild(newList, oldList);
}
</script>
</body>

ノードを削除する

removeChildメソッド
  • 指定した子ノードを取り除く
  • oldChild = element.removeChild( child )
    • child:DOMから取り除くノード
    • newChild:置き換え後のノード
    • oldChild:取り除かれた子ノードの参照
  • 取り除いたノードoldChildは、再利用できる
<body>
<ul id="list">
  <li>要素1</li>
  <li>要素2</li>
  <li>要素3</li>
  <li>要素4</li>
  <li>要素5</li>
</ul>
<button onclick="remove()">削除</button>
<script>
function remove() {
  var parentElement = document.getElementById('list');
  var lists = parentElement.getElementsByTagName('li');
  var removeIndex = lists.length - 1;
  parentElement.removeChild(lists[removeIndex]);
}
</script>
</body>

演習

  • ユーザーがテキストボックスに文字列を入力後、ユーザーがボタンを押すと、リストの最後の項目として文字列が追加されるプログラムを記述しなさい
  • テキストボックスの要素を取得するには、getElementByIdメソッドを利用する

求職者支援訓練 フェリカテクニカルアカデミー