$
$ 메서드는 ofa.js의 핵심 함수로, DOM 요소 인스턴스를 가져오고 조작하는 데 사용됩니다. 아래에서는 $의 주요 기능을 자세히 소개합니다:
요소 인스턴스 가져오기
$ 메서드를 사용하면 페이지에서 CSS 선택자와 일치하는 첫 번째 요소 인스턴스를 가져와 조작할 수 있습니다. 다음은 예시입니다.
target 1 text
위의 예시에서 우리는 $ 기호를 사용해 id가 "target1"인 요소 인스턴스를 선택하고, text 속성을 설정해 그 텍스트 내용을 수정했습니다.
자식 요소 인스턴스 찾기
인스턴스도 $ 메소드를 가지며, 인스턴스의 $ 메소드를 통해 요소 인스턴스의 첫 번째 조건에 맞는 하위 요소 인스턴스를 가져올 수 있습니다.
타겟
저는 target1입니다
획득한 요소 인스턴스를 다른 곳에 직접 삽입하지 마십시오. 이러한 작업은 원래 요소에 영향을 미칠 수 있습니다. 복사본이 필요한 경우 clone 메서드를 사용할 수 있습니다.
position 1
I am target1
position 2
그림자 노드 내의 하위 요소 가져오기
shadow 속성으로 인스턴스를 가져온 후, $ 메서드를 통해 원하는 요소를 가져올 수 있습니다:
$('my-component').shadow.$("selector").method(xxx)요소를 직접 인스턴스화
다음과 같은 방법으로 네이티브 요소를 바로 $ 인스턴스 객체로 초기화할 수 있습니다:
const ele = document.createElement('div');
const $ele = $(ele);const ele = document.querySelector('#target');
const $ele = $(ele);이렇게 하면 기존 HTML 요소를 $ 인스턴스로 쉽게 변환하여 $가 제공하는 기능을 사용하여 조작하고 처리할 수 있습니다.
요소 인스턴스 생성
뿐만 아니라, $는 기존 요소 인스턴스를 가져오는 것 외에도 새 요소 인스턴스를 생성하여 페이지에 추가하는 데 사용할 수 있습니다.
문자열을 통해 생성
$ 함수를 사용하여 문자열을 통해 새 요소 인스턴스를 생성할 수 있습니다. 아래와 같습니다:
target1:
이 예제에서는 $ 함수를 사용하여 지정된 스타일과 텍스트 내용을 가진 새 요소 인스턴스를 생성하고, id가 "target1"인 기존 요소 인스턴스 내에 추가합니다.
객체 생성을 통한
$ 함수를 사용하여 객체 방식으로 새 요소 인스턴스를 생성할 수도 있습니다. 아래와 같습니다:
target1:
이 예제에서는 $ 함수를 사용하여 객체 방식으로 태그 유형, 텍스트 콘텐츠 및 스타일 속성을 포함한 새 요소 인스턴스를 정의하고, 이를 id가 "target1"인 기존 요소 인스턴스 내에 추가합니다.
가져온 예시와 페이지/컴포넌트 인스턴스의 관계
$ 메서드는 전역에서 해당 페이지 또는 컴포넌트 요소의 인스턴스를 가져오는 데 사용할 수 있으며, 그 기능은 페이지 또는 컴포넌트 모듈 내 생명주기 메서드의 this 참조와 동일합니다.
<!DOCTYPE html>
...
<l-m src="./test-comp.html"></l-m>
<test-comp id="target"></test-comp>
<script type="module">
setTimeout(()=>{
console.log($('#target').title); // => OFAJS 컴포넌트 예제
},300);
</script><!-- test-comp.html -->
<template component>
<div>
<p>{{title}}</p>
</div>
<script>
export default async ({ load }) => {
return {
tag: "test-comp",
data: {
title: "OFAJS 컴포넌트 예제",
},
attached(){
console.log(this === $('#target')); // true
}
};
};
</script>
</template>