質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.84%

  • JavaScript

    14830questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 297

yamagata_user

score 32

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

var a = createElement("span");


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

 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」は俗語(正式名称ではなく、便宜上の為に著者が作成した用語)と解釈しています。

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

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

Re: yamagata_user さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/10 22:02

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

    キャンセル

  • 2017/12/10 23:22

    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には深い知識がないので、見当違いのコメントでしたらすみません。

    キャンセル

  • 2017/12/10 23:39

    ちなみに、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 の違いを表しているのでしょうか。

    キャンセル

  • 2017/12/10 23:47

    ざっくりというと, 大本の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との親和性を踏まえたものに置き換えられる模様ですが, 既に幅広く使われてしまっているものですので, 今しばらくはこの違いを念頭に入れておく必要があります.

    キャンセル

  • 2017/12/11 00:07

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

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

    キャンセル

  • 2017/12/12 22:31

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

    キャンセル

  • 2017/12/12 22:40

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

    キャンセル

  • 2017/12/17 22:52

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

    キャンセル

  • 2017/12/17 22:52

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/17 22:50

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14830questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。