@ JavaScript

DOM:関連ノードのプロパティ

要素ノードでは親要素や、子要素など関連したノードをプロパティとして保持しています。

childNodes プロパティ

要素ノードには childNodes というプロパティがあります。

format

ノードリスト = 要素ノード.childNodes;

ここでは子要素すべてのノードがノードリストとして入っています。childNodes は読み取り専用で、ノードリストをこのプロパティに代入することはできず、新しいノードを追加したり、差し替えたりする場合は appendChild() や insertBefore() を使う必要があります。

ul エレメントの子ノード li のデータを取得する JavaScript コードは次のとおりです。

childnodes.html

<ul id="list">
  <li>this</li>
  <li>is</li>
  <li>a</li>
  <li>test</li>
</ul>
<div id="output"></div>

<script>
var ul = document.getElementById("list");
var li = ul.childNodes;
var result = "";
for (var i = 0, len = li.length; i < len; i++) {
  if (li[i].nodeName == "LI") {
    result += "innerHTML: " + li[i].innerHTML + "<br>";
  }
}
document.getElementById("output").innerHTML = result;
</script>

firstChild、lastChild プロパティ

firstChild は最初の子ノードを、lastChild は最後の子ノードを返すプロパティです。

format

ノード = 要素ノード.firstChild;
ノード = 要素ノード.rastChild;

table エレメントの子孫ノード td のデータを取得する JavaScript コードは次のとおりです。

firstchild.html

<table id="table">
  <tr>
    <td>this</td>
    <td>is</td>
    <td>a</td>
    <td>test</td>
  </tr>
</table>
<div id="output"></div>

<script>
var result = "";
var tr = document.getElementById("table").childNodes[0].rows;
for (var i = 0; i < tr.length; i++) {
  var td = tr[i].cells;
  for (var j = 0; i < td.length; j++) {
    result += "firstChild.data: " + td[j].firstChild.data + "<br>";
    document.getElementById("output").innerHTML = result;
  }
}
</script>

parentNode プロパティ

親ノードを返すプロパティです。

format

ノード = 要素ノード.parentNode;

parentnode.htmJ

<div id="palent">
  <ul id="element">
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ul>
</div>

<script>
var element = document.getElementById("element");
var parent = element.parentNode;
console.log(parent.id);
</script>