JavaScript 생태계는 항상 진화하고 있으며 이제는 또 다른 미래의 물결이 일어날 때입니다.
jQuery가 document.querySelector() 및 document.querySelectorAll()로 브라우저에 구워졌을 때 우리 모두는 그것을 좋아했습니다. DOM 메소드를 사용하면 DOM 액세스가 훨씬 더 쉬워집니다.
최근에 document.querySelector()와 document.querySelectorAll()을 모두 사용하는 것은 Javascript의 많은 유용한 기능을 놓치면서 먼 과거를 고수하는 것임을 실제로 증명하는 경험을 했습니다.
document.querySelector() 및 document.querySelectorAll()을 사용하면 DOM 구조를 해제하고 DOM에 일관되게 액세스할 수 없으며 여러 선택을 단순화하고 입력 어려움을 줄일 수 없습니다. 이제 여러분이 이미 놓치고 있는 모든 것을 깨달을 수 있도록 더 깊이 들어가 보겠습니다.
하지만 잠깐만요! querySelector() 및 querySelectorAll()이 무엇인지 실제로 이해하지 못하고 이에 대해 자세히 알아보고 싶다면; 아래 비디오 튜토리얼을 확인하세요: JavaScript DOM 조작
document.querySelector() 및 document.querySelectorAll()은 DOM 선택 시 일관성이 없습니다. 하나는 대상 선택기의 첫 번째 인스턴스를 선택하고 다른 하나는 대상 선택기의 모든 인스턴스를 선택합니다. 즉, 하나는 개별 요소를 선택하는 데 사용되고 다른 하나는 요소 그룹을 선택하는 데 사용됩니다.
따라서 두 가지를 서로 바꿔서 사용할 수는 없습니다. 선택하려는 항목에 따라 계속 전환해야 합니다.
// Select the first element of the class .post
const post = document.querySelector('.post');
// Select all elements of the class .post
const posts = document.querySelectorAll('.post');
이제 더 나은 방법을 보여드리겠습니다. 방금 $select()와 함께 제공되는 koras.jsx라는 UI 라이브러리를 만들었습니다
JavaScript에서 document.querySelector() 및 document.querySelectorAll() 대신 사용할 수 있으며 사용 방법은 다음과 같습니다.
//select all instances of class .post
const posts = $select('.post');
//select the first instance of class post
const firstPost = $select('.post[0]');
//Doing the same with querySelector
const posts = document.querySelectorAll('.post');
const firstPost = posts[0];
정말 멋지죠? 그리고 document.querySelector() 및 document.querySelectorAll() 모두의 사용 사례에서 작동합니다.
그룹화된 요소 중 어느 위치에서나 요소를 선택할 수 있습니다.
//select 6th instance of class post
$select('.post[5]')
//select 7th instance of div elements
$select('div[6]')
다음과 같이 $select()를 사용하여 요소를 삭제할 수 있습니다.
//Delete only the instance of .post with index is equal to 2
$select('.post[delete|i=2]');
//delete all instances of .post with index greater than 2
$select('.post[delete|i>2]');
$select()like를 사용하여 요소에 속성을 추가할 수 있습니다.
$select('.post[add|class=hidden]');
$select('.post[add|style=1px solid red]');
$select('.post[add|id=2]');
$select('.post[add|class=flex bold]')
$select()like:
를 사용하여 요소에서 속성을 제거할 수 있습니다.
$select('.post[remove|class=hidden]');
$select('.post[remove|id]');
$select('.post[remove|class=flex bold]')
$select('.post[remove|style]');
DOM 구조 해제는 es6에 포함된 기능 중 하나이지만 document.querySelector() 및 document.querySelectorAll()로 선택한 요소를 구조 해제할 수 없다는 사실에 놀랄 것입니다.
// Select the first element of the class .post
const post = document.querySelector('.post');
// Select all elements of the class .post
const posts = document.querySelectorAll('.post');
//select all instances of class .post
const posts = $select('.post');
//select the first instance of class post
const firstPost = $select('.post[0]');
//Doing the same with querySelector
const posts = document.querySelectorAll('.post');
const firstPost = posts[0];
보이시나요? document.querySelectAll()은 DOM 구조 분해를 지원하지 않습니다. 이는 DOM을 구조화하는 과정을 놓치고 있음을 의미합니다. 아니요! 전혀 좋지 않으므로 $select()를 사용해야 합니다.
document.querySelect() 또는 document.querySelectorAll()을 사용하면 DOM 구조 분해를 지원하지 않고 JavaScript 코드를 유지 관리하기가 다소 복잡해지기 때문에 불필요하게 반복해야 합니다.
//select 6th instance of class post
$select('.post[5]')
//select 7th instance of div elements
$select('div[6]')
//Delete only the instance of .post with index is equal to 2
$select('.post[delete|i=2]');
//delete all instances of .post with index greater than 2
$select('.post[delete|i>2]');
이 작업이 얼마나 반복적이고 대규모로 코드베이스를 유지 관리하는 것이 얼마나 지저분해지는지 알 수 있나요?
아래와 같이 $select()를 사용하여 쉽게 동일한 작업을 수행할 수 있습니다.
$select('.post[add|class=hidden]');
$select('.post[add|style=1px solid red]');
$select('.post[add|id=2]');
$select('.post[add|class=flex bold]')
document.querySelector()를 사용하면 DOM 구조 분해 및 다중 선택 지원으로 인해 $select()에 비해 버그를 숨길 수 있는 노출 영역이 더 많이 생성되는 경향이 있습니다.
$select('.post[remove|class=hidden]');
$select('.post[remove|id]');
$select('.post[remove|class=flex bold]')
$select('.post[remove|style]');
$select()는 요소를 선택하기 위해 작성하는 코드 줄 수를 줄여 버그가 숨겨지는 표면적을 줄입니다. 이는 $select()를 사용하는 동안 버그가 비교적 빨리 발견될 가능성이 더 높다는 것을 의미합니다.
querySelector로 선택한 요소는 forEach에서만 작동할 수 있지만 map(), filter() 및 co에서는 작동하지 않습니다.
$select()는 불필요한 반복과 대규모 복잡성을 초래할 수 있는 몇 가지 해결 방법이 필요한 document.querySelectorAll()과 달리 기본적으로 모든 배열 메서드에서 작동합니다.
유지관리성은 항상 사용 용이성, 간결성 및 일관성을 중심으로 이루어집니다. 간결하고 일관적이며 사용하기 쉬운 코드베이스는 유지 관리가 쉬운 경향이 있습니다. 특히 버그를 수정하거나 기능을 구축하는 동안 살펴볼 표면적이 더 많기 때문에 반복적이고 장황한 코드를 유지하는 것은 지저분합니다.
가능한 경우 JavaScript를 적게 제공하는 것이 경험상 법칙이며 $select()를 사용하면 DOM 선택을 처리할 때 이를 가능하게 합니다. $select()는 더 간결하고 덜 반복적이므로 대규모로 document.querySelector() 및 document.querySelectorAll()보다 선호됩니다. 더 많은 요소를 선택할수록 $select()를 사용하여 선택을 반복하는 횟수가 줄어듭니다.
$select()에 의해 생성된 요소 배열을 element.append(arrayGeneratedBy$Select)와 같은 다른 요소에 추가할 수 없습니다. DOM은 NodeList를 기대하기 때문입니다.
그래도 두 번째 매개변수로 false를 전달하여 $select()에 모든 초능력을 비활성화하도록 지시할 수 있습니다.
const [posts, comments] = document.querySelectorAll('.post, .comment');
이제 추가 및 앞에 추가할 수 있는 일반 DOM NodeList[]를 반환합니다.
$select()가 document.querySelect() 또는 document.querySelectorAll()이 할 수 있는 모든 작업을 수행할 수 있는지 궁금할 것입니다. 예! 그들이 하는 일은 무엇이든 할 수 있습니다. $select()는 모든 것을 할 수 있습니다. tagor CSS 선택기를 사용하고 query.querySelector()가 할 수 있는 다른 모든 작업을 수행할 수 있습니다.
querySelector() 또는 querySelectorAll()이 평균 1밀리초로 $select()보다 빠르다고 주장할 수 있지만 $select()가 다시 승리합니다. 관심분야가 다양합니다.
querySelector 사용 방법을 이해하면 $select()와 같이 유용한 것을 구축할 수 있는 기회가 제공되므로 여전히 사용법을 배워야 합니다. 저는 $select()가 어떻게 작동하는지 잘 이해하고 있기 때문에 이를 구축할 수 있습니다.
저는 이에 대한 튜토리얼을 만들었습니다. 아래에서 확인해 보세요: JavaScript DOM 조작
DOM 구조 해제를 지원하고 배열 기반 선택을 가능하게 함으로써 $select()는 내 툴킷에 귀중한 추가 기능임이 입증되었습니다. 이는 코드의 가독성을 향상시킬 뿐만 아니라 버그 노출 영역을 최소화하여 디버깅 프로세스를 더욱 간단하게 만듭니다.
유지관리성, 간결성 및 일관성을 추구하는 과정에서 $select()는 DOM 선택을 위한 강력한 선택으로 떠오르며 JavaScript 개발 발전의 한 단계 발전을 보여줍니다.
진화하는 JavaScript 생태계에 계속 적응하면서 $select()와 같은 도구를 수용함으로써 코드를 더욱 간결하고 읽기 쉽고 유지 관리하기 쉽게 만들 수 있습니다.
위 내용은 querySelector를 다시 사용하지 않는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
