JSノードのプロパティを理解する様々な取得方法と書き換え方法

今回は、「ノード」について、少し深く見ていきます。

ノードを理解することにより、より一層「DOM」の理解が深まると思います。

nodeType
nodeName
nodeValue
textContent
innerText と innerHTML
1. 使い方
2. 書き換え
outerHTML
1. 書き換え
あとがき

nodeType

「nodeType」プロパティを使用すると、ノードのタイプを確認することが出来ます。

HTML
  <body>
    <header>
      <h1 id="sample">getElementByIdを取得する</h1>
    </header>
    <section id="sector1">
      <h2 id="fruits">果物</h2>
      <p>ばなな</p>
      <p>りんご</p>
      <p>ぶどう</p>
      <p>オレンジ</p>
      <p>いちご</p>
    </section>
    <section id="sector2">
      <h2>動物</h2>
      <ul>
        <li>犬</li>
        <li>猫</li>
        <li>鳥</li>
        <li>パンダ</li>
      </ul>
    </section>
    <script type="text/javascript" src="main.js"></script>
  </body>

let element = document.getElementById("sector1");

console.log(element.nodeType);

1

「sector1」は「１」と返されています。

全部で12個の値を返すのですが、代表的なものを抑えておけば良いでしょう。

要素ノード：1
テキストノード：3
ドキュメントオブジェクト：9

更に詳しく知りたい方は以下のサイトをご参照ください。

DOM Standard NORD

nodeName

「nodeName」プロパティを使用すると、ノードの名前を取得出来ます。

console.log(element.nodeName);

SECTION

返される名前は、ノードの種類によって違います。

似たようなプロパティに、「tagName」があります。

対象が要素ノードの場合は、どちらを使っても同じ名前が返されます。

対象が要素ノードでない場合は、「nodeName」しか使うことが出来ません。

子要素ノードなど色んな書き方で取得することが出来ます。

for (let i = 0; i < element.children.length; i++) {
  console.log(element.children.item(i).tagName);
}

H2
5 P

nodeValue

「nodeValue」プロパティを使うと、ノードの値を取得する事ができます。

let section1 = document.getElementsByTagName("p");

for (let i = 0; i < section1.length; i++) {
  console.log(section1.item(i).firstChild.nodeValue);
}

 ばなな
 りんご
 ぶどう
 オレンジ
 いちご

Pタグのノードをすべて取得して、最初の子ノードであるそれぞれのテキストノードを取得しています。

なお、「nodeValue」とほぼ同じ値を取得するものとして、「data」があります。

for (let i = 0; i < section1.length; i++) {
  console.log(section1.item(i).firstChild.data);
}

特にこだわりがなければ、「data」を使うほうが良いでしょう。

textContent

「textContent」プロパティを使用すると、要素内のテキストのみを取得することが出来ます。

console.log(document.body.textContent);

      getElementByIdを取得する
    
    
      果物
      ばなな
      りんご
      ぶどう
      オレンジ
      いちご
    
    
      動物
      
        犬
        猫
        鳥
        パンダ

コンソールの表示を見て頂くと分かると思いますが、すべてのタグが切り取られたような感じで表示されます。

let newFruits = document.getElementById("fruits");
newFruits.textContent = "Fruits";

「textContent」を使って、新しいテキストを設定することが出来ます。

「果物」を「Fruits」に変更してみました。

innerText と innerHTML

使い方

「innerText」プロパティは、要素のテキストを取得します。

「innerHTML」プロパティは、要素のHMTL文を取得します。

let element = document.getElementById("sector1");

console.log(element.innerText);

Fruits

ばなな

りんご

ぶどう

オレンジ

いちご

console.log(element.innerHTML);

      <h2 id="fruits">Fruits</h2>
      <p>ばなな</p>
      <p>りんご</p>
      <p>ぶどう</p>
      <p>オレンジ</p>
      <p>いちご</p>

「innerText」はテキストを、「innerHTML」はHTML文を取得しているのが分かると思います。

書き換え

let newFruits = document.getElementById("fruits");

newFruits.innerText = "Fruits";

let bananas = document.getElementById("banana");

bananas.innerHTML = "美味しい<b>バナナ</b>";

「innerHTML」はHTML文が反映されています。

outerHTML

「outerHTML」は要素のHTML、要素自身のHTMLを取得します。

console.log(element.outerHTML);

<section id="sector1">
      <h2 id="fruits">果物</h2>
      <p id="banana">ばなな</p>
      <p>りんご</p>
      <p>ぶどう</p>
      <p>オレンジ</p>
      <p>いちご</p>
    </section>

「innerHTML」との違いを確認してください。

書き換え

let bananas = document.getElementById("banana");

bananas.outerHTML = "美味しい<b>バナナ</b>";

「ばなな」が「美味しいバナナ」に変わります。

「innerHTML」と「outerHTML」のどちらでも書き換えすることが出来ました。

しかし、ここで注意して欲しい点があります。

それは、「innerHTML」は要素を完全に削除し変更するのに対して、「outerHTML」は要素の変更はせずに、単純に書き換えるのみだということです。

以下、例を見てみましょう。

newFruits.innerHTML = "FRUITS";

bananas.outerHTML = "美味しい<b>バナナ</b>";

console.log(newFruits);

console.log(bananas);

<h2 id="fruits">FRUITS</h2>

<p id="banana">ばなな</p>

どちらも書き換えをしましたが、元のHTML文は、「outerHTML」の方は変わっていません。

これらの違いを、実際のコードを書く時に意識する必要がある場合もありますので、頭に入れておきましょう。