많은 사용자가 jQuery를 사용하여 HTML DOM에 요소가 있는지 확인하는 방법에 대해 의구심을 가지고 있습니다. 간단히 말해서, 가능한 가장 간단한 방법으로 페이지에 요소가 있는지 확인하는 방법은 무엇입니까?
이 결과를 얻기 위해 사용할 수 있는 몇 가지 방법이 있습니다. 그 중 하나는 요소 선택의 “길이” 속성이 0보다 큰 숫자를 반환하는지 확인하는 것입니다.
예를 들어 아래에 표시된 것과 유사한 HTML이 있는 경우.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv">Lorem ipsum dolor sit amet.</div>
9</body>
10</html>
그리고 “myDiv” 요소가 DOM에 있는지 확인하고 싶습니다. 즉, 페이지에서 다음 코드를 사용할 수 있습니다.
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
코드 단순화
JavaScript의 많은 것들이 true 또는 false이므로 “length” 속성의 반환도 true 또는 false로 간주될 수 있습니다. 반환값은 숫자이고 0은 “거짓"을 나타내고 나머지는 모두 “참"을 나타냅니다.
따라서 다음과 같이 코드를 단순화할 수 있습니다.
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
비교 “> 0"을 제거해도 반환 값은 동일하게 유지됩니다.
jQuery를 위한 “exists” 함수 만들기
조금 더 나아가 “exists"라는 함수를 추가할 수 있습니다. 이 함수는 우리가 확인하고자 하는 요소에 직접 사용할 수 있습니다.
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
우리는 훨씬 더 개선할 수 있고 방법이 연쇄 가능성을 나타내는 것을 방지할 수 있습니다. 이 경우에는 불가능합니다. 우리는 다음과 같이 할 것입니다.
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
이제 객체에서 직접 체인을 시뮬레이션하는 대신 선택기를 “exists” 함수에 대한 인수로 전달합니다.
배열을 사용하여 HTML 요소의 존재 확인
jQuery에서 선택기를 사용하면 요소 배열을 반환합니다. 이 배열의 첫 번째 요소에 액세스하려고 시도하고 “정의되지 않음"을 반환하면 해당 요소가 DOM에 존재하지 않음을 나타냅니다.
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
보시다시피 페이지에 HTML 요소가 있는지 확인하는 방법에는 여러 가지가 있습니다. 최고는 무엇입니까? 글쎄, 당신의 문제를 해결하는 사람. 중요한 것은 코드가 실행되고 작동한다는 것입니다.