JavaScript를 사용하여 요소의 ID를 변경하는 방법은 무엇입니까?

일반적으로 HTML 문서의 모든 요소 ID는 고유하며 요소에 한 번만 할당될 수 있습니다. 그러나 새 ID의 고유성에 대한 동일한 규칙에 따라 나중에 JavaScript를 사용하여 ID를 변경할 수 있으며 단일 요소만 새 ID를 포함할 수 있습니다. 이번 글에서는 자바스크립트를 사용하여 요소의 ID를 변경하는 방법을 살펴보겠습니다.

JavaScript는 id 속성을 사용하여 모든 요소의 ID를 가져오고 문서의 HTML 요소에 새 ID를 변경하거나 추가하는 기능을 제공하거나 허용합니다.

코드 예제를 통해 id 속성을 사용하여 JavaScript를 통해 HTML 문서의 요소 ID를 변경하는 방법을 알아봅시다.

문법

다음 구문은 id 속성을 사용하여 HTML 요소를 변경하고, 새 ID를 얻고, 새 ID를 추가하는 방법을 설명합니다. -

으아악

위 구문에서는 먼저 HTML DOM을 사용하여 ID를 변경하려는 HTML 요소를 선택한 다음 점 연산자와 함께 id 속성을 사용하여 오른쪽에 새 ID 할당 연산자를 할당합니다.

HTML 문서에서 요소의 ID를 변경하는 id 속성의 실제 구현을 코드 예제를 통해 이해해 보겠습니다.

알고리즘

• 1단계 - 첫 번째 단계에서는 입력 요소를 추가하여 사용자로부터 새 ID를 입력으로 받고 나중에 id 속성을 사용하여 동일한 입력 요소의 ID를 변경합니다.

• 2단계 - 이 단계에서는 onclick 이벤트를 사용하여 HTML 문서에 버튼 요소를 추가합니다. 이 이벤트는 나중에 JavaScript 함수를 호출하여 입력 요소의 ID를 변경합니다.

• 3단계 - 다음 단계에서는 입력 요소를 가져와 해당 요소의 초기 ID를 사용자에게 표시하므로 요소의 변경 ID를 쉽게 확인할 수 있습니다.

• 4단계 - 네 번째 단계에서는 다시 입력 요소를 가져오고 해당 ID를 사용자가 입력 필드에 입력한 텍스트와 동일하게 설정하고 id 속성을 사용하여 해당 ID를 변경하는 JavaScript 함수를 정의합니다. 이 텍스트.

• 5단계 - 마지막 단계에서는 id 속성을 사용하여 요소에 할당된 새 ID를 표시하고 나중에 사용자가 버튼을 클릭할 때 호출될 수 있도록 onclick 이벤트에 함수를 값으로 할당합니다. .

예

다음 예에서는 id 속성을 사용하여 HTML 문서에서 요소의 ID를 변경하는 방법을 보여줍니다. -

으아악

위 예시에서는 JavaScript의 id 속성을 이용하여 입력 요소의 ID를 변경하고, 입력 요소에 할당된 이전 ID와 새 ID를 사용자 화면에 표시했습니다.

함수를 전달하는 대신 onclick 이벤트 내에서 요소의 ID를 직접 변경하는 또 다른 코드 예제를 살펴보겠습니다.

알고리즘

위 예시와 이번 예시의 알고리즘은 거의 유사합니다. 아래 예와 같이 버튼 요소의 onclick 이벤트에 전달된 값을 변경하기만 하면 됩니다.

예

아래 예에서는 이전 예와 같이 입력 요소의 ID를 변경하기 위해 이전 알고리즘에서 변경해야 하는 사항을 설명합니다. -

으아악

위 예시에서는 입력 요소의 ID를 변경할 수 있지만, 이 경우 요소에 새 ID 값을 정적으로 할당하기 때문에 이전 ID를 선택한 ID로 바꿀 수 없습니다. p>

이 기사에서는 선택한 ID와 해당 요소에 제공하려는 정적 ID를 사용하여 HTML 문서에 있는 요소의 ID를 변경하는 방법을 배웠습니다. 이 정적 ID는 고유해야 하며 문서에만 포함될 수 있습니다. 그 ID는 단일 요소입니다.

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