Javascript ノードの取得や挿入
公開日：
:
javascript
ノードの取得
ノードの取得（ダイレクトアクセス）
document.getElementById(‘ID名’);
document.getElementByTagName(‘タグ名’);
document.getElementByClassName(‘クラス名’);
親ノードの取得
parentNode －－ 親ノード
parentElement －－ 親要素ノード
parentNode と parentElement は、ほとんど同じ結果になるが、ルート階層の html 要素の親を取得する時のみ結果が違う。
<script> document.body.parentNode; //<html> が取得される document.body.parentElement;//<html> が取得される document.body.parentNode.parentNode; //#document が取得される document.body.parentElement.parentElement; //null になる </script>
これは、Element（＝要素）が、タグで囲んだ情報の単位なので、 Document タグの要素は空になると言える。
Node（＝ノード）とは、テキストや改行やスペース、コメントアウトまで含める広い概念で、その中にElementも含まれる。
直前のノード
previousSibling
previousElementSibling
<span id="t1">aaa</span>bbb<span id="t2">ccc</span>ddd
<script>
var node = getElementById('t2').previousSibling; //bbbテキストノードを取得
var node = getElementById('t2').previousElementSibling;//t1を取得
</script>
直後のノード
nextSibling
nextElementSibling
<span id="t1">aaa</span>bbb<span id="t2">ccc</span>ddd
<script>
var node = document.getElementById('t1').previousSibling; //bbbテキストノードを取得
var node = document.getElementById('t1').previousElementSibling;//t2を取得
</script>
子ノード
childNodes
children
<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ul>
<script>
var nodes = document.getElementsByTagName('ul')[0].childNodes; // NodeList(7) [text, li, text, li, text, li, text]
var nodes= document.getElementsByTagName('ul')[0].children; // HTMLCollection(3) [li, li, li]
</script>
-
childNodes で子ノードを取得した場合は、TextNode も含め、改行やスペースがノードとして取得され、配列になる。
children で子ノードを取得した場合は、TextNode は含まない、要素ノードだけの li タグのみが取得され、配列になる。
最初の子ノード
firstChild
firstElementChild
<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ul>
<script>
var node = document.getElementsByTagName('ul')[0].firstChild; // 改行などを含む #text を取得
var node = document.getElementsByTagName('ul')[0].firstElementChild; //<li>要素1</li> を取得
</script>
最後の子ノード
lastChild
lastElementChild
<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ul>
<script>
var node = document.getElementsByTagName('ul')[0].lastChild; // 改行などを含む #text を取得
var node = document.getElementsByTagName('ul')[0].lastElementChild; //<li>要素3</li> を取得
</script>
ノードの挿入
子ノードの直前に挿入 insertBefore
挿入ノード = 親ノード .insertBefore ( 新ノード , 挿入前ノード );
<span id="t1">aaa</span>bbb<span id="t2">ccc</span>ddd
<script>
// ノードを作成
var newNode = document.createElement('span');
newNode.setAttribute('id', 't3');
var stringNode = document.createTextNode('new');
newNode.appendChild(stringNode);
// ノードの前に挿入
document.getElementById('t2').parentNode.insertBefore(newNode, document.getElementById('t2'));
</script>
// 結果のHTML <span id="t1">aaa</span>bbb<span id="t3">new</span><span id="t2">ccc</span>ddd
子ノードの直後に挿入 insertBefore
nextSiblingを使うと直後にも使用できる。
// ノードの後に挿入
document.getElementById('t2').parentNode.insertBefore(newNode, document.getElementById('t2').nextSibling);
// 結果のHTML <span id="t1">aaa</span>bbb<span id="t2">ccc</span><span id="t3">new</span>ddd
子ノードの最後に挿入 appendChild
<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ul>
<script>
// 新しく挿入するノードを作成
var newNode = document.createElement('li') ;
newNode.textContent = "要素4" ;
var parentNode = document.getElementsByTagName('ul')[0]
// メソッドの実行
var result = parentNode.appendChild( newNode ) ;
</script>
// 結果のHTML <ul> <li>要素1</li> <li>要素2</li> <li>要素3</li> <li>要素4</li> </ul>
appendChild は、既に存在するノードを引数に渡すと、現在の親ノードから削除され、 親ノードの新しい子ノードとして追加される。
テキストノードも追加でき、引数を複数渡せる append メソッドも存在するが、IE、Edgeで動作しない。
要素のテキスト取得・追加 innerText と textContent
innerText は、IE 特有のプロパティで制作された。
画面上に表示されてないテキストは取得出来ず、使用出来ないブラウザも多いので、textContent を使う方がよい。
HTML要素を取得・追加 innerHTML
innerHTML は有名だが、処理がはやいので、次に紹介する insertAdjacentHTML 使う方がよい。
ノードの挿入 insertAdjacentHTML
element.insertAdjacentHTML(挿入先の相対位置, 新テキストノード);
挿入先の要素を再度パースするものではないため、挿入先の要素や要素内部の機能を維持出来る。innerHTML の代入による直接的な操作より高速である。
直前に挿入
element.insertAdjacentHTML(‘beforebegin’, text);
直後に挿入
element.insertAdjacentHTML(‘afterend’, text);
最初の子要素の直前に挿入
element.insertAdjacentHTML(‘afterbegin’, text);
最後の子要素の直後に挿入
element.insertAdjacentHTML(‘beforeend’, text);
insertAdjacentHTML の例
<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ul>
<script>
var element = document.getElementsByTagName('li')[0];
element.insertAdjacentHTML('beforebegin', '<li>要素0</li>\r\n');//直前に挿入
var element = document.getElementsByTagName('li')[3];
element.insertAdjacentHTML('afterend', '<li>要素4</li>\r\n');//直後に挿入
var element = document.getElementsByTagName('ul')[0];
element.insertAdjacentHTML('afterbegin', '<li>要素-1</li>\r\n');//最初の子要素の直前に挿入
element.insertAdjacentHTML('beforeend', '<li>要素5</li>\r\n');//最後の子要素の直後に挿入
</script>
// 結果のHTML <ul> <li>要素-1</li> <li>要素0</li> <li>要素1</li> <li>要素2</li> <li>要素3</li> <li>要素4</li> <li>要素5</li> </ul>
関連記事
-
-
Javascript Strictモード “use strict”;
Strict モード（厳格モード） Strict モードとは、ECMAScript5（2009年1
-
-
画像の拡大縮小を javascript の touch イベントでやってみる
画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。
-
-
WordPress エラー：Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で（ビジュアルタブの
-
-
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined
Javascript で value の値を取得する このようなHTMLフォームがあった場合、
-
-
Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR
-
-
Javascript ES5,6 の新機能（letとconst,アロー関数,クラスなど）
ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript
-
-
WEBページをアプリっぽくする（サービスワーカーでホーム画面に追加）
前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か
-
-
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる
Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c
-
-
WordPress で VR させて、360°のパノラマ画像を表示する
WordPress.com内ショートコードで VR させる WordPress.com内で、VR（
-
-
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる
