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

(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('

' 코멘트 '

');
},

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 < ; 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을 반환합니다.