javascript_javascript 기술에서 querySelector 및 querySelectorAll을 사용하기 위한 지침

처음에는 많은 사람들이 jquery의 선택기를 이 두 API와 비교할 것입니다(저도 마찬가지입니다). 유사점과 차이점을 비교하는 것은 괜찮지만, 이로 인해 일부 학생들은 특히 DOM에서 이 API를 호출할 때 브라우저에서 이 두 API의 구현을 오해하게 되었습니다. 요소.

다음은 jsFiddle 예제입니다. 이를 설명하기 위해 사용하겠습니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

(function(global) {
global.doc = document;
global.body = doc.getElementsByTagName('body')[0];
global .$ = 함수(id) {
return doc.getElementById(id);
}

global.Logger = function(id) {
this.logElem = $(id);
this .logArr = [];
};
global.Logger.prototype = {
생성자: global.logger,

append: function(comment) {
this.logArr.push('<p>' 코멘트 '</p>');
},

flush: function() {
this.logElem.innerHTML = this. logArr.join( '');
},

clear: function() {
this.logElem.innerHTML = ''
this.logArr = []; }
})(this);

(function() {
var logger = new Logger('log');

var items = $ ('inner' ).querySelectorAll('#main h4.inside');
logger.append(items.length)

for(var i = 0, len = items.length; i &lt ; len; i ) {
logger.append(items[i].innerHTML)

logger.flush()


오해는 $('inner').querySelectorAll('#main h4.inside') 구현을 이해하는 데 있습니다. 많은 사람들이 처음에는 div[id='의 하위 항목에서 직접 검색하고 있다고 생각했습니다. inner'] (나도) 이번 #main은 좀 눈에 거슬린다. 실제로 선택기 문자열을 기반으로 전체 문서를 검색한 다음 div[id='inner']에 속하는 하위 노드를 반환합니다. 많은 분들이 궁금해하실 텐데요, 그렇다면 부모 노드를 기준으로 자식 노드를 직접 검색하여 구현해 보는 것은 어떨까요? elem.getElementsByTagName과 마찬가지로 유연한 선택기 문자열을 갖는 것이 내 아이디어입니다.

querySelector는 일치하는 첫 번째 요소만 반환하거나, 일치하는 요소가 없으면 null을 반환합니다.

querySelectorAll은 일치하는 요소의 컬렉션을 반환합니다. 일치하는 항목이 없으면 빈 노드 목록(노드 배열)을 반환합니다.

반환된 결과는 정적이며 문서 구조에 대한 이후 변경 사항은 이전에 얻은 결과에 영향을 미치지 않습니다.

현재 IE8, ff 및 chrome은 모두 이 API를 지원합니다(IE8의 선택기 문자열은 css2.1만 지원합니다).