다양한 상황에서 프로그래머는 name 속성으로 HTML 요소를 가져와야 합니다. 개발자가 해당 값을 읽거나 조작하기 위해 라디오 버튼이나 확인란과 같은 양식 컨트롤에 액세스하려고 한다고 가정합니다. 보다 구체적으로 ' 이름 ” 속성은 관련 양식 컨트롤을 그룹화하는 데 사용되며 동일한 이름을 여러 컨트롤에 제공하여 단일 그룹으로 액세스할 수 있도록 합니다.
이 게시물은 JavaScript에서 이름으로 HTML 요소를 검색하는 방법을 설명합니다.
JavaScript에서 이름으로 요소를 얻는 방법?
JavaScript에서는 다음과 같은 미리 정의된 JavaScript 메소드의 도움으로 이름 속성을 사용하여 HTML 요소에 액세스할 수 있습니다.
-
- getElementsByName() 메서드
- querySelectorAll() 메서드
방법 1: 'getElementsByName()' 방법을 사용하여 이름으로 요소 가져오기
이름으로 HTML 요소를 가져오려면 ' getElementsByName() ' 방법. 이 메소드는 지정된 이름 속성이 있는 요소 콜렉션을 제공합니다.
통사론
다음 구문은 getElementsByName() 메서드에 사용됩니다.
document.getElementsByName ( '이름' )
예
먼저 6개의 버튼을 만듭니다. 그 중 5개는 ' 이름 ” HTML 요소를 가져오는 데 사용되는 속성 “ 단추 '. '를 호출할 여섯 번째 버튼으로 onclick 이벤트를 첨부합니다. 적용스타일() ” 기능을 사용하여 5개 버튼의 스타일을 지정합니다.
< 단추 이름 = 'btn' > 단추 단추 >< 단추 이름 = 'btn' > 단추 단추 >
< 단추 이름 = 'btn' > 단추 단추 >
< 단추 이름 = 'btn' > 단추 단추 >
< 단추 이름 = 'btn' > 단추 단추 > < br >< br >
< 버튼 클릭 = '적용스타일()' > 여기를 클릭하세요 단추 >
함수 정의 ' 적용스타일() ” 버튼 클릭 시 트리거되고 모든 버튼의 배경색이 변경됩니다. 이렇게 하려면 먼저 ' 단추 ”를 호출하여 요소를 그룹으로 getElementsByName() ' 방법:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.스타일.배경 = 'cadetblue' ;
} ) ;
}
버튼을 클릭하는 동안 출력에서 볼 수 있듯이 5개 버튼의 배경색이 변경됩니다.
방법 2: 'querySelectorAll()' 방법을 사용하여 이름으로 요소 가져오기
'를 활용할 수도 있습니다. querySelectorAll() '를 사용하여 요소를 가져오는 방법 이름 ” JavaScript의 속성. 이 메서드는 CSS 클래스, ID 또는 이름과 같은 지정된 선택기/속성과 일치하는 문서의 모든 요소를 검색하는 데 사용됩니다.
통사론
주어진 구문은 '를 사용하여 이름으로 요소를 가져오는 데 사용됩니다. querySelectorAll()' 방법:
document.querySelectorAll ( '[이름='n1']' ) ;
예
다음 예에서는 이름이 '인 버튼의 색상만 변경합니다. btn1 ”:
< 사업부 >< 버튼 이름 = 'btn' > 단추 단추 >
< 버튼 이름 = 'btn1' > 단추 단추 >
< 버튼 이름 = 'btn' > 단추 단추 >
< 버튼 이름 = 'btn1' > 단추 단추 >
< 버튼 이름 = 'btn' > 단추 단추 > < br >< br >
< 버튼 클릭 = '적용스타일()' > 여기를 클릭하세요 단추 >
사업부 >
정의된 함수에서 이름이 '인 모든 버튼 요소에 먼저 액세스를 호출합니다. btn1 ” 그런 다음 스타일을 적용합니다.
const btns = document.querySelectorAll ( '[이름='btn1']' ) ;
btns.forEach ( btn = > {
btn.스타일.배경 = 'cadetblue' ;
} ) ;
}
주어진 출력은 이름이 'btn1'인 두 개의 버튼만 배경색을 변경했음을 나타냅니다.
메모: 단일 요소를 얻으려면 document.querySelectorAll 대신 document.querySelector를 사용하는 것이 좋습니다.
결론
이름으로 요소를 가져오거나 검색하려면 ' getElementsByName() ' 아니면 그 ' querySelectorAll() 방법. 이름으로 요소를 가져오는 데 가장 일반적이고 효율적으로 사용되는 방법은 'getElementsByName()' 방법입니다. 이 게시물에서는 JavaScript에서 이름으로 HTML 요소를 검색하는 방법을 설명했습니다.