getElementByIdなのですが、必ず指定するオブジェクト？はdocumentでしょうか。

すごく基本的な質問かもしれませんが。。

document.getElementById("test");

はエラーになりませんが、

var a = $('div');
console.log(a.getElementById("test"));

とか

console.log($('div').getElementById("test"));

と書くとエラーになります。
getElementByIdの操作対象は「document」以外は許されないのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

はい、getElementByIdは、インターフェースNonElementParentNode、具体的にはdocumentとDocumentFragmentにしかありません（W3C）。

The getElementById() method is not on elements for compatibility with older versions of jQuery. If a time comes where that version of jQuery has disappeared, we might be able to support it.

とのことです。

querySelectorなら、parentNode全般にありますので、古いjQueryが消えるまではelement.querySelector('#id')で代用しましょう。

あと、getElementByIdはネイティブDOMのメソッドですので、jQueryオブジェクトの内部で探す場合は、$('div').find('#id')のようになります。

投稿2017/12/09 04:44

編集2017/12/09 04:54

maisumakun

総合スコア145183

yamagata_user

2017/12/09 05:11

ご回答ありがとうございます。「NonElementParentNode」は親要素のないnode、つまりルートノード＝<html>~</html>ということでしょうか。 DocumentFragmentは調べたのですが意味がよくわかりませんでした。私の書いた$('div')はjQueryの書き方で、getElementByIdはjQueryのメソッドではなくjavascriptのメソッドなのでjQueryの書き方である＄と一緒には使えない、ということなのでしょうか。

maisumakun

2017/12/09 05:26

いえ、documentは<html>より上にあるものです（<html>要素はdocument.documentElementです）。document.childNodesを見ると、DOCTYPE宣言と<html>が入っています。 DocumentFragmentはHTMLに投入するものを組み立てるための作業用で、文書から拾ってくるものではありません。あと、jQueryとDOMネイティブの違いに関してはそのとおりです。「$(DOMオブジェクト)でjQueryオブジェクトを生成する」とか、「$(...)[0]とすると、jQueryに入ったうち1つ目のDOM要素が取れる」とか、変換法はあります。

yamagata_user

2017/12/09 06:26

そういうことだったんですね。 DocumentFragmentは自分でもう少し調べてみます。大変詳しくご説明してくださりありがとうございます。

行動規範の内容に同意します