JavaScript에는 어떤 선택기가 있습니까?

JavaScript 선택기에는 getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector() 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에는 어떤 선택기가 있나요?

일반적으로 사용되는 JavaScript 선택기에는 getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll()이 포함됩니다.

1. document.querySelector()

querySelector() 메서드는 지정된 선택기와 일치하는 첫 번째 요소만 반환합니다. 모든 요소를 ​​반환해야 하는 경우 대신 querySelectorAll() 메서드를 사용하세요.

(1) 문서에서 id="demo"인 요소 가져오기:

document.querySelector("#demo");

(2) 문서에서 첫 번째 p의 요소 가져오기

document.querySelector(“p”);

( 3) 문서에서 class="example"이 있는 첫 번째 요소를 가져옵니다.

document.querySelector(".example");

(4) 문서에서 class="example"이 있는 첫 번째 p 요소를 가져옵니다.

document.querySelector(“p.example”);

(5) "target"을 가져옵니다. " 문서의 속성 첫 번째 a 요소:

document.querySelector(“a[target]”);

(6) 선택자가 여러 개 있는 경우

document.querySelectorAll(’.ynqc’)

2. document.getElementById()

이 메서드는 id 속성에 해당하는 노드 개체를 반환합니다. 문서 객체에 고유합니다. 이 메소드는 해당 함수를 통해서만 호출할 수 있습니다. 사용법은 다음과 같습니다: document.getElementById('idName');

3 getElementsByTagName()

이 메소드는 객체 배열(htmlCollection)을 반환합니다. 정확하게 말하면 컬렉션) 반환된 요소의 순서는 문서의 순서입니다. getElementsByTagName() 메서드에 전달된 문자열은 대소문자를 구분하지 않습니다. document.getElementsByTagName(tagName);

4. getElementsByClassName()

이 메소드는 지정된 클래스 이름을 가진 요소를 가져오는 데 사용됩니다. 이 메소드는 문서에서 지정된 클래스 이름을 가진 모든 요소의 컬렉션을 NodeList 객체로 반환합니다. NodeList 객체는 순서가 지정된 노드 목록을 나타냅니다. NodeList 객체의 경우 노드 목록에 있는 노드 인덱스 번호(인덱스 번호는 0부터 시작)를 통해 목록에 있는 노드에 접근할 수 있으므로, 사용 시 첨자를 지정해야 하는 경우가 있습니다. document.getElementsByClassName('className');

5. document.getElementsByName()

getElementsByName() 메소드는 지정된 이름을 가진 객체 컬렉션을 반환할 수 있습니다.

이 메서드는 getElementById() 메서드와 유사하지만 id 속성 대신 요소의 name 속성을 쿼리합니다.

또한 문서의 이름 속성은 고유하지 않을 수 있으므로(예: HTML 양식의 라디오 버튼은 일반적으로 동일한 이름 속성을 가짐) 모든 getElementsByName() 메서드는 단일 요소 대신 요소 배열을 반환합니다.

6. document.querySelectorAll()

querySelectorAll() 메서드는 지정된 CSS 선택기와 일치하는 문서의 모든 요소를 ​​반환하고 NodeList 개체를 반환합니다.

NodeList 객체는 노드 모음을 나타냅니다. 0부터 시작하는 인덱스로 접근할 수 있다.

팁: NodeList 개체의 길이 속성을 사용하여 선택기와 일치하는 요소 속성을 가져온 다음 모든 요소를 ​​반복하여 원하는 정보를 얻을 수 있습니다.

【추천 학습: javascript 고급 튜토리얼】

위 내용은 JavaScript에는 어떤 선택기가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!