Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jDOM のアクセスコンテインメント
コンポーネントは、DOM をトラバースして、同じ名前空間内のコンポーネントで作成された要素にアクセスすることしかできません。この動作により、���の名前空間内のコンポーネントで所有される DOM 要素にアクセスするアンチパターンを回避できます。
DOM コンテインメントを表すサンプルコンポーネントを見てみましょう。
1<!--c:domLocker-->
2<aura:component>
3 <div id="myDiv" aura:id="div1">
4 <p>See how Lightning Locker restricts DOM access</p>
5 </div>
6 <lightning:button name="myButton" label="Peek in DOM"
7 aura:id="button1" onclick="{!c.peekInDom}"/>
8</aura:component>c:domLocker コンポーネントは、<div> 要素と lightning:button コンポーネントを作成します。
次に、DOM 内でピークするクライアント側コントローラを示します。
1({ /* domLockerController.js */
2 peekInDom : function(cmp, event, helper) {
3 console.log("cmp.getElements(): ", cmp.getElements());
4 // access the DOM in c:domLocker
5 console.log("div1: ", cmp.find("div1").getElement());
6 console.log("button1: ", cmp.find("button1"));
7 console.log("button name: ", event.getSource().get("v.name"));
8
9 // returns an error
10 //console.log("button1 element: ", cmp.find("button1").getElement());
11 }
12})有効な 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 名前空間にあるため、Lightning Locker は c:domLocker が lightning:button の DOM にアクセスすることを許可しません。
cmp.find("button1").getElement() のコードのコメントを解除すると、エラーが表示されます。
1c:domLocker$controller$peekInDom [cmp.find(...).getElement is not a function]