JavaScript의 DOM에 요소가 있는지 확인

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript의 DOM에 요소가 있는지 확인
Moataz Farid 2023년1월30일
JavaScript JavaScript DOM
  1. getElementById()를 사용하여DOM에서 요소의 존재 여부 확인
  2. getElementsByClassName을 사용하여DOM에서 요소의 존재 여부 확인
  3. getElementsByName을 사용하여DOM에서 요소의 존재 여부 확인
  4. getElementsByTagName을 사용하여DOM에서 요소의 존재 여부 확인
  5. contains()를 사용하여 보이는DOM에서 요소의 존재를 확인합니다
JavaScript의 DOM에 요소가 있는지 확인

이 기사에서는 다양한 방법으로 DOM에서 요소의 존재를 확인하는 방법을 설명합니다.

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>

관련 문장 - JavaScript DOM