질문 : jQuery 또는 getElementById와 같은 DOM 메서드가 요소를 찾지 못하는 이유는 무엇입니까?
document.getElementById , $("#id") 또는 기타 DOM 메소드 / jQuery 선택기가 요소를 찾지 못하는 이유는 무엇입니까?
예제 문제는 다음과 같습니다.
- jQuery가 이벤트 핸들러를 자동으로 바인딩하지 못함
- jQuery "getter"메서드 (
.val(),.html(),.text())undefined null반환하는 표준 DOM 메서드로 인해 여러 오류가 발생합니다.
포착되지 않은 TypeError : null의 '...'속성을 설정할 수 없습니다. Uncaught TypeError : null의 '...'속성을 읽을 수 없습니다.
가장 일반적인 형태는 다음과 같습니다.
Uncaught TypeError : null의 'onclick'속성을 설정할 수 없습니다.
Uncaught TypeError : null의 'addEventListener'속성을 읽을 수 없습니다.
Uncaught TypeError : null의 'style'속성을 읽을 수 없습니다.
답변
찾으려고했던 요소가 스크립트가 실행될 때 DOM에 없었습니다.
DOM 의존 스크립트의 위치는 그 동작에 큰 영향을 미칠 수 있습니다. 브라우저는 HTML 문서를 위에서 아래로 구문 분석합니다. 요소는 DOM에 추가되고 스크립트는 (일반적으로) 발견 될 때 실행됩니다. 이것은 순서가 중요하다는 것을 의미합니다. 일반적으로 스크립트는 나중에 마크 업에 나타나는 요소를 찾을 수 없습니다. 이러한 요소는 아직 DOM에 추가되지 않았기 때문입니다.
다음 마크 업을 고려하십시오. 스크립트 # 1은 스크립트 # 2가 성공하는 동안 <div>
<script>
console.log("script #1:", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
console.log("script #2:", document.getElementById("test")); // <div id="test" ...
</script>그래서 어떻게해야합니까? 몇 가지 옵션이 있습니다.
닫는 body 태그 바로 앞 페이지 아래로 스크립트를 이동합니다. 이러한 방식으로 구성되면 스크립트가 실행되기 전에 문서의 나머지 부분이 구문 분석됩니다.
<body>
<button id="test">click me</button>
<script>
document.getElementById("test").addEventListener("click", function() {
console.log("clicked:", this);
});
</script>
</body><!-- closing body tag -->참고 : 일반적으로 하단에 스크립트를 배치하는 것이 모범 사례로 간주됩니다.
$( handler ) 사용하여 DOM이 완전히 파싱 될 때까지 스크립트를 연기하십시오.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$("#test").click(function() {
console.log("clicked:", this);
});
});
</script>
<button id="test">click me</button>DOMContentLoaded 또는 window. onload 간단히 바인딩 할 수 있습니다. window. onload 이지만 각각 경고가 있습니다. jQuery의 ready() 는 하이브리드 솔루션을 제공합니다.
위임 된 이벤트 는 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수 있다는 장점이 있습니다.
요소가 이벤트를 발생시킬 때 (버블 링 이벤트이고 전파를 중지하지 않는 경우) 해당 요소의 조상의 각 부모도 이벤트를 수신합니다. 이를 통해 기존 요소에 핸들러를 연결하고 하위 요소에서 버블 링되는 샘플 이벤트를 처리 할 수 있습니다. 핸들러가 연결된 후에 추가 된 이벤트도 마찬가지입니다. 우리가해야 할 일은 이벤트가 원하는 요소에 의해 발생했는지 확인하고, 그렇다면 코드를 실행하는 것입니다.
jQuery의 on() 은 우리를 위해 그 논리를 수행합니다. 이벤트 이름, 원하는 하위 항목에 대한 선택기 및 이벤트 처리기를 제공하기 만하면됩니다.
<script type="module">
document.getElementById("test").addEventListener("click", function(e) {
console.log("clicked: ", this);
});
</script>
<button id="test">click me</button>참고 : 일반적으로이 패턴은로드시 존재하지 않았 거나 많은 양의 핸들러 연결을 방지하기 위해 예약되어 있습니다. document 핸들러를 첨부했지만 가장 가까운 신뢰할 수있는 조상을 선택해야한다는 점도 지적 할 가치가 있습니다.
<script> defer 속성을 사용하십시오.
[ defer DOMContentLoaded 실행하기 전에 스크립트가 실행될 예정임을 브라우저에 나타내도록 설정됩니다.
<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>
<button id="test">click me</button>참고로 다음은 해당 외부 스크립트 의 코드입니다.
document.getElementById("test").addEventListener("click", function(e){
console.log("clicked: %o", this);
});참고 : defer 특성이 확실히 마법의 탄환처럼 보이지만이주의 사항을 인식하는 것이 중요합니다 ...
1. defer src 속성을 가진 스크립트에만 사용할 수 있습니다.
2. 브라우저 지원 에 유의하십시오. 즉 : IE에서 버그가있는 구현 <10
출처 : https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element
'프로그래밍 언어 > jQuery, ajax' 카테고리의 다른 글
| “Big O”표기법에 대한 일반적인 영어 설명 (0) | 2021.06.25 |
|---|---|
| jQuery AJAX 제출 양식 (0) | 2021.06.25 |
| jQuery Ajax 파일 업로드 (0) | 2021.06.24 |
| Google API의 최신 jQuery 라이브러리에 대한 링크 (0) | 2021.06.24 |
| 동일한 기능을 트리거하는 jQuery 여러 이벤트 (0) | 2021.06.23 |