SPEC는 NULL : JavaScript 동적 클래스 전환 및 스크립트로드 타이밍

1. 문제 설명 및 예비 시도

프론트 엔드 개발에서는 종종 마우스 호버 상호 작용 효과를 구현해야합니다. 예를 들어 사용자가 마우스를 요소로 이동할 때 관련 설명 정보가 표시됩니다. 일반적인 구현은 JavaScript를 사용하여 CSS 클래스를 동적으로 추가하거나 제거하여 요소의 가시성을 제어하는 ​​것입니다.

.specialist가 호버 효과를 트리거하는 카드이며 .specialist-text는 .hidden 클래스를 통해 기본적으로 숨겨져있는 설명 텍스트입니다.

HTML 구조 예 :

 
    <h3 class="큰 센터 my-1"> 주제 </h3>
    <div class="너비 그리드 오버플로">
         <div class="topic-list-update">
            <div class="Card2 Center BTN2 전문가"> 전문가 </div>
         </div>
         <div class="topics-text">
            <div class="전문가 텍스트 숨겨진"> 전문가 수학 1234 </div>
         </div>
    </div>
섹션>

CSS 스타일 예 :

 .hidden {
  디스플레이 : 없음;
}

마우스가 호버 할 때 설명 텍스트를 표시 할 수 있도록 다음 JavaScript 코드를 작성할 수 있습니다.

JavaScript 시도 :

 const spec = document.querySelector ( '. 전문가');
const spect = document.querySelector ( '. Specialist-Text');

spec.addeventListener ( 'mouseEnter', () => spect.classlist.remove ( 'hidden'));
// 호버 효과를 완전히 실현하려면 마우스가 꺼내면 일반적으로 다시 숨겨야합니다.

그러나이 코드를 실행할 때 브라우저 콘솔은 ucted TypeError를보고 할 수 있습니다. 이 오류는 사양 변수의 값이 NULL임을 나타냅니다.

오류 분석 :

TypeError : 사양의 핵심 이유는 널 오류가 JavaScript 스크립트의 실행 타이밍 때문입니다. 브라우저가 HTML 페이지를로드하면 상단에서 아래로 라인별로 라인을 구문 분석합니다. 태그가 HTML 요소 위에있는 경우 (예 : 또는 의 시작) 인 경우 javaScript 코드가 Document.querySelector ()를 통해 DOM 요소를 선택하려고 할 때 이러한 HTML 요소는 브라우저에 의해 구문 분석되어 DOM 트리에 구문 분석되지 않았을 수 있습니다. 따라서 QuerySelector ()는 당연히 대상 요소를 찾을 수없고 NULL을 반환하여 NULL 객체 (예 : AddEventListener)에서 후속 작업을 수행합니다.

2. 핵심 솔루션 : 스크립트로드 타이밍

QuerySelector 리턴 NULL의 문제를 해결하는 가장 직접적이고 효과적인 방법은 모든 관련 HTML 요소가로드되어 DOM 트리에 내장 된 후 JavaScript 스크립트가 실행되도록하는 것입니다.

솔루션 : 태그가 끝나기 전에 태그를 놓습니다.

원칙 설명 :

브라우저가 태그 이전의 위치에 파서지면 전체 HTML 문서의 내용 (

 
    
    
        <h3 class="큰 센터 my-1"> 주제 </h3>
        <div class="너비 그리드 오버플로">
             <div class="topic-list-update">
                <div class="Card2 Center BTN2 전문가"> 전문가 </div>
             </div>
             <div class="topics-text">
                <div class="전문가 텍스트 숨겨진"> 전문가 수학 1234 </div>
             </div>
        </div>
    섹션>
    

     태그-> 앞에 배치됩니다
    <script src="script.js"> </script>

 // script.js
const spec = document.querySelector ( '. 전문가');
const spect = document.querySelector ( '. Specialist-Text');

// 기본적으로 보장되지만 

위 내용은 SPEC는 NULL : JavaScript 동적 클래스 전환 및 스크립트로드 타이밍의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!