JavaScript: HTML 要素 (タグ) の処理

概略

• HTML の用語 - タグ、要素など
  HTML 要素、タグ、属性などの用語の説明。

HTML 要素や内容を取り出す

• HTML の要素を取り出す
  querySelector() や getElementById() などの話。
  

サンプル

• TestJS_element_properties01.html
  HTML 要素のプロパティを表示。
• TestJS_element_outerHTML01.html
  指定の要素以下の HTML ソースを表示。outerHTML のサンプル。
• TestJS_codetest_currentScript01.html
  document.currentScript のサンプル。 現在実行中のスクリプトがある script 要素を取得する。 Element.append() で HTML にテキストを出力する。
  テストプログラムの実行とソース表示
  文法などのノート

HTML 要素にテキストを出力する (2023/10)

• HTML 要素にテキストを出力する

Node, Element, HTMLElement (2024/01)

querySelector() で取り出した値は HTMLElement のオブジェクトです。 タグの種類によっては HTMLElement のサブクラス (子供のクラス) になっているものもあります。例えば span タグは HTMLSpanElement のオブジェクトです。

• TestJS_HTMLElement01.html
  HTMLElement のクラス名を調べるサンプル。

(親) HTMLElement      b タグなど
  + (子) HTMLHeadingElement    h1 タグ, h2 タグなど
  + (子) HTMLSpanElement       span タグ
  + (子) HTMLParagraphElement  p タグ
  + (子) HTMLUListElement      ul タグ
  + (子) HTMLLIElement         li タグ
  ...
  他にも img や table や dl などに対応するたくさんのクラスがあります。
  通常、具体的なクラス名を気にする必要はありません。

HTMLElement は Node や Element のサブクラス です。MDN のドキュメントではクラス (class) ではなくインターフェイス (interface) という用語を使用しています。

◎ クラス (インターフェイス) の親子関係

(先祖) EventTarget               MDN: EventTarget
   + (親) Node                   MDN: Node
      + (子) Element             MDN: Element
      |  + (孫) HTMLElement      MDN: HTMLElement
      + (子) Document            MDN: Document

子や孫のオブジェクトは親や先祖のプロパティやメソッドを使うことができます。 HTMLElement のオブジェクトは Element や Node や EventTarget にあるプロパティにアクセスしたりメソッドを使ったりすることができます。 例えば tagName プロパティや querySelector() メソッドは Element にあり、 parentNode プロパティや appendChild() メソッドは Node にあり、 addEventListener() は EventTarget にあります。

親や祖先にたくさんのプロパティやメソッドがありますが、 実際によく使用するものはわずかです。

参考で Document のオブジェクトは Element と兄弟の関係にあります。 Document の親も Node や EventTarget でこれらのプロパティやメソッドを使うことができます。

サンプル

• TestJS_node_childNodes01.html (2024/01)
  Node.childNodes でノードをたどるサンプル。 nodeType, nodeName など。

HTML 要素を削除・移動する (2023/12)

HTML 要素を削除する: Node.removeChild()

• TestJS_element_removeChild01.html
  ul、li タグのリストで li タグをすべて削除するサンプル。 removeChild() を使います。 指定した HTML 要素 (タグ) の中を空にする処理は Web プログラミングでよく出てくる定番の処理です。
  

  while (element.firstChild){
  	element.removeChild(element.firstChild);
  }
  

  MDN: Node: removeChild() メソッド
  

• TestJS_element_removeChild_for01.html (2024/01)
  for 文や forEach() で ul 内のノードを削除するサンプル。
  反復処理 for, while など

HTML 要素を移動する

HTML 要素を作る (2023/12)

HTML テキストではなくて、table や ul などの HTML 要素 (HTMLElement) のオブジェクトを作成して ドキュメントツリーを作る話です。

• JavaScript: HTML 要素を作成する に引越し。

XML の処理

XML も HTML 要素の操作とほぼ同じ感覚で処理できます。

• JavaScript: XML の処理

SVG も XML なので XML の処理を使用します。

関連

• JavaScript: HTML 要素にテキストを出力する
• JavaScript: HTML 要素を取り出す
• JavaScript: HTML 要素を作成する
• HTML: template タグ
• JavaScript: XML の処理
• svg タグ: JavaScript (1)
• iframe タグ: JavaScript サンプル