방법을 사용하지 않고 요소가 존재하는지 어떻게 테스트 getElementById합니까?
참조 용 라이브 데모 를 설정했습니다 . 또한 여기에 코드를 인쇄합니다.
<!DOCTYPE html>
<html>
<head>
<script>
var getRandomID = function (size) {
var str = "",
i = 0,
chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
while (i < size) {
str += chars.substr(Math.floor(Math.random() * 62), 1);
i++;
}
return str;
},
isNull = function (element) {
var randomID = getRandomID(12),
savedID = (element.id)? element.id : null;
element.id = randomID;
var foundElm = document.getElementById(randomID);
element.removeAttribute('id');
if (savedID !== null) {
element.id = savedID;
}
return (foundElm) ? false : true;
};
window.onload = function () {
var image = document.getElementById("demo");
console.log('undefined', (typeof image === 'undefined') ? true : false); // false
console.log('null', (image === null) ? true : false); // false
console.log('find-by-id', isNull(image)); // false
image.parentNode.removeChild(image);
console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
console.log('null', (image === null) ? true : false); // false ~ should be true?
console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
};
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>기본적으로 위의 코드는 요소가 변수에 저장되고 DOM에서 제거되는 것을 보여줍니다. 요소가 DOM에서 제거되었지만 변수는 처음 선언되었을 때와 같이 요소를 유지합니다. 즉, 요소 자체에 대한 실시간 참조가 아니라 복제본입니다. 결과적으로 변수의 값 (요소)이 존재하는지 점검하면 예기치 않은 결과가 제공됩니다.
이 isNull함수는 변수에서 요소 존재를 확인하려는 시도이며 작동하지만 동일한 결과를 얻는 더 쉬운 방법이 있는지 알고 싶습니다.
추신 : 주제와 관련된 좋은 기사를 알고 있다면 JavaScript 변수가 왜 이런 식으로 작동하는지 관심이 있습니다.
답변
일부 사람들이 여기에 착륙하는 것 같으며 요소 가 존재 하는지 알고 싶어 합니다 (원래 질문과 조금 다릅니다).
브라우저의 선택 방법 중 하나를 사용하여 진실한 값 (일반적으로)을 확인하는 것만 큼 간단 합니다.
내 요소가 있었다 예를 들어, id의를 "find-me", 나는 간단하게 사용할 수 …
var elementExists = document.getElementById("find-me");이것은 요소에 대한 참조를 반환하거나로 지정됩니다 null. 부울 값이 있어야하는 경우 !!메서드 호출 전에 a를 던지기 만하면 됩니다.
또한 (all living off document) 와 같은 요소를 찾기 위해 존재하는 다른 많은 방법 중 일부를 사용할 수 있습니다 .
querySelector()/querySelectorAll()getElementsByClassName()getElementsByName()
이러한 메소드 중 일부는을 반환 하므로 a 는 객체이므로 진실 이므로 속성 NodeList을 확인하십시오 .lengthNodeList
Csuwldcat은 요소가 가시적 인 DOM의 일부로 존재하는지 (원래 질문 한 것과 같이) 실제로 결정하기 위해 (이 답변에 포함 된 것처럼) 자신을 굴리는 것보다 더 나은 솔루션을 제공합니다 . 즉, DOM 요소 에서contains() 메소드 를 사용 합니다 .
당신은 그렇게 사용할 수 있습니다 …
document.body.contains(someReferenceToADomElement);답변
getElementById()가능한 경우 사용하십시오 .
또한 jQuery를 사용하여 쉽게 수행 할 수있는 방법이 있습니다.
if ($('#elementId').length > 0) {
// Exists.
}타사 라이브러리를 사용할 수없는 경우 기본 JavaScript 만 사용하십시오.
var element = document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
// Exists.
}답변
Node.contains DOM API를 사용하면 페이지 (현재 DOM)에 어떤 요소가 있는지 쉽게 확인할 수 있습니다.
document.body.contains(YOUR_ELEMENT_HERE);CROSS-BROWSER 참고 : documentInternet Explorer 의 개체에는 contains()브라우저 간 호환성을 보장 하는 방법 이 없습니다 document.body.contains(). 대신 브라우저를 사용하십시오 .
답변
나는 단순히 :
if(document.getElementById("myElementId")){
alert("Element exists");
} else {
alert("Element does not exist");
}그것은 나를 위해 일하고 아직 아무런 문제가 없었습니다 …
답변
parentNode 속성이 null인지 확인할 수 있습니다.
그건,
if(!myElement.parentNode)
{
// The node is NOT in the DOM
}
else
{
// The element is in the DOM
}답변
에서 모질라 개발자 네트워크 :
이 함수는 요소가 페이지 본문에 있는지 확인합니다. contains ()가 포함되어 있고 본문에 자체가 포함되어 있는지 확인하는 것이 isInPage의 의도가 아니기 때문에이 경우 명시 적으로 false를 반환합니다.
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}node 는 <body>에서 확인하려는 노드 입니다.
답변
가장 쉬운 해결책은 baseURI 속성 을 확인하는 것 입니다.이 속성은 요소가 DOM에 삽입 될 때만 설정되며 제거 될 때 빈 문자열로 되돌아갑니다.
var div = document.querySelector('div');
// "div" is in the DOM, so should print a string
console.log(div.baseURI);
// Remove "div" from the DOM
document.body.removeChild(div);
// Should print an empty string
console.log(div.baseURI);<div></div>