이 자습서에서는 속성 값을 기반으로 DOM 요소를 찾는 절차를 설명합니다.
속성 값을 기반으로 DOM에서 요소를 찾거나 검색하는 방법은 무엇입니까?
속성 값을 기반으로 DOM에서 요소를 찾으려면 ' 쿼리 선택기() ' 방법. 주어진 CSS 선택기 값과 일치하는 문서에서 찾은 첫 번째 요소를 제공합니다.
메모 : 지정된 선택자 값과 일치하는 모든 요소를 가져오려면 ' querySelectorAll() ' 방법.
통사론
'querySelector()' 메서드를 사용하려면 다음 구문을 사용합니다.
문서. 쿼리 선택기 ( 선택자 ) ;
여기서 선택자는 '와 같은 id 또는 클래스입니다. #ID ”, “ .수업 ”:
속성 값을 기반으로 요소를 찾기 위해 주어진 구문을 사용할 수도 있습니다.
문서. 쿼리 선택기 ( '[선택기='값']' ) ;
위 구문에서 ' 선택자 ' 될거야 ' ID ' 또는 ' 수업 ', 아니면 그 ' 값 ' 될거야 ' idName ' 또는 ' 클래스 이름 '.
예
HTML 파일에서 h4 요소를 사용하는 제목, 태그를 사용하는 일반 텍스트 및 할당된 id가 '인 메시지에 대한 div를 포함하는 div 요소를 만듭니다. 메시지 ”:
< 사업부 ID = '사업부' 스타일 = '텍스트 정렬:가운데;' >< h4 수업 = '비서' ID = '표제' > 찾기 요소 DOM 기반 기인하다 값 h4 >
< 스팬 아이디 = '환영' > Linuxhint에 오신 것을 환영합니다 기간 >
< 사업부 ID = '메시지' >
< 아이디 = '메시지' > 안녕하세요 여러분 ! Linuxhint JavaScript 자습서에 오신 것을 환영합니다 피 >
사업부 >
사업부 >
페이지는 다음과 같이 표시됩니다.
이제 우리는 id가 '인 요소를 얻을 것입니다. 메시지 '는 '를 사용하여 할당됩니다. 쿼리 선택기() ' 방법:
각 요소 = 문서. 쿼리 선택기 ( '#메시지' )마지막으로 콘솔에 요소를 인쇄합니다.
콘솔. 통나무 ( 요소 ) ;출력에서 ' 사업부 ” 요소는 할당된 ID와 함께 표시됩니다. 메시지 ”, 필요한 요소가 성공적으로 검색되었음을 나타냅니다.
주어진 구문을 사용하여 요소를 가져올 수도 있습니다. 여기에서 id가 '인 요소를 얻습니다. 메시지 ”:
각 요소 = 문서. 쿼리 선택기 ( '[id='msg']' ) ;산출
이제 '를 사용하여 색상을 업데이트하십시오. 스타일 ' 재산:
요소. 스타일 . 색상 = '파란색' ;보시다시피 텍스트는 ' 녹색 ” 색상, 이제 “로 업데이트되었습니다. 파란색 ”:
속성 값을 기반으로 DOM에서 요소를 찾는 것이 전부입니다.
결론
속성 값을 기반으로 DOM에서 요소를 찾으려면 ' 쿼리 선택기() ” 지정된 CSS 선택기 값과 일치하는 문서의 첫 번째 요소를 제공하는 메서드입니다. 또한 지정된 선택자 값과 일치하는 모든 요소를 가져오려면 ' querySelectorAll() ' 방법. 이 자습서에서는 속성 값을 기반으로 DOM 요소를 찾는 절차를 설명했습니다.