자바스크립트에는 선택자가 있나요?

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 요소를 선택할 수도 있습니다. 이 메서드는 문서에서 지정된 태그 이름을 가진 모든 요소의 배열과 같은 목록을 반환합니다.

예: 모든 e388a4556c0f65e1904146cc1a846bee 요소 선택:

var x = document.getElementsByTagName("p");

클래스 이름으로 HTML 요소 찾기

getElementsByClassName() 메서드를 사용하여 특정 클래스 이름을 가진 모든 요소를 ​​선택할 수 있습니다. 이 메서드는 문서에서 지정된 클래스 이름을 가진 모든 요소의 배열과 같은 목록을 반환합니다.

이 예는 class="demo"인 모든 요소의 목록을 반환합니다.

var x = document.getElementsByClassName("demo");

CSS 선택기로 HTML 요소 찾기

querySelectorAll() 메서드를 사용하여 지정된 CSS 선택기 요소(ID)와 일치하는 요소를 선택할 수 있습니다 , 클래스, 유형 등). 이 메소드는 지정된 선택기와 일치하는 모든 요소의 배열과 같은 목록을 반환합니다.

CSS 선택기는 문서에서 HTML 요소를 선택하는 매우 강력하고 효율적인 방법을 제공합니다.

var x = document.querySelectorAll("div");

HTML 개체 컬렉션을 통해 HTML 요소 찾기

HTML 문서의 최상위 요소는 문서 속성으로 직접 사용할 수 있습니다. 예를 들어 100db36a723c770d327fc0aef2ce13b1 요소는 document.documentElement 속성을 사용하여 액세스할 수 있습니다.

document.body 속성을 사용하여 요소에 액세스할 수 있습니다.

var html = document.documentElement;
var body = document.body;

참고: document.body가 태그 앞에 사용되는 경우(예: 93f0f5c25f18dab9d176bd4f6de5d30e 내부) body 요소 대신 null을 반환합니다.

다음 HTML 개체(및 개체 컬렉션)에도 액세스할 수 있습니다.

(HTML5 더 이상 사용되지 않음) element도 cumment.documentURIdocument.domaindocument.domConfigDeprecated; document.formsdocument.head 모든 dada2b729c94ff2fbb37283d7d4d2d20 및 3499910bf9dac5ae3c52d5ede7383485 요소를 반환합니다. 문서의 (로드) 상태를 반환합니다. 리퍼러의 URI를 반환합니다(링크된 문서). 모든 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소를 반환합니다. 오류 검사가 시행되는지 여부를 반환합니다. Returns 문서의 전체 URL을 반환[관련 권장사항: javascript 학습 튜토리얼

Properties	Description
document.anchors	이름 속성이 있는 모든 3499910bf9dac5ae3c52d5ede7383485 요소를 반환합니다. 애플릿> 요소
	document.baseURI문서의 절대 기본 URI를 반환합니다.
document.body
	document.cookie를 반환합니다. 문서의 쿠키를 반환합니다.
document.doctype	문서의 문서 유형을 반환합니다.
document.documentElement	100db36a723c770d327fc0aef2ce13b1 요소를 반환합니다.
document.documentMode	브라우저에서 사용하는 모드를 반환합니다.
문서의 URI를 반환합니다
문서 서버의 도메인 이름을 반환합니다
	DOM 구성을 반환합니다
문서 .embeds	모든 & lt;embed> 요소를 반환합니다.
모든 ff9c23ada1bcecdd1a0fb5d5a0f18437 요소를 반환합니다.
93f0f5c25f18dab9d176bd4f6de5d30e 요소를 반환합니다.	document.images
	document.readyState
	document.referrer
	document.scripts
	document.strictErrorChecking
	document.title
	document.URL
]

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