자바스크립트 쿼리 선택기

| | | | |

querySelector 및 getElementByID 두 가지 방법을 사용하면 JavaScript 개체 모델 DOM(문서) 에서 요소를 검색할 수 있습니다. 그러나 각 방법에는 고유한 사용 사례가 있습니다.

이 가이드에서는 querySelector 및 getElementById의 가장 일반적인 사용 사례를 살펴봅니다. 또한 이 두 가지 방법을 비교하고 각각의 작동 방식에 대한 기본 예를 안내합니다.

querySelector란 무엇입니까?

JavaScript querySelector () 메서드 를 사용하면 CSS 선택기를 사용하여 DOM 요소 또는 웹 페이지를 검색할 수 있습니다. 이 메서드는 특정 DOM 선택기와 일치하는 모든 요소를 선택하는 querySelectorAll()이라는 자매 함수와 함께 제공됩니다.

이 두 메서드는 매우 다양합니다. 이는 CSS 선택기 구문 을 사용하여 웹페이지에서 요소를 선택할 수 있기 때문입니다.

querySelector를 사용하면 다음을 수행할 필요가 없습니다. getElementById 또는 getElementsByClassName을 사용한 경우와 마찬가지로 또는 ID 클래스 에 대해서만 항목을 선택하는 기능에 의해 제한되는 것에 대해 걱정하십시오. 이러한 메서드는 선택한 요소가 CSS 스타일시트에서 선택한 요소와 유사한 경우 특히 유용합니다.

querySelector 메서드를 살펴보겠습니다. JavaScript에서 나중에 선택할 수 있는 HTML 요소를 작성하는 것으로 시작하겠습니다.

"접근성" 클래스 이름으로 텍스트 단락을 정의했습니다. 그런 다음 querySelector ()

이 코드는 클래스가 "접근성"과 동일한 첫 번째 요소를 선택합니다. "." 클래스를 선택하려는 것을 의미합니다. "accessibility" 클래스가 있는 두 개의 요소가 있는 경우 querySelectorAll()을 사용하여 둘 다 검색할 수 있습니다.

getElementById란 무엇입니까?

getElementById() 메소드 는 속성 ID를 기반으로 요소를 가져오므로 이름이 지정됩니다.

이 방법은 특정 ID를 기반으로 항목을 검색할 수 없기 때문에 querySelector보다 더 제한적입니다.

웹 페이지에서 단일 요소를 검색하려면 이 옵션을 사용하십시오. 실제로 HTML ID는 고유해야 합니다. 특정 요소에 대해 ID 카드를 사용하여 웹 페이지의 두 요소를 참조할 수 없습니다.

getElementById 선택기를 사용하여 요소를 검색합니다. 먼저 HTML 코드를 작성하여 우리는 요소를 선택할 것입니다:

다음으로 DOM에서 요소를 선택하는 JavaScript 코드를 작성합니다.

우리는 JavaScript 명령어를 사용하여 ID가 "comments"와 같은 요소를 검색합니다. 이것은 우리가 웹 페이지에 댓글을 게시하는

요소입니다.

이 두 방법의 명백한 유사점은 웹 페이지를 선택하는 두 요소입니다. 다른 방식으로 수행합니다.

querySelector 선언을 사용하면 CSS 선택기를 기반으로 요소를 선택할 수 있습니다. 즉, ID, 클래스 또는 기타 유형의 선택기로 항목을 선택할 수 있습니다. getElementById 메소드를 사용하면 해당 ID를 기반으로 요소를 선택할 수 없습니다.

일반적으로 가장 명확하게 작업을 수행하는 선택기를 선택해야 합니다.

ID 또는 클래스별로 요소를 선택해야 하는 경우 각각 getElementById 또는 getElementsByClassName을 사용할 수 있습니다. 보다 정교한 규칙을 사용하여 항목을 선택해야 하는 경우 querySelector 메서드가 가장 좋은 옵션입니다.

querySelector와 getElementById는 모두 한동안 JavaScript의 일부였습니다. 결과적으로 , 이러한 메소드는 모두 최신 브라우저에서 완전히 지원됩니다.

결론

querySelector 메소드를 사용하면 CSS 선택 쿼리를 사용하여 요소를 검색할 수 있습니다. getElementById 메소드는 DOM으로 요소를 검색합니다. ID.

두 방법 모두 브라우저를 광범위하게 지원합니다. CSS 선택기를 사용하여 쉽게 표현할 수 있는 보다 복잡한 규칙을 사용하여 항목을 선택해야 하는 경우 querySelector를 사용하도록 선택해야 합니다. getElementById를 사용하여 해당 ID를 사용하는 것이 좋습니다.

이제 querySelector와 getElementByID를 사용할 때를 알았습니다. 프로처럼 호들갑!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method