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>
    

関連記事

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

canvas タグでお絵描き(レスポンシブ)

canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ

記事を読む

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

記事を読む

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か

記事を読む

画像加工 cropbox.js

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

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

記事を読む

javascript

Message

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

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

canvas タグでお絵描き(レスポンシブ)
canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

→もっと見る

    • 201901
      Mon Tue Wed Thu Fri Sat Sun
      123456
      78910111213
      14151617181920
      21222324252627
      28293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑