검색 : getElement *, querySelector *

DOM 탐색 속성은 요소가 서로 가까이있을 때 유용합니다. 그렇지 않다면? 페이지의 임의의 요소를 얻는 방법은 무엇입니까?

그에 대한 추가 검색 방법이 있습니다.

document.getElementById 또는 ID 만

요소에 id 속성을 사용하면 위치에 관계없이 document.getElementById(id) 메소드를 사용하여 요소를 가져올 수 있습니다.

예를 들어 :

또한 요소를 참조하는 id에 의해 명명 된 전역 변수가 있습니다.

… 같은 이름이면 우선 적용됩니다.

요소에 액세스하기 위해 ID 이름이 지정된 전역 변수를 사용하지 마십시오.

이 동작은 다음에 설명되어 있습니다. 사양, 그래서 일종의 표준입니다. 하지만 주로 호환성을 위해 지원됩니다.

브라우저는 JS와 DOM의 네임 스페이스를 혼합하여 우리를 돕습니다. HTML에 인라인 된 간단한 스크립트에는 문제가 없지만 일반적으로 좋지 않습니다. 이름 지정 충돌이있을 수 있습니다. 또한 JS 코드를 읽고 HTML을 볼 수없는 경우 변수의 출처가 명확하지 않습니다.

이 자습서에서는 id를 사용합니다. 요소의 출처가 분명 할 때 간결성을 위해 요소를 직접 참조합니다.

실제에서는 document.getElementById가 선호되는 방법입니다.

id는 고유해야합니다.

id는 고유해야합니다. 주어진 id의 요소는 문서에 하나만있을 수 있습니다.

동일한 id를 사용하는 메서드의 동작은 예측할 수 없습니다. 예 : document.getElementById는 이러한 요소를 임의로 반환 할 수 있습니다. 따라서 규칙을 준수하고 id를 고유하게 유지하십시오.

만 document.getElementById, anyElem.getElementById

getElementById 메서드는 document 개체. 전체 문서에서 주어진 id를 찾습니다.

querySelectorAll

지금까지 가장 다목적 메서드 인 elem.querySelectorAll(css)는 주어진 CSS 선택기와 일치하는 elem 내의 모든 요소를 반환합니다.

여기에서 모든 <li> 마지막 자식 요소 :

이 방법은 모든 CSS 선택기를 사용할 수 있기 때문에 실제로 강력합니다.

사용 가능 유사 클래스

:hover 및 :active와 같은 CSS 선택기의 유사 클래스도 지원됩니다. 예를 들어, document.querySelectorAll(":hover")는 포인터가 현재 위에있는 요소가있는 컬렉션을 반환합니다 (중첩 순서 : 가장 바깥 쪽 <html>부터 중첩 됨).

querySelector

elem.querySelector(css) 호출은 주어진 CSS의 첫 번째 요소를 반환합니다. 선택자입니다.

즉, 결과는 elem.querySelectorAll(css)와 동일하지만 후자는 모든 요소를 찾아 하나를 선택하고 elem.querySelector는 하나를 찾습니다. 따라서 더 빠르고 쓰기도 더 짧습니다.

matches

이전 메서드는 DOM을 검색했습니다.

elem.matches (css)는 아무것도 찾지 않습니다. , 단지 elem가 주어진 CSS 선택기와 일치하는지 확인합니다. true 또는 false를 반환합니다.

이 메서드는 요소를 반복 할 때 유용합니다 (예 : 관심있는 항목을 필터링하려고합니다.

예 :

가장 가까운

요소의 조상은 다음과 같습니다. parent, the parent of 부모, 부모 등등. 조상은 함께 요소에서 맨 위로 부모 체인을 형성합니다.

elem.closest(css) 메소드는 CSS 선택기와 일치하는 가장 가까운 조상을 찾습니다. elem 자체도 검색에 포함됩니다.

즉, closest 메서드는 요소와 각 부모를 확인합니다. 선택자와 일치하면 검색이 중지되고 상위 항목이 반환됩니다.

예 :

getElementsBy *

다른 검색 방법도 있습니다. 태그, 클래스 등에 의한 노드의 경우.

오늘날 querySelector가 더 강력하고 쓰기가 더 짧기 때문에 대부분 역사입니다.

그러므로 여기서는 주로 완성도를 위해 다루지 만 이전 스크립트에서 여전히 찾을 수 있습니다.

elem.getElementsByTagName(tag)는 주어진 요소를 찾습니다. 태그를 지정하고 컬렉션을 반환합니다. tag 매개 변수는 “모든 태그”에 대해 별표 "*"가 될 수도 있습니다.
elem.getElementsByClassName(className)는 주어진 CSS 클래스가있는 요소를 반환합니다.
document.getElementsByName(name)는 주어진 name 속성, 문서 전체. 거의 사용되지 않습니다.

예 :

표에서 모든 input 태그를 찾아 보겠습니다.

편지!

초보 개발자는 때때로 "s" 편지를 잊어 버립니다. 즉, getElementsByTagName 대신 getElementByTagName를 호출하려고합니다.

"s" 문자는 단일 요소를 반환하기 때문에 getElementById에 없습니다. 그러나 getElementsByTagName는 요소 모음을 반환하므로 내부에 "s"가 있습니다.

요소가 아닌 컬렉션을 반환합니다!

초보자에게 널리 퍼진 또 다른 실수는 다음과 같습니다.

입력 컬렉션을 가져와 내부 요소가 아닌 여기에 값을 할당하기 때문에 작동하지 않습니다.

컬렉션을 반복하거나 인덱스로 요소를 가져온 다음 다음과 같이 할당해야합니다.

.article 요소 찾기 :

라이브 컬렉션

모든 메소드 "getElementsBy*"는 라이브 컬렉션을 반환합니다. 이러한 컬렉션은 항상 문서의 현재 상태를 반영하며 변경시 “자동 업데이트”됩니다.

아래 예에는 두 개의 스크립트가 있습니다.

첫 번째 스크립트 <div> 컬렉션에 대한 참조를 생성합니다. 현재 길이는 1입니다.
두 번째 스크립트 브라우저가 <div>를 하나 더 만나면 실행되므로 길이는 2입니다.

반대로 , querySelectorAll는 정적 컬렉션을 반환합니다. 고정 된 요소 배열과 같습니다.

대신 사용하면 두 스크립트 모두 :

이제 차이점을 쉽게 확인할 수 있습니다. 문서에 새로운 div가 나타난 후 정적 컬렉션이 증가하지 않았습니다.

요약

DOM에서 노드를 검색하는 6 가지 주요 방법이 있습니다.

Method	검색 기준 …	Can cal l 요소에 있습니까?	라이브?
`querySelector`	CSS 선택기	✔	–
`querySelectorAll`	CSS 선택기	✔	–
`getElementById`	`id`	–	–
`getElementsByName`	`name`	–	✔
`getElementsByTagName`	태그 또는 `"*"`	✔	✔
`getElementsByClassName`	클래스	✔	✔

지금까지 가장 많이 사용되는 것은 querySelector 및 querySelectorAll이지만 getElement(s)By*는 산발적으로 도움이되거나 이전 스크립트에서 찾을 수 있습니다.

그 외에 :

elem.matches(css) elem가 주어진 CSS 선택기와 일치하는지 확인합니다.
elem.closest(css)가 일치하는 가장 가까운 조상을 찾습니다. 주어진 CSS 선택자. elem 자체도 확인됩니다.

그리고 때때로 유용하므로 여기에서 자식-부모 관계를 확인하는 방법을 하나 더 언급하겠습니다.

elemA.contains(elemB)는 elemB가 elemA (elemA의 하위 항목) 또는 elemA==elemB 인 경우

검색 : getElement , querySelector