방법을 사용하지 않고 요소가 존재하는지 어떻게 테스트 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 변수가 왜 이런 식으로 작동하는지 관심이 있습니다.
18
실제로 그것은 요소 자체에 대한 실제 참조이며 더 이상 문서에는 없습니다. DOM에서 요소를 실제로 가져온 다음 모든 이벤트 핸들러 / 등이 여전히 연결된 상태로 나중에 다시 넣을 수 있기 때문에이 기능이 필요합니다. 왜 JS 변수가 그렇게 작동합니까? 그들이하지 않으면 그것은 매우 성가신 것입니다. JS는 더 이상 변수에 대한 참조가 없을 때만 변수를 삭제합니다. 이 언어는 어떤 참조가 중요하다고 생각하는지 그리고 어떤 것이 가치가 없다고 생각하는지 알 방법이 없습니다.
—
마크 칸
@cwolves 흥미로운. 나는 전에 여러 번 이런 문제를 겪어 본 적이 없었습니다. 사실, 현재 프로젝트에서 변경 사항을 되돌리려는 경우를 대비하여 변경하기 전에 배열에 요소를 저장합니다.
—
저스틴 불
가비지 콜렉션은 때때로 실행되며 가능한 모든 것을 삭제합니다. 대부분의 브라우저에서 꽤 거칠게 보이지만 개발자가 일부 브라우저가 다시 시작하는 데 며칠 또는 몇 주 동안 실행된다는 것을 인식함에 따라 더 나은 가비지 수집이 브라우저 성능에 필수적입니다. 웹 개발자는 더 이상 필요없는 속성 (따라서 메모리의 항목에 대한 참조)을 삭제하여 도움을 줄 수 있습니다.
—
RobG
@JustinBull은 되돌릴 요소의 사본을 저장하는 데주의하십시오. DOM 요소를 배열에 저장하면 사본이 아닌 DOM 요소에 대한 참조가 저장되므로 배열의 요소를 참조 할 때 DOM 요소에 대한 변경 사항이 반영됩니다. 자바 스크립트의 모든 객체 ( 'object'유형의 변수)의 경우입니다.
—
Anthony DiSanti