웹디자인 (HTML,JS)

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

날으는물고기 2021. 4. 10. 00:26

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

 

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