HTMLDOMでnodeと呼ばれているものはjavascriptではオブジェクトと呼ばれるのでしょうか。

Question

javascriptで例えばspanタグを追加しようと思っても、("span")とか(span)と書いてもエラーになり、

var a = createElement("span");

などとしてelementnodeにすることでメソッドに渡したりプロパティが参照できるようにしたりできるのでそういうことなのかと思いました。

Answer 1

Node

仕様をざっくり確認しましたが、明確に「Nodeとは何か」について言及されていませんでした。
しかしながら、JavaScriptにおける Node とは、次の2つの条件を満たすものと判断して良いと私は考えます。

• Object 型である
• プロトタイプチェーン上に Node.prototype が存在している

'use strict';
function isNode (arg) {
  var prototype;

  if (Object(arg) !== arg) {  // Object 型ではないなら
    return false;
  }

  prototype = arg;

  while (prototype = Object.getPrototypeOf(prototype)) {  // プロトタイプチェーンを辿る
    if (prototype === Node.prototype) { // Node.prototype が存在するなら
      return true;
    }
  }

  return false;
}

console.log(isNode(document.createElement('p')));     // true
console.log(isNode(document));                        // true
console.log(isNode(document.defaultView));            // false
console.log(isNode(document.createTextNode('')));     // true
console.log(isNode(document.createComment('')));      // true
console.log(isNode(document.createAttribute('')));    // true

window (document.defaultView) の扱いについて

歴史的な理由で後から拡張された window (document.defaultView) はプロトタイプチェーン上に Node.prototype が存在しません。
window は DOM の仕様内に存在するので「DOM オブジェクト」の一部といえますが、「Node ではない」と解釈できます。

正式名称が「Document Object Model (DOM)」とあるように、DOMとは document をルートノードとしたオブジェクトモデルを指しています。
UI Events(旧称 DOM Events)ではバブリングフェーズのイベント伝播先として、document の次に window まで伝播されるように拡張されましたが、これは例外的な措置だと私は思います。

HTML DOM

「HTML DOM」の用語は defghi1977 さんの下記回答が初出だと思いますが、私としては仕様書上に「HTMLDOM」の語句が確認できない為に「HTML DOM」は俗語(正式名称ではなく、便宜上の為に著者が作成した用語)と解釈しています。

• jQuery - jQueryの変数宣言の意味(103126)｜teratail

HTMLDOMの名称に近い仕様として「Document Object Model (DOM) Level 2 HTML」がありますが、この仕様はHTMLで規定された各々の要素に関する仕様であり、DOM Core や DOM Events が含まれない限定的な仕様です。

• [Document Object Model (DOM) Level 2 HTML

Specification](https://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/)

defghi1977 さんはもっと広い意味でDOMの学習を勧めているように読めますので、あまり「HTML DOM」の用語にとらわれない方が良いと私は思います。
なお、DOMの学習を進める事は私も賛成です。

Re: yamagata_user さん

Comments

[defghi1977]

厳密にはHTMLDOMじゃなくてDOMですね. 当方SVGにおけるDOM（SVG DOM）と区別するためにHTMLDOMとよく記述してしまいます. (API構成がかなり異なるので明確に区別しないとしっちゃかめっちゃかになってしまうので)

[think49]

To: defghi1977 さん
SVGには詳しくないので見当違いのコメントをしていたら申し訳ないのですが…。

https://triple-underscore.github.io/SVG11/svgdom.html では "SVG DOM は DOM Level 2 Core [DOM2] の完全なサポートを要求する。" とありました。
https://triple-underscore.github.io/SVG11/escript.html では DOM Level 2 Events, DOM Level 2 Views, DOM Level 2 Style を参照するように言及されています。
ここであげられている DOM Level 2 Core, DOM Level 2 Events, DOM Level 2 Views, DOM Level 2 Style はSVGだけで使われる仕様ではなく、HTML文書を解釈するWebブラウザでも同様に使われるものです。
DOM には「Java 言語束縛」「ECMAScript 言語束縛」のような多少の言語束縛規定も存在しますが、基本的にはどの言語にも同じインターフェースで実装される共通仕様と理解しています。
なので、「HTML DOM」「XML DOM」「SVG DOM」のような区分けがない領域があるように感じています。
では、どう区別するかというと仕様書の名称で区別するしかなくて、「Scalable Vector Graphics (SVG) 1.1 (Second Edition)」や「Scalable Vector Graphics (SVG) 2」のような名前でDOMと区別する事になるのでは、と思いました。
https://www.w3.org/TR/SVG11/
https://www.w3.org/TR/SVG2/
重ねて書きますが、SVGには深い知識がないので、見当違いのコメントでしたらすみません。

[think49]

ちなみに、Nodeの説明に関しては「DOM Level 2 Core」や「DOM Standard」の仕様を基に回答しています。

"仕様書上に「HTMLDOM」の語句が確認できない" と書きましたが、HTML Standard で一つだけ使われている記述を見つけました。
https://html.spec.whatwg.org/multipage/parsing.html#coercing-an-html-dom-into-an-infoset
HTML parser が解析した結果の DOM を HTML DOM と表現しているようです。
Document と HTMLDocument の違いを表しているのでしょうか。

[defghi1977]

ざっくりというと, 大本のDOMとしての振る舞いはHTMLのそれとSVGのものとで同じです. しかしそれはDOMツリーに対するアクセス（XML文書としての操作）までです.
SVGは長年HTMLとは全く別の発展を遂げてきたこともあり, 一度イベントモデルなどを含めHTMLと全く異なる形になりかけました(SVG 1.2). 幸いHTML5におけるHTMLとSVGとを統合する流れにおいて, （まだマシな）一つ前のSVG1.1での仕様を採用することとなりましたが, それでもHTMLDocumentを頂点とするHTMLのDOMとSVGDocumentを頂点とするDOMとでは細かい部分でかなりの量の非互換があります（例:class属性に対応するclassプロパティの実体がHTMLではDOMStringに対してSVGではSVGAnimatedString等）. そのためjQueryはSVGに対して正しく動作しません. こういった実情もあり, 明確にHTML DOMとSVG DOMとを分けて考える必要がある「こともあります」. なお, 将来的にはSVG2仕様としてHTMLとの親和性を踏まえたものに置き換えられる模様ですが, 既に幅広く使われてしまっているものですので, 今しばらくはこの違いを念頭に入れておく必要があります.

[defghi1977]

私の文脈ですと, 「(XML) DOM」がHTMLとSVGのDOM共通の（つまりスーパークラスとしての）DOMで, HTML DOM，SVG DOMはそれぞれ言語毎にAPIを拡張した（つまりサブクラスとしての）DOMと解釈しています.

例えば, SVG DOMにはinnerHTMLプロパティは存在しませんでした(2011年頃). が, その後急激にAPIのミックスが始まり, 今ではSVGElementに対するinnerHTMLやouterHTML等のプロパティがそのまま使えるようになっていたりします. (そのため私の用語の使い方はもはや時代遅れなのかもしれません)

[think49]

なるほど、SVG DOMが標準のDOMとは違った形で進化したことを踏まえて HTML DOMと表現したのですね。
勉強になりました。

[defghi1977]

まぁSVGに対する操作は全部setAttributeとgetAttributeで事足りるので, カオスなSVG DOMを知らずとも何とかなるのですが

[yamagata_user]

よく理解できない部分は概念がたくさんあるのでもっと学習を積みます。
ありがとうございました。

[yamagata_user]

「Nodeとは何か」については前よりも具体的に理解できたように思います。
ありがとうございます。

Answer 2

createElement("span");はdocument.createElement("span");の間違いではないでしょうか？
おそらくcreateElement("span");だけ記述してもエラーになると思います。

Comments

[yamagata_user]

document.createElement("span");の間違いでした。私のミスでした。ご指摘ありがとうございます。