본문 바로가기
웹디자인 (HTML,SC)

jQuery와 JavaScript로 요소(element)가 있는지 확인

by 날으는물고기 2021. 4. 10.

jQuery와 JavaScript로 요소(element)가 있는지 확인

728x90

페이지 내에서 특정한 객체 요소가 있는지 확인할 수가 있습니다.

 

jQuery에서 요소가 있는지 .length 속성을 사용해서 확인 합니다.

 

if ($('#elem').length) {
  alert('elem exists');
}

 

자바스크립트(JavaScript)에서는 getElementById() 함수를 사용하여 해당 Id의 요소가 있는지(exists) 확인 합니다.

 

if (document.getElementById('elem')) {
  alert('elem exists');
}

 

getElementById() 함수를 사용하여 DOM에서 요소의 존재 여부 확인

getElementById() 함수를 사용하여 요소의 Id를 사용하여 DOM에 요소가 있는지 확인할 수 있습니다.

다음 예에서는 <a id="Anchor Id" href="#">Click Here</a> 여기를 클릭 요소가 DOM에 존재하는지 확인합니다.

<html>
    <body>
        <a id="Anchor Id" href="#">Click Here</a>
        <script>
            var testData = document.getElementById("Anchor Id");
            console.log(testData);
        </script>
    </body>
</html>

출력:

<a id="Anchor Id" href="#">Click Here</a>

반환 된 요소 대신 부울 값을 반환하려면 document.getElementById("Anchor Id"); 앞에 !!를 추가 할 수 있습니다.

<html>
    <body>
        <a id="Anchor Id" href="#">Click Here</a>
        <script>
            var testData = !!document.getElementById("Anchor Id");
            console.log("Is Not null?",testData);
        </script>
    </body>
</html>

출력:

Is Not null? true

 

getElementsByClassName() 함수를 사용하여 DOM에서 요소의 존재 여부 확인

getElementById() 함수로 Id를 사용하여 요소를 찾는 것과 유사하게, getElementsByClassName(), getElementsByName() getElementsByTagName() 과 같은 정의 된 기준으로 동일한 작업을 수행하는 다른 많은 함수도 있습니다.

 

getElementsByClassName() 함수는 클래스 이름을 사용하여 DOM에서 요소를 찾는 데 사용됩니다. 클래스 이름 값의 예는 <a class="ClassExample"></a> 요소의 ClassExample입니다. 요소가 발견되면 하나 이상의 요소를 반환하고 요소가 없으면 null을 반환합니다.

 

getElementByClassName() 함수의 다음 예를 살펴 보겠습니다.

<html>
    <body>
        <a class="ClassExample" href="#">Click Here for the class example </a>
        <script>
            var classname = document.getElementsByClassName("ClassExample");
            var classnameExists = !!document.getElementsByClassName("ClassExample");

            console.log("Element :",classname);
            console.log("Is Not null ? ",classnameExists);
        </script>
    </body>
</html>

출력:

Element : HTMLCollection [a.ClassExample]
Is Not null ?  true

함수 getElementsByClassName() 앞에 !! 기호를 사용하여 결과를 부울 값으로 형변환 할 수 있습니다. 여기서 값이 있으면 true를 반환하고 null을 반환하면 false를 반환합니다.

 

getElementsByName() 함수를 사용하여 DOM에서 요소의 존재 여부 확인

getElementsByName() 함수는 이름으로 DOM의 모든 요소를 찾는 데 사용됩니다. 요소의 Name<a name="ElementNameHolder"></a> 요소에서 ElementNameHolder 값을 가집니다.

 

다음 예를 보겠습니다.

<html>
    <body>
        <a class="ClassExample" name="ElementNameHolder" href="#">Click Here for the class example </a>
        <script>
            var EleName = document.getElementsByName("ElementNameHolder");
            var elementNameExists = !!document.getElementsByName("ElementNameHolder");

            console.log("Element :",EleName);
            console.log("Is Not null ? ",elementNameExists);
        </script>
    </body>
</html>

출력:

Element : NodeList [a]
Is Not null ? true

 

getElementsByTagName() 함수를 사용하여 DOM에서 요소의 존재 여부 확인

getElementsByTagName() 함수는 DOM에 지정된 tagName을 가진 모든 요소를 반환 할 수 있습니다. 함수의 반환은 하나 이상의 요소이거나 요소가 없으면 null일 수 있습니다.

 

다음 예제는 필수 요소가 DOM에 있는지 확인하는 방법을 보여줍니다.

<html>
    <body>
        
        <exampleTag>
            <a name="ElementNameHolder1" href="#">Click Here for the tag name example 1 </a>
        </exampleTag>
        
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Click Here for the tag name example 2 </a>
        </exampleTag>
        
        <script>
            var EleTagName = document.getElementsByTagName("exampleTag");
            
            console.log("Element 1 :",EleTagName[0].innerHTML);
            console.log("Element 2 :",EleTagName[1].innerHTML);
        </script>
    </body>
</html>

출력:

Element 1 : 
            <a name="ElementNameHolder1" href="#">Click Here for the tag name example 1 </a>
        
Element 2 : 
            <a name="ElementNameHolder2" href="#">Click Here for the tag name example 2 </a>

 

contains() 함수를 사용하여 보이는 DOM에서 요소의 존재를 확인

보이는 DOM에서 요소의 존재를 확인하려면 첫 번째 인수에서 보내는 요소를 보이는 DOM에서 검색하는 document.body.contains()를 사용할 수 있습니다.

 

contains() 함수는 하나의 노드 만 수신하므로 document.getElementsByTagName 또는document.getElementsByName 함수 중 하나를 사용하여 노드를 검색 할 때 해당 함수가 모든 요소를 반환하므로 보낼 요소를 하나만 선택해야합니다. 선택 기준과 일치하는 것을 찾았습니다.

<html>
    <body>
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 1</a>
            <a id="ElementId1" href="#">Tag, Name, Id in visible DOM example 2</a>
        </exampleTag>
        
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 3</a>
            <a id="ElementId2" href="#">Tag, Name, Id in visible DOM example 4</a>
        </exampleTag>
        
        <script>
            var EleTagName = document.getElementsByTagName("exampleTag");

            let myVar1 = document.body.contains(document.getElementsByTagName("exampleTag")[0]);
            let myVar2 = document.body.contains(document.getElementsByName("ElementNameHolder2")[0]);
            let myVar3 = document.body.contains(document.getElementById("ElementId2"));
            console.log("Element 1 :",EleTagName[0].innerHTML);
            console.log("Element 2 :",EleTagName[1].innerHTML);
        </script>
    </body>
</html>

출력:

Element 1 : 
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 1</a>
            <a id="ElementId1" href="#">Tag, Name, Id in visible DOM example 2</a>
        
Element 2 : 
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 3</a>
            <a id="ElementId2" href="#">Tag, Name, Id in visible DOM example 4</a>

 

출처 : delftstack.com

728x90

댓글0