JavaScript DOM을 사용하여 셀의 innerHTML을 얻는 방법은 무엇입니까?

이 튜토리얼에서는 JavaScript DOM을 사용하여 셀의 innerHTML을 얻는 방법을 배웁니다. JavaScript의 innerHTML 속성을 사용하여 셀의 innerHTML을 가져옵니다.

document.getElementById()를 사용하여 DOM(Document Object Model)을 쉽게 조작할 수 있습니다. 메소드 매개변수에 언급된 요소의 ID를 나타내는 요소 객체를 반환하는 메소드입니다. 각 태그의 ID는 고유하므로 ID로 해당 요소에 쉽게 액세스할 수 있습니다. 그런 다음 innerHTML 속성은 해당 태그의 텍스트나 콘텐츠에 액세스하는 데 도움이 됩니다

테이블 셀 컬렉션 사용

테이블에 있는 셀의 내용에 액세스하려면 먼저 document.getElementById()를 사용하여 테이블 태그에 액세스해야 합니다. 그런 다음 행 번호와 열 번호를 기반으로 특정 셀에 액세스하고 innerHTML 속성을 사용하여 콘텐츠에 액세스할 수 있습니다.

행 번호와 열 번호는 모두 0부터 시작하므로 첫 번째 행에 접근하려면 행[0]을 써야 합니다.

사용자는 다음 구문에 따라 링크의 유형 속성 값을 얻을 수 있습니다.

문법

으아악

위 구문에서 사용자는 document.getElementById().rows[]를 사용하여 행에 액세스하는 것을 볼 수 있습니다. 그런 다음 셀에 액세스하기 위해 .cells 속성을 작성했습니다. 다음 줄에서 innerHTML 속성을 사용하여 셀의 내용에 액세스합니다.

예

아래 예시에서는 table, tr, td 태그를 사용하여 테이블을 생성했습니다. 그런 다음 테이블에 액세스하기 위해 document.getElementById() 메서드를 작성했습니다. 첫 번째 셀(즉, 행 1, 열 1)에 액세스하기 위해 행[0]을 가져와 "Cell" 변수에 저장합니다. 그런 다음 콘텐츠에 액세스하기 위해 Cell[0].innerHTML을 사용합니다.

으아악

사용자가 볼 수 있듯이 "여기를 클릭하세요" 버튼을 클릭하면 첫 번째 셀 내용에 액세스하는 "getCell" 함수가 호출됩니다.

사용자 입력을 통해 셀 속성을 사용하세요

테이블에 있는 셀의 내용에 액세스하려면 먼저 document.getElementById()를 사용하여 테이블 태그에 액세스해야 합니다. 그런 다음 행 번호와 열 번호를 기반으로 해당 특정 셀에 액세스할 수 있으며 innerHTML 속성을 사용하여 콘텐츠에 액세스할 수 있습니다. 여기서는 사용자 입력을 얻기 위해 window 개체의 프롬프트 메서드를 사용합니다. 사용자의 선택에 따라 셀에 접근할 수 있습니다.

행 번호와 열 번호는 모두 0부터 시작하므로 첫 번째 행에 접근하려면 행[0]을 써야 합니다.

사용자는 다음 구문에 따라 링크의 유형 속성 값을 얻을 수 있습니다.

문법

으아악

위 구문에서는 사용자로부터 셀의 행, 열 및 내용을 가져와 그에 따라 내용에 액세스합니다.

예

아래 예시에서는 table, tr, td 태그를 사용하여 테이블을 생성했습니다. 그런 다음 테이블에 액세스하기 위해 document.getElementById() 메서드를 작성했습니다. 이전 구문에서 언급했듯이 사용자로부터 셀의 행, 열 및 내용을 가져와 각각 "row", "col" 및 "content" 변수에 저장합니다.

으아악

이 튜토리얼에서는 JavaScript DOM을 사용하여 셀의 innerHTML을 얻는 방법에 대해 논의했습니다. 먼저 document.getElementByID() 메서드를 사용하여 테이블에 액세스합니다. 그런 다음 행 속성을 적용하여 모든 행의 컬렉션을 가져옵니다. 행 컬렉션에서 셀 속성을 적용하여 셀 컬렉션을 가져옵니다. 셀 모음에서 인덱스를 적용하여 특정 셀을 가져올 수 있습니다.

위 내용은 JavaScript DOM을 사용하여 셀의 innerHTML을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!