Javascript ノードの取得や挿入

公開日: : 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>
    

関連記事

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

画像の拡大・縮小 タッチイベント

画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。

記事を読む

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

画像加工 cropbox.js

写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c

記事を読む

javascript

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Javascript ノード の取得や挿入
Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document

Wordpress 独自テーブル 商品名と料金
WordPress 独自テーブル

Wordpress で独自テーブルを作ってみようと思います。 独

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)
WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細

Wordpress 自作フォーム
WordPress 自作フォーム その1(サンプルと設置)

Wordpress でプラグインを使わずにフォームをやってみます。

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分か

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑