Node オブジェクト

DOM と Node オブジェクト

DOM とは Document Object Model の意味である。 HTML は階層構造（ツリー構造）をもっている。DOM ではこの構造を Node オブジェクトによってあらわす。

この再帰構造を表示するプログラムは、久野靖の「入門 JavaScript」p.125 の function doNodes() である。 ただし、doNodes() を呼び出す関数 doTest() をそのまま使うとプログラムが終了しないので、 return false; の前に d1.writeln('</pre>'); d1.close(); の２文を挿入している。

Test のボタンをクリックすると、別ウィンドウに DOM が再帰的に表示される。

Test

Element

Node オブジェクトの子の一つに、Element オブジェクトがある。

HTMLElement

Element オブジェクトの子の一つに、HTMLElement オブジェクトがある。

HTMLTableElement

HTMLElement オブジェクトの子の一つに、HTMLTableElement オブジェクトがある。

HTMLElement
  HTMLTableElement
		HTMLTableCaptionElement
		HTMLTableCellElement
		HTMLTableColElement
		HTMLTableRowElement
		HTMLTableSectionElement

HTMLTableElement を使うと表が容易に制御できる。 HTMLTableElement(developer.mozilla.org)

次の HTML があったとする。

	<table id="tbl"><th>1</th><th>2</th></table>
	<button id="btn">行追加</button>

この表に、最後の行を追加する場合は JavaScript を次のように記述する。

const tbl = document.getElementById("tbl");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  const tr = tbl.insertRow(-1);
  const cell0 = tr.insertCell(0);
  const cell1 = tr.insertCell(1);
  cell0.textContent = "abc";
  cell1.textContent = "def";
});

下記の表に対して、下の「行追加」ボタンを押すたび、下に行が増えていく。

行追加

なお、この insertRow() は、<table> のなかに <tr> がなくとも動作する。

まりんきょ学問所 ＞ JavaScript 手習い ＞ Node オブジェクト