JQuery를 사용하여 WordPress에서 DOM 조작
게시 됨: 2023-02-12WordPress의 오픈 소스 플랫폼과 활기찬 개발자 커뮤니티 덕분에 플랫폼을 위한 테마를 만드는 것은 꽤 폭넓은 매력을 가지고 있습니다. 그러나 WordPress 사이트를 구축하는 데 필요한 모든 요소와 콘텐츠를 탐색하는 것은 프로그래밍 지식과 경험에 따라 어려울 수 있습니다.
다행스럽게도 DOM(문서 개체 모델)을 사용하면 사이트의 HTML 코드를 보다 쉽게 조작하거나 이동할 수 있습니다. DOM은 다양한 노드 또는 개체로 구성된 트리를 생성할 수 있도록 하여 작동합니다. 이렇게 하면 jQuery와 같은 JavaScript 라이브러리를 사용하여 사이트의 표시, 구조 또는 기능을 변경할 수 있는 기회가 열립니다.
이 기사에서는 DOM이 무엇이며 왜 사용해야 하는지 설명합니다. 그런 다음 WordPress에서 DOM을 사용하기 위한 몇 가지 표준 jQuery 조작 기술을 제공합니다. 바로 다이빙하자!
DOM이란 무엇입니까?
간단히 말해서 DOM은 HTML용 API(Application Programming Interface)입니다. 웹 페이지의 내용과 구조를 나타내는 개체 트리를 만듭니다. 또한 플랫폼과 언어에 구애받지 않는 스크립트이기 때문에 매우 다재다능합니다. 이러한 방식으로 DOM이 HTML 소스 코드를 나타낼 때 다양한 프로그래밍 언어가 연결할 수 있도록 액세스할 수 있습니다.
DOM을 사용하는 이유
WordPress 사용자는 동적 상호 작용을 접할 때마다 DOM이 작동하는 것을 볼 수 있습니다. 여기에는 정보가 누락된 양식이 제출된 경우 오류가 반환되는 경우가 포함될 수 있습니다. 콘텐츠 슬라이더는 사용 중인 DOM의 또 다른 예입니다.
개발자는 DOM을 사용하여 웹 페이지의 거의 모든 요소를 업데이트하고 변경할 수 있습니다. 이를 사용하여 문서를 작성하고 해당 구조를 탐색할 수 있습니다. DOM을 사용하여 요소 및 개체를 추가, 수정 또는 삭제할 수도 있습니다.
JQuery를 사용한 DOM 조작
명확히 하기 위해 DOM과 HTML은 동일한 요소를 포함해야 하지만 동일하지 않습니다. DOM은 HTML 소스 코드의 모델링된 표현이며 클라이언트 측 JavaScript에 의해 변경될 수 있습니다.
아래에서는 일부 DOM 조작 기술을 테스트하기 위한 jQuery 라이브러리의 메서드를 살펴보겠습니다. 브라우저마다 DOM을 자체 방식으로 처리하지만 DOM을 사용하기 위해 특별히 수행할 작업은 없습니다. 모든 브라우저는 DOM의 일부 형식을 사용하여 JavaScript에서 페이지에 액세스할 수 있도록 합니다.
DOM 조작 기술
DOM은 다양한 방식으로 사용될 수 있습니다. 유연성을 설명하기 위해 이 유용한 API를 시작할 수 있는 6가지 기술을 살펴보겠습니다.
1. Before() 메서드
이름 그대로 before() 메서드는 코드에 표시된 대로 다른 대상 요소 앞에 요소를 삽입하려는 경우에 사용됩니다.
이 예에서 메서드를 사용하여 버튼을 클릭하면 지정된 요소 위에 텍스트가 있는 사각형 요소를 추가할 수 있습니다.
$(this).before( "<div class='square'>다른 사각형</div>" );
페이지 배치 및 레이아웃은 이 방법을 사용할 때 염두에 두어야 할 고려 사항입니다. 새 요소가 레이아웃을 손상시키거나 시각적으로 문제를 일으키지 않도록 해야 합니다.
2. After() 메서드
before() 메서드를 사용하여 다른 지정된 요소 앞에 요소를 삽입할 수 있는 것과 같은 방식으로 after() 메서드는 그 반대를 허용합니다. 예를 들어 버튼이 선택되면 버튼 바로 아래에 요소를 추가하는 데 사용할 수 있습니다.
$(this).after( "<div class='square'>다른 사각형</div>" );
이와 같이 jQuery로 DOM을 조작하여 대화형 콘텐츠를 추가하는 것은 프로세스 속도를 잃지 않고 상호작용성을 얻을 수 있는 확실한 방법입니다.
3. Append() 메서드
개별 새 요소를 표시하는 대신 기존 요소에 새 요소를 추가할 수 있습니다. 예를 들어 "생일 축하합니다!"라는 텍스트를 추가하고 싶을 수 있습니다. 특정 버튼을 클릭할 때마다 컬러 영역 내에서
새 요소를 대상 요소의 기존 콘텐츠에 추가하려면 HTML 소스 코드 내에 append() jQuery 명령을 삽입합니다.
$( ".box" ).append( "<p>생일 축하합니다!</p>" );
이 방법은 조작을 문자열 앞이나 뒤에 두지 않고 문자열에서 나타내는 요소의 끝에 추가합니다. 전체 HTML 문서의 컨텍스트 내에서 조작이 어떻게 발생하는지 확인할 수 있습니다.
<!doctype HTML>
<title>예시</title>
<스타일>
.상자 {
배경: 주황색;
색상: 흰색;
색상: 흰색;
폭: 150px;
패딩: 20px;
여백: 10px;
}
</스타일>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<스크립트>
$( 함수() {
$( "버튼" ).클릭( 기능() {
$(this).after( "<div class='box'>생일 축하합니다!</div>" );
});
});
</스크립트>
<button>상자 만들기</button>
이 기술은 제한된 공간 내에서 상호 작용을 생성하기 위한 간단한 옵션을 제공합니다. 이 특정 방법을 사용하면 조작이 새로운 개별 요소가 아니라 지정한 요소의 확장으로 나타납니다.
4. Prepend() 메서드
append() 메서드에 대한 균형으로 prepend()는 jQuery 명령에서 지정한 대상 요소의 끝에 요소를 추가합니다.
$( ".banner" ).prepend( "<p>생일 축하합니다!</p>" );
이 예에서 "Happy Birthday!"라는 텍스트는 코드 문자열에 표시된 배너의 시작 부분에 나타납니다.
이러한 메서드( before() , after() 및 append() 포함)는 모두 간단한 사용에 허용되는 접근 방식이라는 점은 주목할 가치가 있습니다. 그러나 보다 복잡한 삽입을 위해 다른 기술을 권장합니다.
5. Clone() 메서드
다음으로 clone() 메서드는 jQuery로 DOM을 조작하는 측면에서 매우 강력한 옵션입니다. 앞의 네 가지 기술을 사용하면 요소를 삽입하고 이동할 수 있지만 clone()을 사용하면 요소를 복사하고 원래 위치에서 제거하고 다른 위치에 다시 삽입하거나 추가할 수 있습니다.
예를 들어, 이 줄은 원본 상자 요소가 그대로 유지되는 반면 복제본이 삼각형 요소에 추가됨을 의미합니다.
$( ".box" ).clone().appendTo( ".triangle" );
이 방법의 단점은 요소의 id 속성이 중복될 수 있다는 것입니다. 이러한 속성은 고유해야 합니다. 클래스 속성을 식별자로 사용하고 복제 방법을 드물게 사용하면 이 문제를 피할 수 있습니다.
6. Wrap() 메서드
마지막으로 wrap() 메서드는 기존 문자열 주위에 요소를 둘러싸려는 경우에 유용합니다. 예를 들어 클래스를 식별하고 구현 중인 구조를 표시하여 여러 단락을 새 HTML 구조로 래핑할 수 있습니다.
$( ".targetclass" ).wrap( "<div class='new'></div>" );
이 기술을 사용하면 wrap() 문자열의 대상 클래스와 일치하는 모든 요소 주위에 <div> 를 생성합니다. 여러 수준 깊이의 랩을 만들 수 있지만 가장 안쪽 요소가 하나만 있는지 확인해야 합니다.
DOM 문제 해결
DOM 작업과 관련하여 주목해야 할 한 가지 주요 측면을 강조하고 싶습니다. 페이지 로딩을 빠르게 유지하고 불필요한 코드를 피하려면(특히 테마를 개발하는 경우) DOM 트리의 일부가 아닌 요소를 사용하지 않도록 주의해야 합니다.
요소가 DOM의 일부인지 확실하지 않은 경우 사이트 프런트 엔드에서 브라우저를 통해 각 요소를 확인할 수 있습니다. 페이지의 요소를 검사하고 DOM 트리에서 요소가 포함된 위치를 확인할 수 있습니다.
이는 다른 스크립트가 사이트의 원래 HTML을 변경한 경우에 특히 유용합니다. 그렇지 않으면 HTML과 DOM이 정확히 동일하게 나타날 수 있습니다.
다른 WP 엔진 리소스 및 도구 탐색
DOM을 사이트의 유기적인 부분, 즉 HTML 소스 코드에 응답하는 살아있는 리소스로 생각한다면 DOM의 접근성은 매우 놀랍습니다. 그렇기 때문에 DOM을 이해하고 DOM을 사용하여 프로젝트를 향상시키는 방법이 사이트를 다음 단계로 끌어올리는 데 도움이 될 수 있습니다.
jQuery로 DOM을 조작하면 WordPress의 오픈 소스 플랫폼의 아름다움이 강조됩니다. 여기 WP Engine에서는 고품질 개발자 리소스가 어떻게 모든 차이를 만들 수 있는지 이해합니다. 그렇기 때문에 우리는 최고의 호스팅 계획과 함께 WordPres 사용자에게 많은 도움을 제공합니다!