jQuery와 JavaScript로 요소(element)가 있는지 확인
페이지 내에서 특정한 객체 요소가 있는지 확인할 수가 있습니다.
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