Lightning コンポーネント開発者ガイド
jDOM のアクセスコンテインメント
コンポーネントは、DOM をトラバースして、同じ名前空間内のコンポーネントで作成された要素にアクセスすることしかできません。この動作により、他の名前空間内のコンポーネントで所有される DOM 要素にアクセスするアンチパターンを回避できます。
DOM コンテインメントを表すサンプルコンポーネントを見てみましょう。
c:domLocker コンポーネントは、<div> 要素と lightning:button コンポーネントを作成します。
次に、DOM 内でピークするクライアント側コントローラを示します。
有効な DOM アクセス
要素が c:domLocker によって作成されるため、次のメソッドは有効な DOM アクセスです。
- cmp.getElements()
- コンポーネントによって表示される DOM 内の要素を返します。
- cmp.find()
- aura:id 属性によって識別される、div およびボタンコンポーネントを返します。
- cmp.find("div1").getElement()
- c:domLocker が div を作成したときに、div の DOM 要素を返します。
- event.getSource().get("v.name")
- イベントをディスパッチしたボタンの名前を返します。この場合は、myButton です。
無効な DOM アクセス
lightning:button で作成された DOM 要素にアクセスするために cmp.find("button1").getElement() を使用することはできません。ボタンが lightning 名前空間にあり、c:domLocker が c 名前空間にあるため、Locker Service は c:domLocker が lightning:button の DOM にアクセスすることを許可しません。
cmp.find("button1").getElement() のコードのコメントを解除すると、エラーが表示されます。