javascript에는 선택기가 있습니다. 일반적으로 사용되는 js 선택기에는 getElementById(), getElementsByName(), getElementsByTagName(), querySelector(), querySelectorAll() 등이 포함됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
javascript에는 선택기가 있습니다.
JavaScript는 HTML 요소의 내용이나 값을 가져오거나 수정하고 특정 효과를 적용하는 데 가장 일반적으로 사용됩니다.
이렇게 하려면 먼저 요소를 찾아야 합니다. 요소를 일치시키는 데에는 자바스크립트 선택기가 사용됩니다. 검색 방법:
ID로 HTML 요소 찾기
태그 이름으로 HTML 요소 찾기
클래스 이름으로 HTML 요소 찾기
CSS 찾기로 선택 HTML 객체 컬렉션을 통한 HTML 요소
일반적으로 사용되는 js 선택기는 getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll()입니다.
ID로 HTML 요소 찾기
getElementById() 메서드를 사용하여 고유 ID를 기반으로 요소를 선택할 수 있습니다. 이것은 DOM 트리에서 HTML 요소를 찾는 가장 쉬운 방법입니다.
다음 예에서는 ID 속성이 id="msg"인 요소를 선택합니다.
var x = document.getElementById("msg");요소가 발견되면 메서드는 해당 요소를 개체로 반환합니다.
요소를 찾을 수 없으면 myElement에 null이 포함됩니다.
태그 이름으로 HTML 요소 찾기getElementsByTagName() 메서드를 사용하여 태그 이름으로 HTML 요소를 선택할 수도 있습니다. 이 메서드는 문서에서 지정된 태그 이름을 가진 모든 요소의 배열과 같은 목록을 반환합니다.
예: 모든
요소 선택:
var x = document.getElementsByTagName("p");getElementsByClassName() 메서드를 사용하여 특정 클래스 이름을 가진 모든 요소를 선택할 수 있습니다. 이 메서드는 문서에서 지정된 클래스 이름을 가진 모든 요소의 배열과 같은 목록을 반환합니다.
이 예는 class="demo"인 모든 요소의 목록을 반환합니다.
var x = document.getElementsByClassName("demo");querySelectorAll() 메서드를 사용하여 지정된 CSS 선택기 요소(ID)와 일치하는 요소를 선택할 수 있습니다 , 클래스, 유형 등). 이 메소드는 지정된 선택기와 일치하는 모든 요소의 배열과 같은 목록을 반환합니다.
CSS 선택기는 문서에서 HTML 요소를 선택하는 매우 강력하고 효율적인 방법을 제공합니다.
var x = document.querySelectorAll("div");HTML 문서의 최상위 요소는 문서 속성으로 직접 사용할 수 있습니다. 예를 들어 요소는 document.documentElement 속성을 사용하여 액세스할 수 있습니다.
document.body 속성을 사용하여 요소에 액세스할 수 있습니다.
var html = document.documentElement; var body = document.body;
참고: document.body가 태그 앞에 사용되는 경우(예:
내부) body 요소 대신 null을 반환합니다. 다음 HTML 개체(및 개체 컬렉션)에도 액세스할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
