HOWTO · JavaScript
JavaScript의 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>