자바스크립트에서 tr을 얻는 방법

JavaScript에서는 테이블의 요소를 포함하여 HTML 페이지의 특정 요소를 가져와야 하는 경우가 많습니다. 요소를 가져오는 것은 데이터를 표시하는 데 자주 사용되며 웹 페이지에서 가장 일반적으로 사용되는 HTML 요소 중 하나이기 때문에 매우 중요합니다. 이 기사에서는 JavaScript를 사용하여 요소를 얻는 방법과 관련 기술을 소개합니다.

일반적으로 다음 방법을 사용하여 HTML 테이블에서 요소를 가져올 수 있습니다.

1. ID로 요소를 가져옵니다.

테이블에 ID 속성이 있으면 문서를 사용할 수 있습니다. getElementById() 메소드는 다음은 샘플 코드입니다.

<table id="myTable">
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const firstRow = document.getElementById("myTable").rows[0];
console.log(firstRow);
</script>

이 예에서는 document.getElementById() 메서드를 사용하여 ID 속성이 "myTable"인 테이블 요소를 가져왔습니다. 그런 다음 .rows[] 배열을 사용하여 테이블의 행에 액세스하고 첫 번째 행을 firstRow 변수에 저장합니다. 마지막으로 콘솔에서 firstRow를 출력하면 요소가 표시됩니다.

2. 클래스 이름으로 요소 가져오기:

테이블의 일부 행에 동일한 클래스 이름이 있는 경우 document.getElementsByClassName() 메서드를 사용하여 해당 행의 요소를 가져올 수 있습니다. 다음은 샘플 코드입니다.

<table>
  <tr class="row-one">
    <td>第一行</td>
  </tr>
  <tr class="row-two">
    <td>第二行</td>
  </tr>
  <tr class="row-one">
    <td>第三行</td>
  </tr>
</table>

<script>
const rowOnes = document.getElementsByClassName("row-one");
console.log(rowOnes);
</script>

이 예에서는 document.getElementsByClassName() 메서드를 사용하여 클래스 이름이 "row-one"인 모든 요소를 가져와 rowOnes 변수에 저장했습니다. 마지막으로 rowOne을 콘솔에 출력하면 두 개의 요소(첫 번째 및 세 번째 행)가 표시됩니다.

3. 요소 유형별로 요소 가져오기:

document.getElementsByTagName() 메서드를 통해 테이블의 요소를 가져올 수도 있습니다. 다음은 샘플 코드입니다.

<table>
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const rows = document.getElementsByTagName("tr");
console.log(rows);
</script>

이 예에서는 document.getElementsByTagName() 메서드를 사용하여 테이블의 모든 요소를 가져와서 행 변수에 저장합니다. 마지막으로 콘솔에서 행을 출력하면 세 개의 요소가 표시됩니다.

위 메소드 외에도 다음 기술을 사용하여 요소를 가져올 수 있습니다.

4. querySelector() 메소드 사용:

querySelector() 메소드를 사용하여 단일 요소를 선택할 수 있습니다. CSS 선택기를 기반으로 하는 요소입니다. 다음은 샘플 코드입니다.

<table>
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const firstRow = document.querySelector("tr");
console.log(firstRow);
</script>

이 예에서는 querySelector() 메서드를 사용하여 테이블의 첫 번째 요소를 선택하고 이를 firstRow 변수에 저장합니다. 마지막으로 콘솔에 firstRow를 출력하면 첫 번째 행이 표시됩니다.

5. querySelectorAll() 메서드 사용:

querySelectorAll() 메서드를 사용하여 CSS 선택기를 기반으로 여러 요소를 선택할 수도 있습니다. 다음은 샘플 코드입니다.

<table>
  <tr class="row-one">
    <td>第一行</td>
  </tr>
  <tr class="row-two">
    <td>第二行</td>
  </tr>
  <tr class="row-one">
    <td>第三行</td>
  </tr>
</table>

<script>
const rowOnes = document.querySelectorAll(".row-one");
console.log(rowOnes);
</script>

이 예에서는 querySelectorAll() 메서드를 사용하여 테이블에서 클래스 이름이 "row-one"인 모든 요소를 선택하고 이를 rowOnes 변수에 저장했습니다. 마지막으로 rowOne을 콘솔에 출력하면 두 개의 요소(첫 번째 및 세 번째 행)가 표시됩니다.

요약:

JavaScript에서 요소를 가져오는 것은 어렵지 않습니다. document.getElementById() 메서드, document.getElementsByClassName() 메서드, document.getElementsByTagName() 메서드, querySelector() 메서드 및 querySelectorAll을 사용할 수 있습니다. ( ) 방법이나 기타 기술은 쉽게 구할 수 있다. 어떤 방법을 선택할지는 우리가 얻고자 하는 요소와 해당 요소가 HTML 문서의 어디에 있는지에 따라 달라집니다. 이러한 기술을 통해 우리는 쉽게 테이블을 조작하고 웹 페이지에 데이터를 동적으로 표시할 수 있습니다.

위 내용은 자바스크립트에서 tr을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!