ownerDocumentの使い方を知りたいです。

質問

javascriptの.ownerDocumentの使い方を知りたいです。
https://developer.mozilla.org/ja/DOM/element.ownerDocument
のサイトを参考に実際にいろいろ試してみました。

ーーーーーーーーーーーーーーーーーーーーー
<script type="text/javascript">
function test1() {
var a = 123;
var b = a.ownerDocument;
document.write(b);
}
</script>

<div>
<span onclick="test1()">テスト</span>
</div>
ーーーーーーーーーーーーーーーーーーーーー
<script type="text/javascript">
function test2() {
var a = this.ownerDocument;
document.write(a);
}
</script>

<div>
<span onclick="test2()">テスト</span>
</div>
ーーーーーーーーーーーーーーーーーーーーー
<script type="text/javascript">
function test3() {
var a = this;
var b = a.ownerDocument;
document.write(b);
}
</script>

<div>
<span onclick="test3()">テスト</span>
</div>
ーーーーーーーーーーーーーーーーーーーーー

全てundefinedとなり、そのまま固まってしまいます。
.ownerDocumentはどのように使うのでしょうか。
アドバイスをよろしくお願いします。

回答No.2

Chaire · ベストアンサー

ひとつの文書木に属するノードは全て、頂点である文書ノード（Document）が管理しています。ノードが所属している文書ノードは ownerDocument で分かります。

細かいことは抜きにして、ひとつ大事なこと。異なる ownerDocument を持つノード同士は、本来そのままでは結合できません。

var parent = ...; // 適当なノード
var child = ...; // 別のフレームや XMLHttpRequest から引っ張って来たノード

// 本来ならエラー
parent.appendChild(child);

正しくはこうです。

// parent の ownerDocument に所属するよう、child を複製する
parent.appendChild(parent.ownerDocument.importNode(child, true));

// child の所属を、parent の ownerDocument に変更する
parent.appendChild(parent.ownerDocument.adoptNode(child));

とはいえ大多数のブラウザでは、importNode()、adoptNode() を通さずともエラーを出さないでしょう。IE の importNode の実装が遅れたこともあり、ほとんどのスクリプト制作者がこのルールを知らずに作ってしまったからです。

---
ownerDocument を使う現実的な理由は、グローバル変数である document を避けることです。

function sample(node) {
　// グローバル変数である document に依存する関数
　// #HOGE と node が同じ文書ノードに属している保証もない
　var hoge = document.getElementById('HOGE');
}

function sample(node) {
　// グローバル変数に依存しない関数
　// #HOGE と node が同じ文書ノードに属していることが明らか
　var hoge = node.ownerDocument.getElementById('HOGE');
}

---
なお、現在策定中の DOM4 では、ownerDocument に関して以下の修正が入る予定です。

・文書ノードの ownerDocument は null ではなく、文書ノード自身になります。
・importNode()、adoptNode() を通さずとも、appendChild() が自動的に ownerDocument を調整します。

お礼

参考になりました。
詳しく説明してくださり有難うございました。

回答No.1

fujillin

変数はdocumentの要素ではないので、ownerDocumentが無いためにundefinedになるのではないでしょうか。

例えば、onclick="test1(this)" とでもしておいて、（thisはそのspan要素）
　function test1(elm) {
　　var doc = elm.ownerDocument;
　　alert( doc + " / " + (doc === document));
　}
とすれば、documentが返されることがわかるかと思います。
（ご提示のように読み込み後に実行する場合は、document.write()はやめた方がよろしいかと…）

＊スクリプトが別ドキュメントから呼び出されることなども想定している場合は、直接documentを指定して記述するよりも、ownerDocumentを利用することのほうが便利な場合が多いかと思われます。

お礼

有難うございます。試したところdocumentと出ました。
ネットで調べても情報が非常に少なく、まだ使い道が理解できていません。
想像ですが、
何か属性が変わるような事態になったときのために保険として、
ownerDocumentを使いその属性を取得して、
その属性がdocumentならば続行し、他の属性に変化した場合は中断
というように使うのでしょうか？