동적 DOM 컨텐츠를 JavaScript의 배열로 변환 : 널 값 문제를 피하기위한 모범 사례

이 튜토리얼은 JavaScript 개발에서 일반적인 문제를 해결하는 것을 목표로합니다. 동적으로 업데이트 된 DOM 요소 컨텐츠를 배열로 변환하려고 할 때 변수는 항상 비어 있습니다. 핵심은 JavaScript 코드의 실행 타이밍을 이해하는 것입니다. 이 기사는 스크립트가로드 될 때 DOM 컨텐츠를 얻는 것이 널 값을 초래하는 이유를 자세히 설명하고 사용자 상호 작용 (버튼 클릭 이벤트와 같은) 후 실시간으로 컨텐츠를 얻고 변환하여 데이터 정확도를 보장하는 올바른 방법을 제공합니다.

웹 개발에서는 종종 사용자 입력 또는 페이지에서 동적으로 생성 된 컨텐츠를 캡처하고 처리해야합니다. 일반적인 시나리오는 사용자가 버튼을 클릭하여 텍스트를 DOM 요소 (예 : 디스플레이 영역)에 추가 한 다음이 디스플레이 영역의 텍스트 내용을 추가 논리적 처리를 위해 배열로 변환하려는 것입니다. 그러나 많은 개발자들은 처음 시도 할 때 혼란을 겪습니다. 컨텐츠가 이미 페이지에 표시 되더라도 DOM 요소의 텍스트 콘텐츠를 배열로 변환하려고 할 때 결과 배열은 항상 비어 있습니다 (길이 : 0).

문제의 근본 원인 이해 : JavaScript 코드의 실행 타이밍

문제의 핵심은 JavaScript 코드의 실행 타이밍에 있습니다. 다음 코드 스 니펫을 고려하십시오.

 const typednum = document.querySelector ( "#num-area");
// ... 다른 dom 요소 선택 ...
const arr_equation = typednum.textContent.split ( ""); //이 줄은 문제의 근본입니다 // ... 다른 이벤트 리스너 ...

브라우저가 HTML, CSS 및 JavaScript를로드 및 구문 분석하면 JavaScript 코드가 위에서 아래로 실행됩니다. 위의 코드에서 const arr_equation = typednum.textContent.split ( ""); 이 라인은 스크립트가로드되면 즉시 실행됩니다. 이 시점에서 #num-area 요소는 아직 사용자 입력을받지 못했기 때문에 일반적으로 비어 있습니다. 따라서 typednum.textContent는이 순간에 빈 문자열이며, 분할 후 ( "") 자연스럽게 빈 배열을 얻게됩니다. 그 후, 사용자가 버튼을 클릭하여 컨텐츠를 typednum에 추가하더라도 ARR_Equation 변수의 값은 CONST를 통해 상수로 선언되고 초기화시 그 값이 결정되므로 자동으로 업데이트되지 않습니다.

올바른 솔루션 : 요청시 동적 컨텐츠를 얻으십시오

이 문제를 해결하기 위해 핵심은이 동적 컨텐츠가 실제로 필요할 때까지 텍스트 콘텐츠를 얻고 배열로 변환하는 작업을 지연시키는 것입니다. 일반적으로 이것은 데이터 처리를 유발하는 이벤트 리스너 내부에 논리 의이 부분을 배치하는 것을 의미합니다. 예를 들어, 사용자가 "동일"버튼을 클릭하면 typednum 요소의 최신 TextContent를 얻게됩니다.

다음은 수정 된 JavaScript 코드 예입니다.

 const typednum = document.querySelector ( "#num-area");
const result = document.querySelector ( "#result");
const one = document.querySelector ( "#one");
const 2 = document.querySelector ( "#2");
const plus = document.querySelector ( "#plus");
const equal = document.querySelector ( "#equal");

// 참고 : ARR_EFERATION은 더 이상 상단에 선언되지 않습니다.
    typednum.textContent = "1";
});
2.adeventListener ( "클릭", function () {
    typednum.textContent = "2";
});
plus.addeventListener ( "클릭", function () {
    typednum.textContent = "";
});

Equal.AddeventListener ( "클릭", function () {
    // "동일"버튼을 클릭 할 때 TypedNum의 최신 컨텐츠를 실시간 const Arr_Equation = typednum.textContent.split ( "")로 가져옵니다.
    result.textContent = arr_equation; // 배열을 텍스트에 직접 할당하면 자동으로 문자열로 변환});

const arr_equation = typednum.textContent.split ( "")를 움직여서; 동일한 버튼의 클릭 이벤트 리스너를 통해 "동일"버튼을 클릭 할 때마다 사용자 입력이 포함 된 Typednum 요소의 최신 텍스트 콘텐츠가 가져와 배열로 변환되도록합니다.

추가 최적화 및 예방 조치

실제 응용 분야에서는 얻은 컨텐츠를 추가로 처리해야 할 수도 있습니다. 예를 들어, typednum.textContent에 추가 공간 (예 : "1 2")이 포함되어 있고 최종 어레이 요소에 이러한 공간이 나타나기를 원하지 않으면 필터 방법을 사용하여 정리할 수 있습니다.

 Equal.AddeventListener ( "클릭", function () {
    const arr_equation = typednum.textContent
                                  .나뉘다("")
                                  .filter (item => item! == ""); // 공백을 필터 아웃 result.textContent = arr_equation.join ( ','); // 배열 요소가 표시 할 쉼표가 표시되며 명확합니다});

여기서 필터 (item => item! == "")는 배열에서 모든 공간 문자를 제거합니다. 동시에 결과를 변경하십시오. rextContent = arr_equation; result.textContent = arr_equation.join ( ','); 결과 영역에서 배열의 다양한 요소를 더 명확하게 표시하려면 기본 toString () 동작이 발생할 수있는 불편 함을 피하십시오.

완전한 샘플 코드

완전한 컨텍스트를 제공하기 위해 간단한 계산기 인터페이스를 구축하고 동적 컨텐츠를 올바르게 처리하는 방법을 보여주는 HTML, CSS 및 JavaScript의 완전한 예가 있습니다.

html (index.html) :

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <title> Dynamic DOM 컨텐츠에 대한 자습서 </title>
    <link rel="Stylesheet" href="Style.css">


    <pre id="num-area"> 

1 2 =

위 내용은 동적 DOM 컨텐츠를 JavaScript의 배열로 변환 : 널 값 문제를 피하기위한 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!